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

This article will take you to continue learning angular, compare tslint and eslint, and introduce how to migrate tslint to eslint in Angular. I hope it will be helpful to everyone!

Hello everyone, Angular has been upgraded from 12 to 13 recently. The official has automatically removed the tslint configuration in angular.json, so we'd better follow the official arrangement. Used eslint. [Related tutorial recommendations: "angular tutorial"]

tslint vs eslint

##tslintPlug-in used to check ts syntax specificationsNo longer maintained; Angular has been deprecated since 11eslintCheck js/ts code specificationsStill maintained, official recommendation

How to migrate

1. Install eslint dependencies and run the following command:

ng add @angular-eslint/schematics

Run results:

# The ##.eslintrc.json file is automatically generated at root, and the
• @angular-eslinteslint 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 configuration

Delete tslint in the root directory or module. json
Delete tslint-related dev dependency packages, such as
• tslint or typescript-tslint-plugin, etc.
(if any) in tsconfig.json Delete the tslint-plugin related configuration, 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 (e.g. 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

above the code Add the following comment to temporarily turn off the eslint check of this 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 by eslint and throw an error

/* 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 the 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 the lint command

ng lint

If the operation is successful, congratulations on completing the migration!

(Optional) Other supporting eslint plug-ins

• eslint-plugin-deprecation: Verify whether the code is outdated
• eslint-plugin-header: Verify whether the file header comments follow certain rules (can be used for version, patent verification, etc.)
• eslint-plugin-import: Verify the spelling of the import address Or name error, syntax, etc.
• eslint-plugin-prefer-arrow: Verify using arrow function
• eslint-plugin-unicorn: Verify js , ts syntax related
• eslint-plugin-jsdoc: Document related
...

can be configured in .eslintrc.json (

Official Document)

(Optional) Configure VS code

Install the eslint plug-in

##VS code automatically corrects eslint related issues when savingSet in .vscode/settings.json

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

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

##For more programming-related knowledge, please visit: Introduction to programming

! !

lint type	Use	Current situation

The above is the detailed content of Let's talk about how to migrate tslint to eslint in Angular. For more information, please follow other related articles on the PHP Chinese website!