@coara/eslint-config-ng

Supports Angular 20, 21 and 22, on eslint 9 or 10.

Upgrading to 3.0

Nothing to do in most projects: install it and delete any overrides block you were using to force the old peer ranges.

The only breaking part is a swapped plugin. eslint-plugin-import has no eslint 10 release — 2.32.0 is current and its peer range stops at eslint 9 — so this config now uses eslint-plugin-import-x, the maintained fork, which supports eslint 8, 9 and 10.

It is registered under the import namespace, so rule names do not change: import/newline-after-import and import/no-deprecated behave exactly as before, and any rulesOverride you already pass keeps working untouched. What does change is the package you install alongside this one:

-npm i -D eslint-plugin-import
+npm i -D eslint-plugin-import-x

Peer ranges after this release:

| peer | range | | --- | --- | | eslint | ^9.29.0 \|\| ^10.0.0 | | angular-eslint | ^20.1.1 \|\| ^21.0.0 \|\| ^22.0.0 | | @ngrx/eslint-plugin | ^20.1.0 \|\| ^21.0.0 | | @stylistic/eslint-plugin | ^4.4.1 \|\| ^5.0.0 | | eslint-plugin-import-x | ^4.6.0 | | typescript-eslint | ^8.34.1 |

Verified against both an Angular 21 / eslint 9 project and an Angular 22 / TypeScript 6 / eslint 10 one.

Installation

$ npm i -D @coara/eslint-config-ng

Usage

1. Run Angular ESLint:

   ng add angular-eslint

2. Install @coara/eslint-config-ng:

   npm i -D @coara/eslint-config-ng

3. Replace the file content and configure the parser's relative path:

   // eslint.config.js
   
   import createEslintConfig from "@coara/eslint-config-ng";
   import { dirname } from "path";
   import { fileURLToPath } from "url";
   
   const __filename = fileURLToPath(import.meta.url);
   const __dirname = dirname(__filename);
   export default createEslintConfig({
     project: "./tsconfig.json",
     tsconfigRootDir: __dirname,
   });

4. Add module compatibility:

   // package.json
   {
     "type": "module"
   }

5. Recommended: Install Prettier:

   npm install prettier --save-dev

6. Recommended: Configure Prettier with the print width option:

   // prettier.config.js
   export default {
     printWidth: 120,
   };

7. Optional: For VSCode auto formatting, linter fixes, and differentiating linter from TypeScript errors:

   // .vscode/settings.json
   {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "eslint.rules.customizations": [{ "rule": "*", "severity": "warn" }],
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
     },
     "eslint.useFlatConfig": true,
     "editor.formatOnSave": true
   }