使用@angular-eslint/template-parser将ESLint9旧配置迁移到新的平面配置，因为模板解析器不起作用

Question

使用工具 @eslint/migrate-config 迁移到新的 ESlint（版本 9）平面配置不起作用。

无法正确集成@angular-eslint/template-parser。

.eslintrc.json

{
    "root": true,
    "ignorePatterns": ["projects/**/*"],
    "overrides": [
      {
        "files": ["*.ts"],
        "parserOptions": {
          "project": ["tsconfig.json"],
          "createDefaultProgram": true
        },
        "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"
        }
      },
      {
        "files": ["*.html"],
        "parser": "@angular-eslint/template-parser",
        "extends": ["plugin:@angular-eslint/template/recommended"],
        "rules": {}
      }
    ],
    "parserOptions": {
      "ecmaVersion": "latest"
    }
  }
  

扁平化配置

import path from "node:path";
import { fileURLToPath } from "node:url";
import js from "@eslint/js";
import { FlatCompat } from "@eslint/eslintrc";
import { includeIgnoreFile } from "@eslint/compat";
import  templateParser   from "@angular-eslint/template-parser"

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
    baseDirectory: __dirname,
    recommendedConfig: js.configs.recommended,
    allConfig: js.configs.all
});
const gitignorePath = path.resolve(__dirname, ".gitignore");

export default [{
    ignores: ["electron/*", "cypress/*", "node_modules/*", "dist/*"],
}, includeIgnoreFile(gitignorePath), {
    languageOptions: {
        ecmaVersion: "latest",
        sourceType: "script",
    },
}, ...compat.extends(
    "plugin:@angular-eslint/recommended",
    "plugin:@angular-eslint/template/process-inline-templates",
).map(config => ({
    ...config,
    files: ["**/*.ts"],
})), {
    files: ["**/*.ts"],

    languageOptions: {
        ecmaVersion: 5,
        sourceType: "script",

        parserOptions: {
            project: ["tsconfig.json"],
            createDefaultProgram: true,
        },
    },

    rules: {
        "@angular-eslint/no-output-native": "off",
        "@angular-eslint/no-input-rename": "off",
    },
}, ...compat.extends("plugin:@angular-eslint/template/recommended").map(config => ({
    ...config,
    files: ["**/*.html"],
    
})), {
    files: ["**/*.html"],
    languageOptions: {
        parser: templateParser, <---- WONT WORK
        (parser: "@angular-eslint/template-parser) <----- WONT WORK EITHER

    },
    rules: {},
}];

这是我得到的错误，它找不到解析器。文档告诉我在 languageOptions.parser 属性中引用解析器，无论是变量还是直接不起作用。

Error: Error while loading rule '@angular-eslint/template/eqeqeq': You have used a rule which requires '@angular-eslint/template-parser' to be used as the 'parser' in your ESLint config.

我怀疑 Angular eslint 插件还没有为 eslint 9 做好准备。

Answer 1

嗨，我刚刚迁移到 ESLint 9。 我能发现的唯一区别是我使用

@angular-eslint/eslint-plugin-template

而不是

@angular-eslint/template/recommended

。

无论如何，我都会为您提供我的

eslint.config.js

。也许您可以根据您的情况使用并调整它。

import eslintParser from "@typescript-eslint/parser";
import angularTemplateParser from "@angular-eslint/template-parser";
import angularEslintPlugin from "@angular-eslint/eslint-plugin";
import angularTemplateEslintPlugin from "@angular-eslint/eslint-plugin-template";

/** @type {import('eslint').Linter.FlatConfig[]} */
export default [
    {
        ignores: ["dist/**", "node_modules/!**", "bin/!**", "build/!**"],
    },
    {
        files: ["**/*.js", "**/*.ts"],
        languageOptions: {
            sourceType: "module",
            parser: eslintParser,
            globals: {}
        },
        plugins: {
            "angular": angularEslintPlugin,
        },
        rules: {
            "semi": "error",
            "prefer-const": "error",
            "angular/component-class-suffix": "error",
            "angular/contextual-lifecycle": "error",
            // ...
        },
    },
    {
        files: ["**/*.html"],
        languageOptions: {
            sourceType: "module",
            parser: angularTemplateParser,
            globals: {}
        },
        plugins: {
            "angularTemplate": angularTemplateEslintPlugin,
        },
        rules: {
            "angularTemplate/banana-in-box" : "error",
            "angularTemplate/eqeqeq" : "error",
            "angularTemplate/no-negated-async" : "error",
        },
    }
];