如何将Angular项目中的ESLint错误转换为警告

1. 全面修改ESLint规则级别 #

你仅修改了自定义规则的error为warn，但继承的规则集（如@angular-eslint/template/recommended）仍保持error级别，需要在.eslintrc.json中覆盖这些规则的级别：

修改自定义规则 #

将现有rules里所有"error"替换为"warn"：

{
  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "parserOptions": {
        "project": [
          "tsconfig.json",
          "e2e/tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/ng-cli-compat",
        "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        "@angular-eslint/component-selector": [
          "warn",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ],
        "@angular-eslint/directive-selector": [
          "warn",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ],
        "@typescript-eslint/consistent-type-definitions": "warn",
        "@typescript-eslint/dot-notation": "off",
        "@typescript-eslint/explicit-member-accessibility": [
          "off",
          {
            "accessibility": "explicit"
          }
        ],
        "@typescript-eslint/no-use-before-define": "warn",
        "brace-style": [
          "warn",
          "1tbs"
        ],
        "id-blacklist": "off",
        "id-match": "off",
        "max-len": "off",
        "no-underscore-dangle": "off",
        "valid-typeof": "warn"
      }
    },
    {
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended"
      ],
      "rules": {
        // 覆盖模板规则集中的error为warn，示例：
        "@angular-eslint/template/no-negated-async": "warn",
        "@angular-eslint/template/click-events-have-key-events": "warn"
        // 若需批量处理，可添加"*": "warn"（谨慎使用，会将所有规则设为警告）
      }
    }
  ]
}

2. 调整Angular CLI的Lint配置 #

打开angular.json，找到对应项目的lint配置，修改failOnError为false：

"lint": {
  "builder": "@angular-eslint/builder:lint",
  "options": {
    "lintFilePatterns": [
      "src/**/*.ts",
      "src/**/*.html"
    ],
    "failOnError": false,
    "reportUnusedDisableDirectives": true
  }
}

3. 调整编辑器显示设置（以VS Code为例） #

让ESLint问题在编辑器中显示为黄色警告：

• 打开VS Code设置（快捷键Ctrl+,）
• 搜索ESLint: Rules Customizations，点击Edit in settings.json
• 添加以下配置：

"eslint.rules.customizations": [
  { "rule": "*", "severity": "warn" }
]

4. 重启生效 #

修改配置后，重启VS Code和Angular开发服务（ng serve），确保所有设置生效。

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