TSLint is going to be deprecated this year, here's what you can do about it

If you've done any work with Typescript, it's likely you've come across the TSLint project. TSLint is a Typescript specific linting tool that ensures you and your team write high quality code that conforms to a particular style.

The strategic direction of the TypeScript team is to enable “types on every desk, in every home, for every JS developer”. In other words, the direction is to incrementally enrich the JavaScript developer experience with TypeScript features like types and /assets analysis until, maybe, the TypeScript and JavaScript developer experience converge.

Palantir on Medium

Up til now, TSLint has been the primary way to keep typescript code bases in check. But in 2019, the Typescript team decided to put their efforts into expanding ESLint with support for typescript. With this decision made, Palantir has decided to sunset TSLint and do away with the project entirely.

🚧 warning TSLint will be deprecated some time in 2019. See this issue for more details

Palantir on Github

With this change coming soon, it's important to update your projects to keep up code quality. With this post we'll go over that migration process step by step.

Setup

#

First things first, we need to install ESLint and a couple extra dependencies to get things working.

First up is @typescript-eslint/parser

this module takes typescript code and produces an Abstract Syntax Tree, or AST for that code.

We then use the @typescript-eslint/eslint-plugin to parse that AST for ESLint rules!

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

Once that's installed, we need to create a .eslintrc file in the root of our project and add the following code to it:

1{
2  "parser": "@typescript-eslint/parser",
3  "plugins": ["@typescript-eslint"],
4  "extends": [
5    "eslint:recommended",
6    "plugin:@typescript-eslint/eslint-recommended",
7    "plugin:@typescript-eslint/recommended"
8  ],
9    "parserOptions": {
10      "project": "./tsconfig.json",
11      "includes": [
12        "src/**/*.ts"
13      ]
14  }
15}

This does a couple things.

• First, we are telling ESLint to use the Typescript specific parser we installed earlier.
• We then add the typescript-eslint plugin and extend the recommended default rulesets. (that last part is optional, you can also create any configuration you want in the rules section)
• finally, we are setting up some specific options that tell ESLint what files to scan through, and where our tsconfig.json is

Please note that this is just extending the default rulesets and will not handle migrating your existing TSLint settings. you will need to add a 'rules' section to the above config and manually add each rule or the equivalent.

You can find a list of the ESLint Typescript supported rules here

Configure your Editor

#

VScode

#

You will need to add a configuration option in VScode's settings so that it knows to run ESLint on typescript files:

1"eslint.validate": [
2  "javascript",
3  "javascriptreact",
4  "typescript",
5  "typescriptreact"
6]

Intellij

#

Open the settings window and navigate to:

preferences > Language & Frameworks > JavaScript > Code Quality Tools > ESlint

• choose manual ESLint Configuration
• set the ESLint package field to ~/path/to/project/node_modules/eslint

After following these steps, you should be able to see ESlint start highlighting your code that violates the rules automatically!

Further reading