Setting Up esLint for an Angular 19 Project

The angular-eslint package makes setting up linting in an Angular project pretty easy, but due to some recent changes there are a few new steps I had to work out to get it working so I figured I'd put them here for next time.

1. Install the angular-eslint package: ng add angular-eslint
2. Rename the generated eslint.config.js to eslint.config.mjs
3. Change the 3 require statements at the top of the config file to import statements
1. const eslint = require("@eslint/js"); => import esLint from '@eslint/js';
2. const tseslint = require("typescript-eslint"); => import tsEsLint from 'typescript-eslint';
3. const angular = require("angular-eslint"); => import angular from 'angular-eslint';
4. Change the module.exports to export default
1. module.exports = tseslint.config( => export default tsEsLint.config(
5. In package.json, add a "type" setting with a value of "module"

At this point, esLint should be all setup. It actually works before any of this, but I wanted to use a plugin (more on that in a moment) and that required me to make these changes.

So, about that plugin. esLint made the decision in 8.53 to stop including stylistic rules as part of the linting process. I understand the decision, but I don't like it. Fortunately, there's a plugin for stylistic linting that you can add and it's pretty easy now that the above changes have been implemented.

1. Install @stylistic/eslint-plugin-ts package: npm install @stylistic/eslint-plugin-ts
2. Import the plugin in eslint.config.mjs
1. import stylisticPlugin from '@stylistic/eslint-plugin-ts'
3. In eslint.config.mjs, add a node as a sibling to the "files" node for plugins:
   plugins: {
         stylistic: stylisticPlugin
       },
4.  Add the individual style rules to the rules node of eslint.config.mjs
1. For example, to enfore the 1 true brace style rule, add "stylistic/brace-style": ["error", "1tbs"],
   

That's it! esLint should be all good to go. If you install a live linter extension in your working environment (like the esLint plugin for VS Code) you should see all your lint rules - including stylistic ones - applied.