×

iFour Logo

Migrating and configuring ESLint in angular 11

Kapil Panchal - December 16, 2020

Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

  • play
  • pause
  • pause
Migrating and configuring ESLint in angular 11

In the earlier version, Angular implements the linting with TSLint but with Angular 11 announced that the TSLint linting replaced with the ESLint.

Usage with Nx Monorepos


Nx leans for some, but not for all packages from this project. It does not use the builder to execute ESLint.

Packages included in this Project


The following packages are included in your project.

  • @angular-eslint/builder: This package is used to execute ESLint in your project using standard commands such as ng lint.

  • @angular-eslint/eslint-plugin: This is the ESLint specific package that contains some specific rules that are specific for the Angular projects. It can be combined with other ESLint packages.

  • B@angular-eslint/template-parser: This is the ESLint specific parser package that allows you to written the custom ESLint rules in your Angular template.

  • @angular-eslint/eslint-plugin-template: This package is used in conjunction with @angular-eslint/template-parser which allows template specific rules to run.

  • @angular-eslint/schematics: This package is used to add and update the configuration files that are running on the Angular template.

Migrating an Angular CLI project


Step 1: Add the dependencies

To do the migration, run the schematic package to add the @angular-eslint into your project.

 
ng add @angular-eslint/schematics
				

“After running this command, it will install the packages and add the packages in the package.json file.

{
  "name": "eslint-demo",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.0.1",
    "@angular/common": "~11.0.1",
    "@angular/compiler": "~11.0.1",
    "@angular/core": "~11.0.1",
    "@angular/forms": "~11.0.1",
    "@angular/platform-browser": "~11.0.1",
    "@angular/platform-browser-dynamic": "~11.0.1",
    "@angular/router": "~11.0.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.2",
    "@angular/cli": "~11.0.2",
    "@angular/compiler-cli": "~11.0.1",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "@angular-eslint/builder": "0.8.0-beta.3",
    "@angular-eslint/eslint-plugin": "0.8.0-beta.3",
    "@angular-eslint/eslint-plugin-template": "0.8.0-beta.3",
    "@angular-eslint/schematics": "^0.8.0-beta.3",
    "@angular-eslint/template-parser": "0.8.0-beta.3",
    "@typescript-eslint/eslint-plugin": "4.3.0",
    "@typescript-eslint/parser": "4.3.0"
  }
}
				

Step 2: Run the eslint schematic on a project

After that, you can choose the project that you want to migrate. The following command can run the eslint schematic.

 
ng g @angular-eslint/schematic:convert-tslint-to-eslint {{ Your project name }}
				

After running this command, eslintrc.json will be created. Let’s take a look at the configuration that was generated from the above command.

 
{
  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "parserOptions": {
        "project": [
          "tsconfig.json",
          "e2e/tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/ng-cli-compat",
        "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ],
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ]
      }
    },
    {
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended"
      ],
      "rules": {}
    }
  ]
}
				

Notice that the configuration is inside in the overrides field because the Angular project has the HTML files and typescript files. We can avoid the conflicts using the ESLint overrides field that allows us to separate rules for different file types.

In the above configuration, we can see the configuration of the @angular-eslint plugin:@angular-eslint/ng-cli-compat and @angular-eslint/ng-cli-compat--formatting-add-on. These two configurations are used for the automatic matching of TSLint rules and ESLint rules.

env: What to include in a linting and what version to be used in your project.

extends: What packages will be extended.

parser: What parser to be used.

parserOptions: The Project setting for typescript.

Changing the configuration


To change the configuration, first we will remove both plugins plugin:@angular-eslint/ng-cli-compat and plugin:@angular-eslint/ng-cli-compat--formatting-add-on from the extends field. After that we can add the plugin of the plugin:@angular-eslint/recommended in the extends field.

Let’s see the updated configuration file.

 
{
  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "parserOptions": {
        "project": [
          "tsconfig.json",
          "e2e/tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ],
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ]
      }
    },
    {
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended"
      ],
      "rules": {}
    }
  ]
}
				

