Settings linter in Angular 12

#angular #eslint #linter #tslint

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

Top comments (2)

Richard Lea • Oct 14 '21 • Edited

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.