将 Angular v18 应用程序的 ESLint 更新为平面配置会导致更漂亮的问题

Question

我正在更新 Angular 工作区，其中包含从 17 到 18 的多个应用程序，并且代码和样式（在 m2 模式下）工作。然而，ESLint 配置现在使用平面配置，并且在添加 ESLint 原理图时，Angular 17 和 18 之间的多个包也发生了更改。

为了防止将来出现问题，我还想升级 ESLint 包和配置，但在使用 prettier 和 VSCode 时遇到一些问题（将为此发布另一个问题）。

为了更漂亮，我按照文档获取以下 ESLint JSON 配置：

{
  "root": true,
  "ignorePatterns": ["projects/**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "parserOptions": {
        "createDefaultProgram": true
      },
      "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates",
        "plugin:prettier/recommended"
      ],
      "rules": {}
    },
    {
      "files": ["*.html"],
      "extends": [
        "plugin:@angular-eslint/template/recommended",
        // "plugin:@angular-eslint/template/accessibility",
        "plugin:prettier/recommended"
      ],
      "rules": {}
    }
  ]
}

这是使用

eslint-plugin-prettier

包。再次，在使用 ESLint 平面配置时查看文档，配置必须更改为：

// @ts-check
const eslint = require("@eslint/js");
const tseslint = require("typescript-eslint");
const angular = require("angular-eslint");

const eslintPluginPrettierRecommended = require('eslint-plugin-prettier/recommended');

const rootConfig = tseslint.config(
  {
    files: ["**/*.ts"],
    extends: [
      eslint.configs.recommended,
      ...tseslint.configs.recommended,
      ...tseslint.configs.stylistic,
      ...angular.configs.tsRecommended,
    ],
    processor: angular.processInlineTemplates,
    rules: {},
  },
  {
    files: ["**/*.html"],
    extends: [
      ...angular.configs.templateRecommended,
      // ...angular.configs.templateAccessibility,
    ],
    rules: {},
  },
);

module.exports = [
  ...rootConfig,
  eslintPluginPrettierRecommended
];

现在运行

npm run lint:app

，这会发现很多问题，包括来自

prettier/prettier

的规则。然而，当我查看

projects/first-app/eslint.config.js

文件

时

// @ts-check
const tseslint = require("typescript-eslint");
const rootConfig = require("../../eslint.config.js");

module.exports = tseslint.config(
  ...rootConfig,
  {
    files: ["**/*.ts"],
    rules: {},
  },
  {
    files: ["**/*.html"],
    rules: {},
  }
);

我收到错误

Argument of type 'Config | FlatConfig' is not assignable to parameter of type 'ConfigWithExtends'

。当我从根配置中删除

eslintPluginPrettierRecommended

时，错误消失了。

那么，在这种情况下添加更漂亮的支持的最佳方法是什么？

对于背景信息，该项目使用以下布局：

root
  .vscode
  project-folder
    angular.json
    eslint.config.js
    projects
      first-app
        eslint.config.js
      second-app
        eslint.config.js
      first-lib
        eslint.config.js

Answer 1

你必须这样配置：

module.exports = tseslint.config(
  {
    files: ["**/*.ts"],
    extends: [
      eslint.configs.recommended,
      ...tseslint.configs.recommended,
      ...tseslint.configs.stylistic,
      ...angular.configs.tsRecommended,
      eslintPluginPrettierRecommended
    ],
    processor: angular.processInlineTemplates,
    rules: {
      "@angular-eslint/directive-selector": [
        "error",
        {
          type: "attribute",
          prefix: "your-own",
          style: "camelCase",
        },
      ],
      "@angular-eslint/component-selector": [
        "error",
        {
          type: "element",
          prefix: "your-own",
          style: "kebab-case",
        },
      ],
    },
  },
  {
    files: ["**/*.html"],
    extends: [
      ...angular.configs.templateRecommended,
      ...angular.configs.templateAccessibility,
      eslintPluginPrettierRecommended
    ],
    rules: {
      "prettier/prettier": [
        "error",
        {
          "parser": "angular"
        },
      ]
    },
  }
);