The plugin:@angular-eslint/recommended plugin is used to disable some conflicting rules of the eslint:recommended for usage with the typescript and add the typescript rules. There are another configuration adding in the extends field and the configuration looks like:

"extends": [
        "plugin:@angular-eslint/recommended",
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@typescript-eslint/recommended-requiring-type-checking",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
				

In the above configuration, the order of the included plugins matters. If we have included plugin typescript-recommended before the eslint:recommended then the conflicting rules will be enabled.

Adding Prettier


Prettier is used for detecting and automatically fixing the styling issues.

 

Installing the Prettier

We will be installing the configuration dependencies of the prettier ESLint plugin of the following command:

 
npm i -D prettier eslint-plugin-prettier eslint-config-prettier
				

We will install the three configuration dependencies: prettier, eslint-plugin-prettier and eslint-config-prettier. These plugins are needed for fixing the styling but also disabling some styling rules of the ESLint so that there are no conflicts between ESLint and Prettier.

Looking to hire dedicated Angular Developer?
Your Search ends here.

 

Integrating Prettier

To integrate the prettier plugin, we need to add the plugin to extends field in the .eslintrc.json file.

{
  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "parserOptions": {
        "project": [
          "tsconfig.json",
          "e2e/tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/ng-cli-compat",
        "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
        "plugin:@angular-eslint/template/process-inline-templates",
        "plugin:prettier/recommended"
      ],
      "rules": {
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ],
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ]
      }
    },
    {
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended"
      ],
      "rules": {}
    }
  ]
				

If you want to enable the styling and formatting in the HTML files, then you need to add the code in the HTML entry of the overrides field.

 
"extends": [
        "plugin:@angular-eslint/template/recommended",
        "prettier/@typescript-eslint",
        "plugin:prettier/recommended"
      ],
				

In the above code, the prettier code is written at the end of the extends array because the prettier config disables the ESLint rules.

Conclusion


In this blog, we have discussed about ESLint and what packages are included in the project. We saw how to migrate the TSLint project to the ESLint and also learn the installing and integrating of prettier plugin.

