Update ESLint to flat config for Angular v18 app causes problems with prettier

Question

I'm in the process of updating an Angular workspace with multiple applications from 17 to 18 and code and styling (in m2 mode) work. However, the ESLint configuration now uses the flat config and also several packages are changed between Angular 17 and 18 when adding the ESLint schematic.

To prevent future problems I also want to upgrade the ESLint packages and configuration but I encounter some problems when using prettier and VSCode (will post another question for this).

For prettier I followed the docs to get the following ESLint JSON configuration:

{
  "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": {}
    }
  ]
}

This is using the eslint-plugin-prettier package. Again, looking at the documentation when using the ESLint flat configuration the configuration must be changed to:

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

Now running npm run lint:app this will find many issues, including rules from prettier/prettier. However, when I look at the projects/first-app/eslint.config.js file

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

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

I get an error Argument of type 'Config | FlatConfig' is not assignable to parameter of type 'ConfigWithExtends'. When I remove the eslintPluginPrettierRecommended from the root configuration the error disappears.

So, what is the best way to add prettier support in this situation?

For background info, the project uses the following layout:

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

you have to config like this:

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"
        },
      ]
    },
  }
);