DEV Community

Facundo Ezequiel Diaz Cappella
Facundo Ezequiel Diaz Cappella

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
    }
}
Enter fullscreen mode Exit fullscreen mode

Last step:
Add this script in package.json

"lint": "eslint \"**/*.{ts,tsx}\" "
Enter fullscreen mode Exit fullscreen mode

For run:

npm run lint
Enter fullscreen mode Exit fullscreen mode

Discussion (2)

Collapse
chigix profile image
Richard Lea • 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.

Collapse
thegoldyman profile image
talamaska

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