Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to migrate tslint to eslint in Angular. It is very detailed and has a certain reference value. Friends who are interested must read it!

The plug-in used by tslint to check the ts syntax specification is no longer maintained; Angular has been deprecated since 11 and the eslint check js/ts code specification is still under maintenance. It is officially recommended how to migrate.

1. To install eslint dependencies, run the following command:

Ng add @ angular-eslint/schematics

Running result:

The .eslintrc.json file is automatically generated in root, using the @ angular-eslinteslint plug-in 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 configurations are added to angular.json. In the future, if lib or application is generated from the ng command line, .eslintrc.json will be automatically generated under this module.

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

two。 Remove or replace tslint related files or configuration

Delete tslint.json under the root directory or module

Delete tslint-related dev dependent packages, such as tslint or typescript-tslint-plugin

(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 manually modified

Original tslint configuration:

The modified eslint configuration (e.g. Configure to execute lint under the projects/lint-test directory):

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

Add the following comment at the top of the code to temporarily turn off the code eslint check

/ * eslint-disable * / const some_un_used_var

You can add the rule when the eslint check error is reported in the comment to indicate the reason for temporarily turning off the check. For example, the following code does not want an unused variable to be checked by eslint and thrown incorrectly

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

If you need to turn off eslint checking for some files, you can add .eslintignore files under root.

Pattern that requires lint inspection can be configured in .eslintrc (not discussed in this article, official introduction)

4. Verify that it can be used

Run the lint command

Ng lint

If the operation is successful, congratulations on the completion of the migration!

(optional) other matching eslint plug-ins

Eslint-plugin-deprecation: verify that the code is out of date

Eslint-plugin-header: verify whether the file header comments follow certain rules (can be used for version, patent verification, etc.)

Eslint-plugin-import: verify import address spelling or name errors, grammar, etc.

Eslint-plugin-prefer-arrow: verifying the use of the arrow function

Eslint-plugin-unicorn: verify that js,ts syntax is relevant

Eslint-plugin-jsdoc: document related

...

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

(optional) configure VS code

Install the eslint plug-in

VS code automatically corrects eslint related problems 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

These are all the contents of the article "how to migrate tslint to eslint in Angular". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.