Angular项目中ESLint无法校验HTML文件的问题求助

1. 确认依赖安装 #

首先确保已安装Angular ESLint模板相关依赖，若未安装，执行以下命令：

npm install @angular-eslint/eslint-plugin @angular-eslint/template-parser --save-dev

2. 修改.eslintrc.json配置 #

在配置文件中添加针对HTML文件的overrides块，注意模板规则需使用@angular-eslint/template/前缀，不可直接复用TS规则名：

{
  "root": true,
  "ignorePatterns": ["projects/**/*"],
  "overrides": [
    // 保留原有TS文件配置
    {
      "files": ["*.ts"],
      "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        // 你的TS规则配置（如警告替代错误）
        "@typescript-eslint/no-unused-vars": "warn",
        "eqeqeq": "warn"
      }
    },
    // 添加HTML文件专属配置
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "parser": "@angular-eslint/template-parser",
      "rules": {
        "@angular-eslint/template/eqeqeq": "warn",
        "@angular-eslint/template/indent": [
          "warn",
          {
            "indent": 2, // 可根据项目需求调整缩进值
            "switchCase": 1
          }
        ]
      }
    }
  ]
}

3. 检查angular.json的Lint范围 #

确保Lint任务包含HTML文件，找到项目下的architect > lint > options，修改lintFilePatterns字段：

"options": {
  "lintFilePatterns": [
    "src/**/*.ts",
    "src/**/*.html"
  ]
}

4. 验证效果 #

执行以下命令触发Lint校验，此时HTML文件的规则应该会正常生效：

ng lint

内容的提问来源于stack exchange，提问作者T. B. - Tantiya Bichchu