Migrate from TSLint to ESLint

TSLint has been the recommended linter in the past but now TSLint is deprecated andESLint is taking over its duties. This article will help you migrate from TSLint to ESLint.

ESLint: Installation

You need to install ESLint. ESLint doesn't natively support TypeScript, so you will also need to install eslint-typescript-support:

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

or if you're using yarn as your package manager:

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

The command above adds ESLint, adds a parser that makes ESLint understand TypeScript, and adds some TypeScript-specific rules.

Now, to make the actual migration simpler, run thetslint-to-eslint-config utility. This tool will take your TSLint configuration and create the "closest" ESLint configuration from it.

npx tslint-to-eslint-config

This commanddownloads and executes the utility to perform the migration. For further options, check the utility'susage guide.

There should now be a new.eslintrc.js file, a log file (tslint-to-eslint-config.log), and likely changes to other files, like.vscode/settings.json. Carefully review the changes, especially those made to existing files, and check the log file.

ESLint: Configure

The.eslintrc.js file is usually sufficient to get started but it's likely that theparserOptions.project property is still set to yourtsconfig.json file. That means that ESLint rules can use semantic information, for example, is this variable a string or a number-array? This configuration enables some powerful rules but means that ESLint takes much longer to compute. The default rules for extensions do not require semantic information and unless you have added rules that do, we recommend you remove theparserOptions.project property.

ESLint: Run

You are now ready to run ESLint, but before doing that, we recommend you disable TSLint. To do so, open the Extensions view and selectDisable in the context menu of the TSLint extension.

It is time to lint! Use this command:eslint -c .eslintrc.js --ext .ts <mySrcFolder> (notice the--ext .ts option which tells ESLint to look at TypeScript files). We recommend putting the command in thescripts section of yourpackage.json-file, like so:

"lint":"eslint -c .eslintrc.js --ext .ts <mySrcFolder>"

To integrate ESLint with Visual Studio Code, do the following:

• Install theESLint extension.
• Create a task via theTasks: Configure Task command and selectnpm: lint.
• In the resultingtasks.json file, configure the problem matcher to be$eslint-stylish.

Hint: ESLint is sometimes "more correct" in how it does things and you may see warnings that you didn't have before, for example calling out missing semicolons. Try the--fix option to let ESLint clean up things up for you.

TSLint: Removal

Congratulations. You should now have a working ESLint setup and it's time to clean up.

The removal of TSLint depends on your project, but usually these are the steps:

• Update.vscode/extensions.json to recommend the ESLint extension and not TSLint anymore:

  "recommendations": [  "dbaeumer.vscode-eslint"]

• Remove thetslint.json file.

• Remove the dependency ontslint in thepackage.json file.

• Uninstall TSLint withnpm uninstall tslint.