Settings linter in Angular 12

The new version of Angular 12 not include linters because TSLint is deprecated.

For that I'm going to put here how to add eslint in Angular 12.

Prerequisites:

• Node js -> 12.13.x/14.15.x or later minor
• npm
• angular/cli -> v12

First step:

 // create project
 ng new my-new-project

Second step:

// install eslint as dev dependency 
npm install --save-dev eslint
// install ts rules plugin
npm i --save-dev @typescript-eslint/eslint-plugin 
// install eslint parser
npm i --save-dev @typescript-eslint/parser

The next step is, add the rules of our linter:

• create new file ".eslintrc", on the root folder, with this values:

{
    "parser": "@typescript-eslint/parser",
    "extends": [
      "plugin:@typescript-eslint/recommended",
    ],
    "parserOptions": {
      "ecmaVersion": 2021,
      "sourceType": "module"
    },
    "rules": {
               // custom rules here
    }
}

Last step:
Add this script in package.json

"lint": "eslint \"**/*.{ts,tsx}\" "

For run:

npm run lint

Comments

[Richard Lea]

There seems official lint support: angular.io/cli/lint now. It might be grateful if the official one could be introduced along with some further comparison with manual configuration under the hood.

[talamaska]

FYI there is package @angular-eslint/angular-eslint that does all the magic.