Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to run @angular-eslint/schematics:convert-tslint-to-eslint

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.

like image 827
Rene Saarsoo Avatar asked Apr 19 '21 15:04

Rene Saarsoo


People also ask

How do you convert TSLint to ESLint?

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.

Does Angular use TSLint or ESLint?

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.

Is TSLint deprecated Angular?

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.


2 Answers

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

like image 59
Bhavin Avatar answered Oct 17 '22 03:10

Bhavin


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)

like image 22
Jöcker Avatar answered Oct 17 '22 02:10

Jöcker