Migrate from TSLint to ESLint
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
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 the tslint-to-eslint-config utility. This tool will take your TSLint configuration and create the "closest" ESLint configuration from it.
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.
.eslintrc.js file is usually sufficient to get started but it's likely that the
parserOptions.project property is still set to your
tsconfig.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 the
You are now ready to run ESLint, but before doing that, we recommend you disable TSLint. To do so, open the Extensions view and select Disable 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 the
scripts section of your
package.json-file, like so:
"lint": "eslint -c .eslintrc.js --ext .ts <mySrcFolder>"
To integrate ESLint with Visual Studio Code, do the following:
- Install the ESLint extension.
- Create a task via the Tasks: Configure Task command and select npm: lint.
- In the resulting
tasks.jsonfile, configure the problem matcher to be
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.
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:
.vscode/extensions.jsonto recommend the ESLint extension and not TSLint anymore:
"recommendations": [ "dbaeumer.vscode-eslint" ]
Remove the dependency on
Uninstall TSLint with
npm uninstall tslint.