As we use Typescript at TangoCode, we were also using TSLint as our linter tool. Something that I wanted to do is to standardize the rules used in all my project, to make the code easier to read and to share with my peers. My team agreed on using the Airbnb’s Javascript Styleguide, but we were not using all the linter rules available, so an opportunity for improvement was there.

For this reason, I started to compare two popular options, ESLint and TSLint, that could be used for this case and see their pros and cons because I did not like the idea of using the two of them at the same time. There is not always a direct correspondence between the rules, and the migration from one to another is not that easy. The rules for the style guide I mentioned before were available in the documentation for the ESLint case but not for TSLint, so that was a positive point for ESLint. And ESLint seems to be popular and moving faster than its competitor; for example, the React team created an ESLint plugin for React Hooks immediately after their release.

This year we received news from the TypeScript team about leveraging ESLint and their plans to use it themselves more widely https://github.com/Microsoft/TypeScript/issues/29288. Afterward, Palantir (the creator of TSLint) announced the future deprecation of its linter (https://medium.com/palantir/tslint-in-2019-1a144c2317a9), and they announced their support for typescript-eslint (https://github.com/typescript-eslint/typescript-eslint). Even though typescript-eslint is not complete yet with respect to TSLint, I am proposing the gradual use of typescript-eslint to my team and writing this small tutorial as the first step in that direction.

Configuring ESLint in a Typescript project

As my team uses React as part of our tech stack, we will create an app called `linter-app` with React and Typescript.

npx create-react-app linter-app –typescript

Next, install ESLint with its parser and plugin for Typescript (they should have the same version to work properly).

npm i eslint@^5.3.0 \
@typescript-eslint/eslint-plugin@^1.7.0 \
@typescript-eslint/parser@^1.7.0 \
–save-dev

In order to use ESLint with React, install eslint-plugin-react

npm install eslint-plugin-react –save-dev

For the Airbnb style guide, you could install an additional set of plugins with this short command:

npx install-peerdeps –dev eslint-config-airbnb

Then create a file .eslintrc.js and add this configuration:

Finally, if you use Visual Studio Code, the following rules can be useful for having the code formatted (add them in your settings.json file):

This will tell VS Code that you will use ESLint for formatting on save and it will help you to fix automatically some style issues and also check for problems in .ts and .tsx files. From here on, you can add plugins to this project, like Prettier or React Hooks for example, and configure its use in the .eslintrc.js file for more linting options. I hope you find this helpful!

You can check the code for this example in this Github repository: https://github.com/joseluis829/linter-app

Pin It on Pinterest