ESLint Stylistic 项目中 TypeScript 泛型缩进问题的分析与解决

在 TypeScript 开发中，代码风格的统一性对于团队协作和代码可维护性至关重要。ESLint Stylistic 作为代码风格检查工具，在处理 TypeScript 泛型多行缩进时存在一个值得注意的问题。

问题现象

当使用 @stylistic/indent 规则配置为 2 空格缩进时，TypeScript 泛型在多行情况下的缩进处理会出现异常。具体表现为：

type TGeneric<A, B, C, D> = void;

type TTest = TGeneric<
  string,
  string,
  string,
  string
>;

上述代码虽然符合大多数团队的代码风格规范，但 ESLint Stylistic 会错误地报告缩进问题："Expected indentation of 0 spaces but found 2"。

问题本质

这个问题源于 ESLint Stylistic 对 TypeScript 特定语法节点的处理不够完善。在 TypeScript AST 中，泛型参数列表由 TSTypeParameterInstantiation 节点表示，而函数返回类型注解则涉及 TSTypeAnnotation 节点。当前的缩进规则未能正确处理这些节点的多行缩进情况。

临时解决方案

在问题修复前，开发者可以采用以下临时解决方案：

1. 在 ESLint 配置中忽略相关节点：

{
  "rules": {
    "@stylistic/indent": [
      "error",
      2,
      {
        "ignoredNodes": [
          "TSTypeParameterInstantiation",
          "TSTypeAnnotation"
        ]
      }
    ]
  }
}

需要注意的是，这种方法虽然能消除错误提示，但会完全跳过对这些节点的缩进检查，可能导致不一致的代码风格。

最佳实践建议

1. 对于团队项目，建议统一泛型多行格式的写法，可以采用以下任一风格：

   • 首行不换行，参数换行对齐
   • 所有内容换行，参数缩进一级

2. 关注 ESLint Stylistic 的更新，及时升级到包含修复的版本。

3. 在等待官方修复期间，可以考虑使用 Prettier 等格式化工具作为补充，确保代码风格一致。

技术背景

TypeScript 的类型系统在 AST 表示上有其特殊性。泛型参数列表和类型注解作为类型系统的一部分，其缩进规则需要特殊处理。这与 JavaScript 中函数参数列表的缩进规则类似但不完全相同，这也是导致规则实现时需要特别考虑的原因。

结语

代码风格工具在支持新语法特性时难免会遇到边界情况。这个问题提醒我们，在使用静态检查工具时，既要依赖其自动化检查的能力，也要理解其局限性，必要时进行适当配置或等待官方修复。ESLint Stylistic 团队已经注意到这个问题并进行了修复，体现了开源社区对代码质量工具的持续改进。