DEV Community

loading...

Settings linter in Angular 12

Facundo Ezequiel Diaz Cappella
Hi! I am full-stack developer with angular and java.
Updated on ・1 min read

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 (0)