ESLint Stylistic 项目中 indent 规则的 ignoredNodes 选项问题解析

问题背景

在 ESLint Stylistic 项目中，用户在使用 @stylistic/indent 规则时发现了一个关于 ignoredNodes 选项的问题。该选项在原生 ESLint 的 indent 规则中能够正常工作，但在迁移到 Stylistic 版本后却出现了异常行为。

问题现象

用户在使用 TypeScript 代码时，配置了忽略特定节点类型的缩进检查：

export interface ApiProps
extends ConstructProps {
  ssr: Ssr
}

当使用 ESLint 原生 indent 规则时，配置如下可以正常工作：

rules: {
  'indent': [
    'error', 2, {
      'ignoredNodes': [
        'ClassDeclaration',
        'InterfaceDeclaration',
      ],
    }
  ],
}

但切换到 @stylistic/indent 规则后，相同的配置却无法忽略指定节点的缩进检查，导致 lint 错误。

技术分析

经过深入分析，这个问题涉及几个关键因素：

1. AST 节点类型差异：TypeScript 使用的 AST 节点类型与 JavaScript 不同。对于接口声明，正确的节点类型应该是 TSInterfaceDeclaration 而不是 InterfaceDeclaration。

2. 规则继承关系：@stylistic/indent 规则实际上是合并了 ESLint 原生 indent 规则和 typescript-eslint 的 indent 规则实现。这意味着它需要同时处理 JavaScript 和 TypeScript 的 AST 节点类型。

3. 已知问题：这个问题实际上是继承自 typescript-eslint 项目的一个已知问题，将在未来的版本中修复。

解决方案

对于遇到此问题的开发者，有以下几种解决方案：

1. 使用正确的节点类型：对于 TypeScript 特定语法，应该使用带有 TS 前缀的节点类型名称：

rules: {
  '@stylistic/indent': [
    'error', 2, {
      'ignoredNodes': [
        'ClassDeclaration',
        'TSInterfaceDeclaration',
      ],
    }
  ],
}

2. 临时禁用规则：如果问题仍然存在，可以考虑暂时禁用该规则：

const { "@stylistic/indent": _, ...newRules } = originalRules.rules;
const recommendedRules = {
  ...originalRules,
  rules: newRules
}

3. 等待官方修复：关注项目更新，等待官方修复这个继承自 typescript-eslint 的问题。

最佳实践建议

1. 在使用 TypeScript 时，始终查阅 typescript-eslint 文档，了解正确的 AST 节点类型名称。

2. 在迁移规则配置时，不仅要修改规则前缀（如从 indent 改为 @stylistic/indent），还应该检查是否有特定于语言的 AST 节点类型需要调整。

3. 对于复杂的缩进需求，考虑使用更专业的格式化工具如 Prettier 来处理缩进问题，而将 ESLint 专注于代码质量检查。

总结

ESLint Stylistic 项目中的 @stylistic/indent 规则提供了更强大的代码格式化能力，但在处理 TypeScript 特定语法时需要特别注意节点类型的正确配置。理解 AST 节点类型的差异和规则的实现原理，能够帮助开发者更有效地解决这类问题。随着项目的不断更新，这些问题有望在未来的版本中得到更好的解决。