I'm trying to switch an Angular project from TSLint to ESLint, following the instructions in angular-eslint Github repo.
I ran ng add @angular-eslint/schematics
which added the following dependencies to my package.json:
"@angular-eslint/builder": "1.2.0",
"@angular-eslint/eslint-plugin": "1.2.0",
"@angular-eslint/eslint-plugin-template": "1.2.0",
"@angular-eslint/schematics": "1.2.0",
"@angular-eslint/template-parser": "1.2.0",
"@typescript-eslint/eslint-plugin": "4.3.0",
"@typescript-eslint/parser": "4.3.0",
"eslint": "7.6.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
Also, ran npm install
to ensure these are all installed.
Now I'm instructed to run:
ng g @angular-eslint/schematics:convert-tslint-to-eslint --remove-tslint-if-no-more-tslint-targets --ignore-existing-tslint-config
However, this results in errors:
Unknown option: '--remove-tslint-if-no-more-tslint-targets'
Unknown option: '--ignore-existing-tslint-config'
When I remove these options, I get another error:
Invalid rule result: Instance of class Promise.
It seems like this angular-eslint schematic was not installed properly. However, I'm a complete novice regarding these schematics. I must be missing something obvious here.
Using @angular/cli 10.2.3.
Now, to make the actual migration simpler, run the tslint-to-eslint-config utility. This tool will take your TSLint configuration and create the "closest" ESLint configuration from it. This command downloads and executes the utility to perform the migration. For further options, check the utility's usage guide.
Before Angular 11, linting was supported via a library called TSLint. However, the TSLint team deprecated the project in 2019 and Angular followed suit in November 2020. Fortunately, thanks to tools from the Angular ecosystem migrating to ESLint is easier than you think.
As you probably know, TSLint has been deprecated since 2019. But, until now, the Angular CLI was still generating projects with built-in support for TSLint, so most Angular developers out there have TSLint in their projects.
It depends on the Angular version of your project because it install a different version of @angular-eslint/schematics
for different angular versions
Steps will be:
A. Add @angular-eslint to your project:
ng add @angular-eslint/schematics
If you have an Angular 12 project (without tslint), you’re done!
B. For migration from tslint Angular 11 or 12, run the following:
ng g @angular-eslint/schematics:convert-tslint-to-eslint --remove-tslint-if-no-more-tslint-targets
(Use: --ignore-existing-tslint-config
flag only if you want to ignore old tslint configuration)
If you are on Angular 9 or 10, an older version of the schematic gets installed and the convert command differs slightly. You may want to prioritize upgrading Angular before converting to ESLint. But if you really want to upgrade linting first, use this command:
ng g @angular-eslint/schematics:convert-tslint-to-eslint <project-name-here>
Detailed blog for tslint to eslint migration
In case you don't know which is the name of your project when the CLI asks you
Which project would you like to convert from TSLint to ESLint?
it can be found in the angular.json
under the projects
attribute (normally on line 8)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With