Add ESLINT to Angular Project

JS
R
JavaScript

Step-by-step guide to integrate ESLint for code quality and consistency in Angular projects. Includes configuration and setup instructions.

1ng add @angular-eslint/schematics
2ng g @angular-eslint/schematics:convert-tslint-to-eslint
3
4
5```eslintrc.json
6
7{
8  "root": true,
9  "ignorePatterns": [
10    "projects/**/*"
11  ],
12  "overrides": [
13    {
14      "files": [
15        "*.ts"
16      ],
17      "parserOptions": {
18        "project": [
19          "tsconfig.json",
20          "e2e/tsconfig.json"
21        ],
22        "createDefaultProgram": true
23      },
24      "extends": [
25        "plugin:@angular-eslint/recommended",
26        "plugin:@angular-eslint/template/process-inline-templates"
27      ],
28      "rules": {
29        "@angular-eslint/component-selector": [
30          "error",
31          {
32            "prefix": "app",
33            "style": "kebab-case",
34            "type": "element"
35          }
36        ],
37        "@angular-eslint/directive-selector": [
38          "error",
39          {
40            "prefix": "app",
41            "style": "camelCase",
42            "type": "attribute"
43          }
44        ]
45      }
46    },
47    {
48      "files": [
49        "*.html"
50      ],
51      "extends": [
52        "plugin:@angular-eslint/template/recommended"
53      ],
54      "rules": {}
55    }
56  ]
57}
58
59```
60

Created on 6/22/2021