Angular v17项目ESLint未读取eslintrc.json规则问题求助

问题说明 #

在Angular 17项目中，ESLint完全忽略了eslintrc.json的规则设置——明明把部分规则设为warn、部分设为off，但所有问题都显示为error（红色波浪线），甚至已经关闭的规则也会报错。需要让ESLint严格按照配置区分error、warn和off的规则。

问题根源 #

你同时存在两种ESLint配置文件：eslintrc.json（旧格式）和eslint.config.mjs（ESLint 8+的新扁平格式）。ESLint会优先读取扁平格式的配置文件，而你的eslint.config.mjs只启用了基础的JS和TypeScript推荐规则，完全没引入Angular相关规则和自定义配置，导致eslintrc.json被直接忽略。

解决步骤 #

1. 移除冲突配置文件 #

直接删除项目根目录下的eslint.config.mjs，避免和eslintrc.json产生配置冲突。

2. 验证配置生效 #

运行终端命令：

ng lint

此时ESLint会自动读取eslintrc.json的配置，终端输出的规则提示会符合你设置的warn/off级别，说明配置已生效。

3. 调整IDE的ESLint设置（以VS Code为例） #

如果编辑器里的波浪线还是不对，需要确保IDE没有强制使用扁平配置：

• 打开VS Code设置（快捷键Ctrl+,）
• 搜索ESLint: Use Flat Config，取消勾选该选项
• 重启VS Code，此时编辑器里的波浪线会按配置显示：error为红色，warn为黄色，off的规则不再报错

4. 可选：迁移到扁平配置格式（长期推荐） #

如果想使用ESLint的扁平配置规范，可以把eslintrc.json的内容迁移到eslint.config.mjs，示例如下：

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import angularEslint from "@angular-eslint/eslint-plugin";
import angularEslintTemplate from "@angular-eslint/eslint-plugin-template";
import angularEslintTemplateParser from "@angular-eslint/template-parser";

export default [
  { files: ["**/*.ts"] },
  { files: ["**/*.html"] },
  { languageOptions: { globals: globals.browser } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  ...angularEslint.configs.recommended,
  {
    files: ["**/*.ts"],
    languageOptions: {
      parser: tseslint.parser,
      parserOptions: {
        project: ["tsconfig.json", "e2e/tsconfig.json"],
        createDefaultProgram: true,
      },
    },
    plugins: {
      "@angular-eslint": angularEslint,
    },
    rules: {
      // 复制你eslintrc.json里的TypeScript规则
      "@angular-eslint/component-selector": [
        "error",
        {
          "type": "element",
          "prefix": "app",
          "style": "kebab-case"
        }
      ],
      "@typescript-eslint/dot-notation": "off",
      "@typescript-eslint/member-delimiter-style": "off",
      // ...其他所有自定义规则
    },
  },
  {
    files: ["**/*.html"],
    languageOptions: {
      parser: angularEslintTemplateParser,
    },
    plugins: {
      "@angular-eslint/template": angularEslintTemplate,
    },
    extends: [angularEslintTemplate.configs.recommended],
    rules: {
      // 复制你eslintrc.json里的HTML模板规则
      "@angular-eslint/template/accessibility-alt-text": "warn",
      // ...其他模板规则
    },
  },
];

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