Migrate TSlint to ESlint — Angular

What is TSlint?

TSLint is an extensible static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors. It is widely supported across modern editors & build systems and can be customized with your own lint rules, configurations, and formatters

What is ESlint?

ESLint statically analyzes your code to quickly find problems. It is built into most text editors and you can run ESLint as part of your continuous integration pipeline.

Why we need migration?

TSLint has been deprecated since 2019 in the favor of ESLint. Therefore angular project having TSLinting should be converted to ESLint. Furthermore Angular CLI version > 12, are no more supporting linting means there is no linting packages attached if create a angular project using ng new [Project-name]. As earlier Angular CLI add TSlint as a default linting

Command to ingrate ESlint for Angular CLI projects > = 12 having no linting

For such project, we just need one command to run

ng add @angular-eslint/schematics

It will be installing all relevant dependencies, the ng add command will automatically detect that you have a workspace with a single project in it, It can therefore go ahead and wire everything up for you!

Command to ingrate ESlint for Angular CLI projects < = 12 having TSLint

It should follow these steps

Step 1 — Add relevant dependencies

ng add @angular-eslint/schematics

Step 2 — remove TSLint and Codelyzer

I recommend removing all the tslint packages and files

1. Remove tslint.json file
2. Remove TSLint dependencies

• codelyzer
• tslint
• tslint-eslint-rules
• tslint-microsoft-contrib

Step 3— Run the convert-tslint-to-eslint schematic on a project

ng g @angular-eslint/schematics:convert-tslint-to-eslint

After triggering this command, it will prompt a question to which project you want to apply. For this you can go to angular.json file and pick a project name. In my case is

Finding project name

Read your chosen project’s tslint.json and use it to CREATE a .eslintrc.json and the contents of this .eslintrc.json will be the closest possible equivalent to your tslint.json that the tooling can figure out.

But if you want default recommendation rules then use this

Step 4— Fix Errors

1. Run ng lint --fix command to fix linting errors automatically.
2. Fix remaining errors manually.

All done. Enjoy 🥳🚀