Angular: Migrate from TSLint to ESLint

Philip Jöbstl — Wed, 06 Apr 2022 11:34:31 +0000

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!

DEV Community: Philip Jöbstl

Angular: Migrate from TSLint to ESLint

Linting in TypeScript

Migration path for existing projects

Code editor support

It's a wrap