Let’s talk about how to migrate tslint to eslint in Angular

 ng add @angular-eslint/schematics

Running results:

• The .eslintrc.json file is automatically generated at root, and the @angular-eslint eslint plug-in is used by default.

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

• The following eslint-related cli configuration is added to angular.json. If you generate lib or application through the ng command line in the future, .eslintrc.json will be automatically generated under this module.

 "cli": {
	    "defaultCollection": "@angular-eslint/schematics"
  }

2. Remove or replace tslint related files or configurations

• Delete tslint.json under the root directory or module
• Delete tslint-related dev dependency packages, such as tslint or typescript-tslint-plugin etc.
• (If any) Delete the tslint-plugin related configuration in tsconfig.json, such as

• Change the tslint configuration (if any) under angular.json to eslint, which may need to be modified manually.

Original tslint configuration:

Modified eslint configuration (eg configured to execute lint in the projects/lint-test directory):

3. If you need to temporarily turn off the eslint check of some codes or files

• Add the following comment above the code to temporarily turn off eslint checking for that code

 /* eslint-disable */
const some_un_used_var;

• You can add the rule when the eslint check reports an error in the comment to indicate the reason for temporarily turning off the check. For example, in the following code, you don’t want an unused variable to be checked out by eslint and an error thrown.

 /* eslint-disable @typescript-eslint/no-unused-vars */
const some_un_used_var;

• If you need to turn off the eslint check of some files, you can add the .eslintignore file under root.
• Patterns that require lint checking can be configured in .eslintrc (this article will not go into details, official introduction)

4. Check whether it can be used

Run lint command

 ng lint

If it runs successfully, congratulations on completing the migration!

(Optional) Other supporting eslint plug-ins

• eslint-plugin-deprecation: Verify code is deprecated
• eslint-plugin-header: Verify whether file header comments follow certain rules (can be used for version, patent verification, etc.)
• eslint-plugin-import: Verify the import address spelling or name errors, grammar, etc.
• eslint-plugin-prefer-arrow: Validate using arrow functions
• eslint-plugin-unicorn: Verify js, ts syntax related
• eslint-plugin-jsdoc: Documentation related
• ...

Can be configured in .eslintrc.json (official documentation)

(Optional) Configure VS code

Install eslint plugin

VS code automatically corrects eslint related issues when saving

Set in .vscode/settings.json

 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }

Or search for onsave settings under File->Preferences->Settings to find eslint related settings.