Angular 18多应用工作区ESLint扁平配置与Prettier兼容问题

问题场景 #

将包含多应用的Angular工作区从17升级到18后，代码与M2样式运行正常，但切换到ESLint扁平配置时，集成Prettier遇到类型错误：子应用的eslint.config.js导入根配置时，抛出Argument of type 'Config | FlatConfig' is not assignable to parameter of type 'ConfigWithExtends'，移除根配置中的eslintPluginPrettierRecommended则错误消失。

原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.config.js：

// @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
];

子应用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: {},
  }
);

项目结构 #

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

最优解决方案 #

核心思路 #

将eslint-plugin-prettier的推荐配置整合到tseslint.config生成的配置数组中，确保所有配置项类型与子应用的tseslint.config要求的ConfigWithExtends兼容，避免类型不匹配报错。

修改后的根eslint.config.js #

// @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(
  // TS文件配置
  {
    files: ["**/*.ts"],
    extends: [
      eslint.configs.recommended,
      ...tseslint.configs.recommended,
      ...tseslint.configs.stylistic,
      ...angular.configs.tsRecommended,
    ],
    processor: angular.processInlineTemplates,
    rules: {},
  },
  // HTML文件配置
  {
    files: ["**/*.html"],
    extends: [
      ...angular.configs.templateRecommended,
      // ...angular.configs.templateAccessibility,
    ],
    rules: {},
  },
  // 全局忽略规则
  {
    ignores: ["projects/**/*"],
  },
  // 整合Prettier推荐配置
  ...eslintPluginPrettierRecommended
);

module.exports = rootConfig;

验证效果 #

1. 运行npm run lint:app，可正常检测prettier/prettier规则相关问题；
2. 子应用的eslint.config.js不再抛出类型错误。

额外说明 #

• 确保已安装依赖：eslint-plugin-prettier、prettier，可选安装@types/prettier以获得类型提示；
• 若需自定义Prettier规则，可在根配置的对应文件块中添加rules覆盖，例如：

  {
    files: ["**/*.ts"],
    rules: {
      "prettier/prettier": ["error", { "singleQuote": true }]
    }
  }
  

内容的提问来源于stack exchange，提问作者Kees de Bruin