Migrating and configuring ESLint in angular 11 In the earlier version, Angular implements the linting with TSLint but with Angular 11 announced that the TSLint linting replaced with the ESLint. Usage with Nx Monorepos Nx leans for some, but not for all packages from this project. It does not use the builder to execute ESLint. Packages included in this Project The following packages are included in your project. @angular-eslint/builder: This package is used to execute ESLint in your project using standard commands such as ng lint. @angular-eslint/eslint-plugin: This is the ESLint specific package that contains some specific rules that are specific for the Angular projects. It can be combined with other ESLint packages. B@angular-eslint/template-parser: This is the ESLint specific parser package that allows you to written the custom ESLint rules in your Angular template. @angular-eslint/eslint-plugin-template: This package is used in conjunction with @angular-eslint/template-parser which allows template specific rules to run. @angular-eslint/schematics: This package is used to add and update the configuration files that are running on the Angular template. Migrating an Angular CLI project Step 1: Add the dependencies To do the migration, run the schematic package to add the @angular-eslint into your project.   ng add @angular-eslint/schematics “After running this command, it will install the packages and add the packages in the package.json file. { "name": "eslint-demo", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "~11.0.1", "@angular/common": "~11.0.1", "@angular/compiler": "~11.0.1", "@angular/core": "~11.0.1", "@angular/forms": "~11.0.1", "@angular/platform-browser": "~11.0.1", "@angular/platform-browser-dynamic": "~11.0.1", "@angular/router": "~11.0.1", "rxjs": "~6.6.0", "tslib": "^2.0.0", "zone.js": "~0.10.2" }, "devDependencies": { "@angular-devkit/build-angular": "~0.1100.2", "@angular/cli": "~11.0.2", "@angular/compiler-cli": "~11.0.1", "@types/jasmine": "~3.6.0", "@types/node": "^12.11.1", "codelyzer": "^6.0.0", "jasmine-core": "~3.6.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~5.1.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.0.3", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "protractor": "~7.0.0", "ts-node": "~8.3.0", "tslint": "~6.1.0", "typescript": "~4.0.2", "eslint": "^7.6.0", "eslint-plugin-import": "2.22.1", "eslint-plugin-jsdoc": "30.7.6", "eslint-plugin-prefer-arrow": "1.2.2", "@angular-eslint/builder": "0.8.0-beta.3", "@angular-eslint/eslint-plugin": "0.8.0-beta.3", "@angular-eslint/eslint-plugin-template": "0.8.0-beta.3", "@angular-eslint/schematics": "^0.8.0-beta.3", "@angular-eslint/template-parser": "0.8.0-beta.3", "@typescript-eslint/eslint-plugin": "4.3.0", "@typescript-eslint/parser": "4.3.0" } } Read More: What’s New In Angular 11? Step 2: Run the eslint schematic on a project After that, you can choose the project that you want to migrate. The following command can run the eslint schematic.   ng g @angular-eslint/schematic:convert-tslint-to-eslint {{ Your project name }} After running this command, eslintrc.json will be created. Let’s take a look at the configuration that was generated from the above command.   { "root": true, "ignorePatterns": [ "projects/**/*" ], "overrides": [ { "files": [ "*.ts" ], "parserOptions": { "project": [ "tsconfig.json", "e2e/tsconfig.json" ], "createDefaultProgram": true }, "extends": [ "plugin:@angular-eslint/ng-cli-compat", "plugin:@angular-eslint/ng-cli-compat--formatting-add-on", "plugin:@angular-eslint/template/process-inline-templates" ], "rules": { "@angular-eslint/component-selector": [ "error", { "type": "element", "prefix": "app", "style": "kebab-case" } ], "@angular-eslint/directive-selector": [ "error", { "type": "attribute", "prefix": "app", "style": "camelCase" } ] } }, { "files": [ "*.html" ], "extends": [ "plugin:@angular-eslint/template/recommended" ], "rules": {} } ] } Notice that the configuration is inside in the overrides field because the Angular project has the HTML files and typescript files. We can avoid the conflicts using the ESLint overrides field that allows us to separate rules for different file types. In the above configuration, we can see the configuration of the @angular-eslint plugin:@angular-eslint/ng-cli-compat and @angular-eslint/ng-cli-compat--formatting-add-on. These two configurations are used for the automatic matching of TSLint rules and ESLint rules. env: What to include in a linting and what version to be used in your project. extends: What packages will be extended. parser: What parser to be used. parserOptions: The Project setting for typescript. Changing the configuration To change the configuration, first we will remove both plugins plugin:@angular-eslint/ng-cli-compat and plugin:@angular-eslint/ng-cli-compat--formatting-add-on from the extends field. After that we can add the plugin of the plugin:@angular-eslint/recommended in the extends field. Let’s see the updated configuration file.   { "root": true, "ignorePatterns": [ "projects/**/*" ], "overrides": [ { "files": [ "*.ts" ], "parserOptions": { "project": [ "tsconfig.json", "e2e/tsconfig.json" ], "createDefaultProgram": true }, "extends": [ "plugin:@angular-eslint/recommended", "plugin:@angular-eslint/template/process-inline-templates" ], "rules": { "@angular-eslint/component-selector": [ "error", { "type": "element", "prefix": "app", "style": "kebab-case" } ], "@angular-eslint/directive-selector": [ "error", { "type": "attribute", "prefix": "app", "style": "camelCase" } ] } }, { "files": [ "*.html" ], "extends": [ "plugin:@angular-eslint/template/recommended" ], "rules": {} } ] } The plugin:@angular-eslint/recommended plugin is used to disable some conflicting rules of the eslint:recommended for usage with the typescript and add the typescript rules. There are another configuration adding in the extends field and the configuration looks like: "extends": [ "plugin:@angular-eslint/recommended", "eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:@typescript-eslint/recommended-requiring-type-checking", "plugin:@angular-eslint/template/process-inline-templates" ], In the above configuration, the order of the included plugins matters. If we have included plugin typescript-recommended before the eslint:recommended then the conflicting rules will be enabled. Adding Prettier Prettier is used for detecting and automatically fixing the styling issues.   Installing the Prettier We will be installing the configuration dependencies of the prettier ESLint plugin of the following command:   npm i -D prettier eslint-plugin-prettier eslint-config-prettier We will install the three configuration dependencies: prettier, eslint-plugin-prettier and eslint-config-prettier. These plugins are needed for fixing the styling but also disabling some styling rules of the ESLint so that there are no conflicts between ESLint and Prettier. Looking to hire dedicated Angular Developer? Your Search ends here. See here   Integrating Prettier To integrate the prettier plugin, we need to add the plugin to extends field in the .eslintrc.json file. { "root": true, "ignorePatterns": [ "projects/**/*" ], "overrides": [ { "files": [ "*.ts" ], "parserOptions": { "project": [ "tsconfig.json", "e2e/tsconfig.json" ], "createDefaultProgram": true }, "extends": [ "plugin:@angular-eslint/ng-cli-compat", "plugin:@angular-eslint/ng-cli-compat--formatting-add-on", "plugin:@angular-eslint/template/process-inline-templates", "plugin:prettier/recommended" ], "rules": { "@angular-eslint/component-selector": [ "error", { "type": "element", "prefix": "app", "style": "kebab-case" } ], "@angular-eslint/directive-selector": [ "error", { "type": "attribute", "prefix": "app", "style": "camelCase" } ] } }, { "files": [ "*.html" ], "extends": [ "plugin:@angular-eslint/template/recommended" ], "rules": {} } ] If you want to enable the styling and formatting in the HTML files, then you need to add the code in the HTML entry of the overrides field.   "extends": [ "plugin:@angular-eslint/template/recommended", "prettier/@typescript-eslint", "plugin:prettier/recommended" ], In the above code, the prettier code is written at the end of the extends array because the prettier config disables the ESLint rules. Conclusion In this blog, we have discussed about ESLint and what packages are included in the project. We saw how to migrate the TSLint project to the ESLint and also learn the installing and integrating of prettier plugin.
Kapil Panchal

Kapil Panchal

A passionate Technical writer and an SEO freak working as a Content Development Manager at iFour Technolab, USA. With extensive experience in IT, Services, and Product sectors, I relish writing about technology and love sharing exceptional insights on various platforms. I believe in constant learning and am passionate about being better every day.

Build Your Agile Team

Categories

Ensure your sustainable growth with our team

Talk to our experts
Sustainable
Sustainable
 
Blog Our insights
Boost Your Sales Strategy Using AI and Power Platform Services

19 February 2024

Kapil Panchal

Boost Your Sales Strategy Using AI and Power Platform Services

Did you know that businesses with a well-defined sales strategy are 33% more likely to achieve their revenue targets? It's true; a strategic approach to selling can make all the difference. From brand promotion to customer targeting, each aspect plays a crucial role in driving success. And with the integration of AI and Power Platforms, businesses are seeing even greater results – with efficiency and effectiveness at an all-time high.

9 Ways AI Is Changing the Technology Trends in 2024

09 February 2024

Kapil Panchal

9 Ways AI Is Changing the Technology Trends in 2024

Nothing in the world is immune to the effects of technology which will eventually change everything beyond recognition. Some changes happen immediately and those that take time people...

How to Improve Your Website Using AI Technologies in 2024?

25 December 2023

Kapil Panchal

How to Improve Your Website Using AI Technologies in 2024?

It is important to improve and upgrade your website regularly to enhance performance, and user experience, and keep it at the top of search results. Manually improving a website...