TSLint -> ESLint/CRA/Typescript/Prettier
Tags: eslint, react, typescript, prettier
Published: 2019-08-21 21:34:23

If you have read my previous article and added TSLint support to your React App, at some point you will have to migrate to ESLint for the reason that TSLint is going to be deprecated (which I also mentioned in “Set Up TSLint and Prettier in VS Code for React App with Typescript”).

Below I describe the steps for successful migration, along with providing file configurations to make it easier for you to jump right into using ESLint in your React App with Typescript. Enjoy!

## package.json
Your *package.json* should contain at least the versions below:
<code>typescript@3.4.5</code>
<code>react-scripts@^3.0.1</code>
<code>react@^16.8.6
</code>

### script
in your package.json specify the script:

<code>“lint:ts”: “eslint --ext=jsx,ts,tsx src”</code>

## remove everything related to TSLint (if you have any)
<code>yarn remove @typescript-eslint/eslint-plugin-tslint tslint tslint-config-prettier tslint-react</code>


## install ESLint

:warning: ESLint is coming with Create-React-App, so you can skip this step.

You can install ESLint using yarn or npm:
<code>npm install eslint --save-dev</code>

<code>yarn add eslint --dev</code>


## Set up a configuration file (.eslintrc)

You should then set up a configuration file:
<code>$ ./node_modules/.bin/eslint --init</code>

You will have to go through prompt and choose what will go into the auto-generated **.eslintrc.js** file.

for more details check this link: [Configuring ESLint](https://eslint.org/docs/user-guide/configuring?source=post_page-----4befb4918ba8----------------------)

Of course, you will still have to customize this file if you want to have typescript, react and prettier support.


## .eslintrc.js
So, this is pretty much the main config file. It contains the information about which configs, plugins for linting you are using. You can tweak the recommended rules from here as well.

{% gist https://gist.github.com/dumpofmemory/9e20ca26bd91652dcd5c7579b0191f5d %}

## .eslintignore
If you don’t want to lint certain files, then at the root level of your application’s folder structure you can add a .eslintignore file, where you can list any files that should be ignored.
For example:

<code>src/serviceWorker.ts</code>
<code>src/tests/</code>

## eslint with React
And to support React-related rules you can install eslint-plugin-react, you can find the list of all rules [here](https://www.npmjs.com/package/eslint-plugin-react?source=post_page-----4befb4918ba8----------------------)

- install the plugin:
<code>npm install eslint-plugin-react --save-dev</code>

<code>yarn add eslint-plugin-react --dev</code>

- the presets to get reasonable defaults:

"extends": [
  "eslint:recommended",
  "plugin:react/recommended"
]


On top of that you can add a plugin to lint react hooks:

[eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks?source=post_page-----4befb4918ba8----------------------)

- install:

<code>npm install eslint-plugin-react-hooks --save-dev</code>

<code>yarn add eslint-plugin-react-hooks --dev</code>

- enable your react-hooks plugin in *.eslintrc.js*:
<code>"plugins": ["@typescript-eslint", **"react-hooks"**]</code>


- the rules that it activates:

"rules": {
  // ...
  "react-hooks/rules-of-hooks": "error",
  "react-hooks/exhaustive-deps": "warn"
}


## setting up ESLint to work with TypeScript
[Why typescript-eslint?](https://github.com/typescript-eslint/typescript-eslint?source=post_page-----4befb4918ba8----------------------#why-does-this-project-exist)

Now that you already have eslint and you would like to extends its capabilities to typescript, install the following to the dev dependencies:
<code>yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev</code>

<code>npm i @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev</code>

- [@typescript-eslint/parser](https://www.npmjs.com/package/@typescript-eslint/parser?source=post_page-----4befb4918ba8----------------------): eslint-specific parser that understands typescript AST format

- [How do I configure my project to use typescript-eslint?
](https://github.com/typescript-eslint/typescript-eslint?source=post_page-----4befb4918ba8----------------------#how-do-i-configure-my-project-to-use-typescript-eslint)

- [@typescript-eslint/eslint-plugin](https://www.npmjs.com/package/@typescript-eslint/eslint-plugin?source=post_page-----4befb4918ba8----------------------): provides a good dose of typescript-specific eslint rules

## tsconfig.json
This file contains essential typescript rules like *noImplicitAny*, etc.

{% gist https://gist.github.com/dumpofmemory/6a30218d43149e3fce6859d9bca7b4f8 %}

## prettier
Now that you have your eslint-typescript symbiosis you might want to enforce the auto-fixing of code formatting.

<code>yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev</code>
- **prettier**: the core prettier library
- [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier?source=post_page-----4befb4918ba8----------------------): disables eslint rules that might conflict with prettier

in your *.eslintrc.js*:
{
  “extends”: [“plugin:prettier/recommended”]
}

This will enable **eslint-plugin-prettier**, set **prettier/prettier** rule to **“error”**, and extend the **eslint-config-prettier** configuration.
- [eslint-plugin-prettier](https://www.npmjs.com/package/eslint-plugin-prettier?source=post_page-----4befb4918ba8----------------------): runs prettier as an eslint rule

I specified my prettier rules inside .eslintrc.js file above and it works for me to have all the different sorts of rules in one place. However, it is also possible to have them in a separate .prettierrc file if you’d like.
The whole list of prettier’s code formatting options can be found [here](https://prettier.io/docs/en/options.html?source=post_page-----4befb4918ba8----------------------)

So, in my .eslitrc.js file on line 17 I have commented out “plugin:prettier/recommended”, which fully enables prettier plugin, and remember that it is very opinionated, and might conflict with your eslint rules.

## prettier and VSCode

- download and install vscode prettier extension from [here](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode&source=post_page-----4befb4918ba8----------------------)

- open VSCode, hit ‘⇧⌘P’ to open the Command Palette… and type in ‘Preferences: Open Settings (JSON)’ and enable eslint auto-fixing like below on line 25–36:

{% gist https://gist.github.com/dumpofmemory/4c857221bfc023934be9f5ca6adfdc6d %}

To fix your lint errors run this command:
<code>npm run lint:ts --fix</code>

<code>yarn run lint:ts --fix</code>

That’s all Folks! ☕️