Angular 14升级ESLint至^8.23.0后出现缩进规则报错的问题求助

我之前升级ESLint到8.23.0版本时也碰到过一模一样的问题，这个版本确实在缩进规则的处理逻辑上有不少变动，尤其是和TypeScript项目的适配性冲突变得更明显了。结合你的配置和尝试过的方案，我给你整理几个能解决问题的步骤：

核心问题分析 #

ESLint的原生indent规则对TypeScript语法的支持本来就不完善，8.23.0版本对该规则的校验逻辑做了更新，导致它和@typescript-eslint插件的规则出现了冲突——哪怕你尝试关闭原生规则，旧的缓存或者配置优先级问题可能让冲突依然存在。

具体解决步骤 #

1. 彻底替换原生indent规则为@typescript-eslint/indent #

修改你ESLint配置中TS文件对应的规则块，完全禁用原生indent，并正确配置@typescript-eslint的缩进规则（注意它的配置选项和原生规则有细微差异）：

{
  "root": true,
  "ignorePatterns": [ "projects/**/*" ],
  "overrides": [
    {
      "files": [ "*.ts", "*.js", "*.tsx" ],
      "parserOptions": {
        "project": [ "tsconfig.json" ],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        // 完全禁用原生indent规则，避免冲突
        "indent": "off",
        // 启用TypeScript专属的缩进规则，配置你的需求
        "@typescript-eslint/indent": [
          "error",
          2,
          {
            "SwitchCase": 1,
            "ArrayExpression": "first",
            // 可选：添加TS相关的额外缩进配置，比如函数参数
            "FunctionDeclaration": {
              "parameters": "first"
            }
          }
        ],
        // 其他原有规则保持不变
        "@angular-eslint/directive-selector": [ "error", { "type": "attribute", "prefix": "app", "style": "camelCase" } ],
        "@angular-eslint/component-selector": [ "error", { "type": "element", "prefix": "app", "style": "kebab-case" } ],
        "@angular-eslint/template/eqeqeq": "off",
        "@typescript-eslint/naming-convention": "error",
        "quotes": "error",
        "semi": "error",
        "no-multiple-empty-lines": "error",
        "comma-dangle": "error"
      }
    },
    // 其他配置块保持不变
    {
      "files": [ "*.html", "*.css" ],
      "extends": [ "plugin:@angular-eslint/template/recommended" ],
      "rules": {
        "@angular-eslint/template/eqeqeq": "off",
        "@angular-eslint/template/accessibility-elements-content": "error",
        "no-multiple-empty-lines": "error"
      }
    }
  ]
}

2. 清除ESLint缓存 #

升级ESLint版本后，旧的规则缓存可能会导致新配置不生效，必须手动清除：

# 使用Angular CLI的话
ng lint --clear-cache

# 或者直接调用ESLint命令
npx eslint --clear-cache

3. 重新运行校验 #

执行lint命令验证问题是否解决：

ng lint

为什么之前的尝试没生效？ #

你之前尝试启用@typescript-eslint/indent时，可能没有彻底确保原生规则被禁用，或者缓存没有清除导致旧规则依然在生效。另外，@typescript-eslint/indent的配置选项虽然和原生类似，但部分参数的解析逻辑不同，确保配置项完全符合它的要求也很重要。

内容的提问来源于stack exchange，提问作者Mohammad Dayyan