Switch from TSLint to ESLint in Angular 8/9

angular
eslint
tslint
typescript

©OneCodex 05.02.2020

Until now angular always included TSLint when having created a new application using angular cli. Since 2020 TSLint is deprecated it should be replaced with ESLint. Unfortunately angular will support ESLint only from version 10 out-of-the-box. In the following article I’ll show you how to easily switch to ESLint using angular 8/9.

Why linting is important?

Linting is a tool for static code analysis. You define some rules which should be applied to your code. The linter checks if your code mathed these definitions.

Including linting in your application is important to reduce errors and improve the quality of your code. Using a linter you can detect syntax errors in advance. Also applying linter rules makes your code mor readable for everybody.

Install Packages

First of all you need to install the required packages

npm i -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser

Why do we need several packages?

Because we are using typescript and typescript is parsed differently than ECMAScript, we need the typescript packages

  • eslint-plugin: adds specific typescript rules to the ES rules
  • parser: parses typescript for linting

Convert config from TSLint to ESLint

There’s not an online converter, yet but some nice guys created a package which transforms the config from TSLint to ESLint.

You simply need to type the following command in your console and voila

npx tslint-to-eslint-config

Fix .eslintrc

The output file of the transformation is the .eslintrc file which represents the configuration for ESLint.

You need to ensure that the following section is set up as shown above


plugins: ['@typescript-eslint'],
env: {
    browser: true,
    node: true
},

            

Add excludes for specific directories or files

For excluding files from lintin you must add a .eslintignore file. This behaves like a .gitignore file. I did the following configuration


**/*.spec.ts
node_modules/
e2e/
            

Change VS Code configuration

If you're using Visual Studio Code I recommend using the following settings to enable linting instantly. You simple need to add these lines in your vs code settings file.


"eslint.alwaysShowStatus" :  true , 
"eslint.validate" : [ 
   { 
		"language" :  "javascript" , 
		"autoFix" :  true 
   }, 
   { 
		"language" :  "typescript" , 
		"autoFix" :  true 
   } 
] 
			

Of course there are more settings for eslint but in my case these were enough.

Change script in package.json

To ensure that ESLint is used instead of TSLint ensure that you change the lint script in package.json as follows

"lint": "eslint . --ext .ts",

Test if your application still works

Now you created the base for using ESLint. So just run a test

npm run lint

In my case I had lots of errors since my tslint config was a bit older and therefore different than the eslint config.

It took some time to fix everything but it’s totally worth it to clean up all the code.

Delete TSLint references

Finally you can simply remove the tslint references from package.json as well as delete the tslint.json config file. You also need to remove the lint section in angular.json file.

If you have any questions or improvements please send me an email to

info[at]onecodex[dot]ch