ESLint 9扁平配置迁移：@angular-eslint/template-parser集成失败

一、先确认版本兼容性 #

ESLint 9 要求搭配 @angular-eslint v17.0.0+ 版本，先检查并升级依赖：

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

二、重构扁平配置文件 #

移除冗余的FlatCompat兼容层处理，直接适配ESLint 9原生扁平配置规范，确保模板解析器与规则正确关联：

import path from "node:path";
import { fileURLToPath } from "node:url";
import { includeIgnoreFile } from "@eslint/compat";
import angularEslintPlugin from "@angular-eslint/eslint-plugin";
import angularEslintTemplatePlugin from "@angular-eslint/eslint-plugin-template";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const gitignorePath = path.resolve(__dirname, ".gitignore");

export default [
  // 忽略文件规则
  {
    ignores: ["electron/*", "cypress/*", "node_modules/*", "dist/*", "projects/**/*"],
  },
  includeIgnoreFile(gitignorePath),

  // TypeScript文件配置
  {
    files: ["**/*.ts"],
    languageOptions: {
      ecmaVersion: "latest",
      sourceType: "module",
      parser: "@typescript-eslint/parser",
      parserOptions: {
        project: ["tsconfig.json"],
        createDefaultProgram: true,
      },
    },
    plugins: {
      "@angular-eslint": angularEslintPlugin,
    },
    extends: [
      "plugin:@angular-eslint/recommended",
      "plugin:@angular-eslint/template/process-inline-templates",
    ],
    rules: {
      "@angular-eslint/directive-selector": [
        "error",
        {
          type: "attribute",
          prefix: "rr",
          style: "camelCase",
        },
      ],
      "@angular-eslint/component-selector": [
        "error",
        {
          type: "element",
          prefix: "rr",
          style: "kebab-case",
        },
      ],
      "@angular-eslint/no-output-native": "off",
      "@angular-eslint/no-input-rename": "off",
    },
  },

  // HTML模板文件配置
  {
    files: ["**/*.html"],
    languageOptions: {
      // 用字符串指定解析器，避免加载顺序问题
      parser: "@angular-eslint/template-parser",
    },
    plugins: {
      "@angular-eslint/template": angularEslintTemplatePlugin,
    },
    extends: ["plugin:@angular-eslint/template/recommended"],
    rules: {},
  },
];

三、关键修复点说明 #

• 无需直接导入@angular-eslint/template-parser，改用字符串标识符，ESLint会自动正确加载解析器，避免兼容层导致的绑定失效。
• 明确为HTML配置块引入@angular-eslint/template插件，确保模板规则与解析器关联。
• 移除FlatCompat对模板规则的处理，直接使用ESLint扁平配置原生语法，避免兼容层带来的规则冲突。

四、验证配置 #

运行ESLint检查验证配置是否生效：

npx eslint . --ext .ts,.html

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