ESLint Stylistic 项目中 TypeScript 缩进规则的正确使用

在 JavaScript 和 TypeScript 开发中，代码缩进是保持代码可读性的重要因素。ESLint Stylistic 项目提供了强大的代码风格检查功能，其中缩进规则(indent)的正确使用尤为关键。

问题背景

许多开发者在配置 ESLint Stylistic 时会遇到缩进不一致的问题，特别是在混合使用 JavaScript 和 TypeScript 的项目中。一个常见的误区是直接使用 @stylistic/js/indent 规则来处理 TypeScript 代码，这会导致缩进检查不准确。

核心问题分析

当开发者使用 @stylistic/js/indent 规则检查 TypeScript 代码时，会出现以下问题：

1. 类型声明(Type Annotations)的缩进不正确
2. 接口(Interfaces)和类型别名(Type Aliases)的缩进不规范
3. 泛型(Generics)的缩进处理不当

这些问题源于 @stylistic/js/indent 规则仅针对 JavaScript 语法设计，无法正确解析 TypeScript 特有的语法结构。

解决方案

要正确处理 TypeScript 代码的缩进，应该使用以下规则之一：

1. @stylistic/ts/indent - 专为 TypeScript 设计的缩进规则
2. @stylistic/indent - 通用缩进规则，能自动适配 JavaScript 和 TypeScript

最佳实践建议

1. 对于纯 TypeScript 项目，优先使用 @stylistic/ts/indent
2. 对于混合 JavaScript 和 TypeScript 的项目，使用 @stylistic/indent
3. 确保相关 parser 配置正确，如 @typescript-eslint/parser

配置示例

module.exports = {
  plugins: ['@stylistic'],
  rules: {
    // 推荐配置
    '@stylistic/indent': ['error', 2], // 使用2空格缩进
    
    // 或者针对TypeScript专用配置
    '@stylistic/ts/indent': ['error', 2]
  }
}

总结

正确选择缩进规则对于维护一致的代码风格至关重要。在 TypeScript 项目中，务必使用专门为 TypeScript 设计的缩进规则，而不是通用的 JavaScript 规则。ESLint Stylistic 项目提供了细分的规则选项，开发者应根据项目实际情况选择最适合的配置。