Angular: Migrate from TSLint to ESLint
Philip Jöbstl
Posted on April 6, 2022
Excerpt from Wikipedia:
Lint, or a linter, is a static code analysis tool used to flag programming errors, bugs, stylistic errors and suspicious constructs. The term originates from a Unix utility that examined C language source code.
Linting in TypeScript
Linters can have a great impact on the development of your application. This is espescially true if the technology used comes out of the JavaScript environment. The standard linter in the JS world is a tool called ESLint.
Opposing to this, TSLint emerged as the defacto standard linting tool for TypeScript projects. But to simplify the experience for developers switching to TypeScript, ESLint began to incorporate features specific to TSLint. In 2019, TSLint stopped active development of new features, and encourages it's users to migrate to ESLint. You can read more details about this decision on the Palantir Blog.
Migration path for existing projects
You can find all necessary tools and information to simplify the migration of existing Angular projects to ESLint at the GitHub Repo Angular ESLint.
First you have to add the relevant packages as dev dependencies by using the following command:
ng add @angular-eslint/schematics
Now you can use convert-tslint-to-eslint
. This will remove all TSLint specific configuration. It also creates the necessary files for ESLint and converts references in NPM scripts or code comments like tslint:disable
.
ng g @angular-eslint/schematics:convert-tslint-to-eslint
That's it! You can now execute ESLint by running the following of your command line:
npm run lint
Code editor support
ESLint has a variety of integrations for various dev tools. You can find a full list at the ESLint user guide.
To integrate ESLint into VS Code, you can install the wonderful plugin called, well, ... ESLint (dbaeumer.vscode-eslint)
I would also recommend you to install the optional, but nevertheless interesting LintLens (ghmcadams.lintlens). It gives you additional infos about the configured linting rules directly while editing your .eslintrc.json
file.
It's a wrap
And this is all you need to migrate your existing Angular applications from TSLint to ESLint. I hope this post will help someone out there, so please share it if you like!
Posted on April 6, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.