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

This article will take you to continue learningangular, 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

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": {} } ] }

Copy after login

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" }

Copy after login

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
• tslintortypescript-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

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;

Copy after login

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;

Copy after login

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

• 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
...

Official Document)

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

ng lint

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!