DEV Community

Facundo Ezequiel Diaz Cappella
Facundo Ezequiel Diaz Cappella

Posted on • Edited on

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
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

Top comments (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.