Converting your Angular project from TSLint to ESLint

As you have probably heard, TSLint has been deprecated and its successor is ESLint. The TSLint roadmap details the timeline for deprecation:

• January 1st, 2020: Stop accepting anything except security fixes and fixes for crashes introduced by breaking TypeScript changes.
• December 1st, 2020: Stop accepting any PRs.

Palantir, the maintainer, explains why they've stopped maintaining TSLint in this article.

But do not fear!

The transition to ESLint is pretty painless thanks to the hard work of James Henry and other contributors who have built a schematic to move your Angular project to ESLint. More on that in a moment.

ESLint and Angular

TSLint integrated well with Angular since it was designed from the ground up to work with typescript. Out of the box, ESLint doesn't work with typescript nor can it lint your Angular html templates. Using ESLint with an Angular project is actually a complex use-case requiring extending ESLint with quite a few separate packages.

Our savior is @angular-eslint; an open-source project which makes converting your Angular project to ESLint easy. They've done the hard work of extending ESLint with all the necessary dependencies, configuring Angular to work with it and packaged it up in a schematic.

Should I convert my project now?

This is a good question to ask. ESLint is a powerful linter trusted by countless javascript projects. TSLint has reached the end of the road. The point of switching to ESLint is to future-proof your project. Future versions of Angular and Typescript will no longer be supported by TSLint, because of the freeze on PRs. Linting errors will not fail your build, so there's no real danger in converting now. It's something you will have to do eventually anyway.

What about Angular 12 and later?

New Angular 12 projects don't come out of the box with ng lint wired up, so you still need to run the schematic just as though you were converting an older Angular project. Follow the same steps below.

Running @angular-eslint

Running the schematic is simple. Start with a clean working tree, with no uncommitted changes. If you have time, go over the README for additional info on using this schematic. Turns out, getting ESLint to work with Angular was an intricate process.

Although the schematic states that Angular 10.1 or above is required, it appears to work well with Angular 9. One thing is for sure: it does not support Angular 10.0. You should also know that you may run into problems if you are not using Node 12 or higher.

1. Add @angular-eslint to your project:

2. If you have an Angular 12 project, you’re done! For Angular 11, run the following:

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:

You will notice it adds a new .eslintrc.json file and quite a few dev-dependencies, along with some other changes.

Using ESLint with Angular in VScode

First, install this ESLint extension: it's the top result if you search "eslint". The author is a guy named Dirk but it is a Microsoft maintained package.

Next, open the command palette (cmd/ctrl + shift + P) and type "ESLint: Manage Library Execution".

You will be prompted by VScode to allow ESLint to run. You can choose "Allow" to just have it run in this project. Don't choose "Allow Everywhere" unless you plan to convert all your Angular projects to ESLint right away.

Note that if you would like ESLint to work on your html templates, you will need to make the following change to your VScode settings:

Using ESLint with Angular in Webstorm

In "Preferences" > "Other Settings", there is an "ESLint Settings" section. You just have to choose the right node eslint bin (which WebStorm will usually automatically fill in once you click the dropdowns) and then you have to find the right ESLint config file. By default, WebStorm looks for .eslintrc but you can change that to .eslintrc.json.

Let's try it

You should be good to go. Now let's see it in action!

It will probably find some issues, like trailing spaces, and naming convention rules. Most of these can be automatically fixed with the following command. Is your working tree clean? Run this command:

You should now see some changed files. ESLint fixes everything it can but it won't change everything for you. That's ok; you shouldn't have too many new things to fix. If you have some false positives, don't worry, these won't prevent your build from succeeding.

Conclusion

That about wraps it up. Your app is now future-proof! At least on the linting front. Keep an eye out for new versions of @angular-eslint to fix open issues. Enjoy!