Angular项目中ESLint自动修复eqeqeq规则时=符号位置异常

问题背景 #

在Angular项目的HTML文件中，*ngIf多条件使用==时，触发@angular-eslint/template/eqeqeq规则报错，执行ng lint --fix或IDE自动修复后，代码被错误插入额外的=到行首，示例如下：
修复前：

*ngIf="
  config.inputType == 'string' ||
  config.inputType == 'url' ||
  config.inputType == 'number' ||
  config.inputType == 'text'
"

错误修复后：

*ngIf="
  config.inputType == 'string' ||
=  config.inputType == 'url' ||
  config.inputType == 'number' ||
  config.inputType == 'text'
"

解决方法 #

1. 临时关闭自动修复，手动修正 #

修改.eslintrc.json中HTML规则块，禁用eqeqeq的自动修复功能，避免错误格式：

{
  "files": ["*.html"],
  "extends": ["plugin:@angular-eslint/template/recommended"],
  "rules": {
    "@angular-eslint/template/eqeqeq": ["error", { "fix": false }]
  }
}

之后手动将所有==替换为===即可。

2. 统一@angular-eslint依赖版本 #

此bug多因@angular-eslint系列包版本不匹配导致，执行以下命令检查版本：

npm list @angular-eslint/eslint-plugin-template @angular-eslint/core

将所有@angular-eslint相关包升级到与当前Angular版本兼容的统一版本：

npm update @angular-eslint/eslint-plugin-template @angular-eslint/core @angular-eslint/cli

注：Angular版本与@angular-eslint版本需对应，例如Angular 16需搭配@angular-eslint 16.x系列

3. 调整ESLint配置结构，合并HTML规则块 #

原配置中HTML文件分为两个独立的overrides块，可能导致规则执行顺序冲突。合并为单一配置块：

{
  "files": ["*.html"],
  "excludedFiles": ["*inline-template-*.component.html"],
  "extends": [
    "plugin:@angular-eslint/template/recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "prettier/prettier": ["error", { "parser": "angular" }]
  }
}

4. 重构条件表达式（优化方案） #

通过数组includes简化多条件判断，从根源避免多==带来的规则触发和修复问题：

*ngIf="['string', 'url', 'number', 'text'].includes(config.inputType)"

内容的提问来源于stack exchange，提问作者Cubical Drone