Setting ESLint on a React Typescript project (2021)

Introduction

After struggling a lot trying to install and understand ESLint on my React Typescript project, I decided to create a definitive guide to setting ESLint to a React Typescript project.

The main goal of this tutorial is to set up step-by-step and explain every line added or executed, instead of just giving you a bunch of files with a lot of configurations and expect that you will be able to understand what and how things are happening.

So, let’s start!

Prerequisites

Note: You need Node version >= 10 installed. So, if you don’t have it, please go to NodeJS website, download and install it on your local machine. (https://nodejs.org/en/)

Step 1: Create a React Project with Typescript

The following command will create a project inside a folder my-app.

On terminal, run:

Step 2: Removing the pre-set ESLint configuration from React project

React comes with an eslint configuration pre-setted. Let’s remove this configuration so we can set a better one. To do this, remove the follow code from ‘package.json’ file

Step 3: Install ESLint package

Inside the project directory, open a terminal.

On terminal, run:

After run it, you will see that “eslint” was added as a develop dependency on the ‘package.json’ file

PS: You can ignore if the version doesn’t match with the example shown above.

Step 4: Setup ESLint

Inside the project directory, open a terminal.

On terminal, run:

When running this command, you will need to answer some questions about the configuration:

How would you like to use ESLint?
Select: To check syntax, find problems, and enforce code style

What type of modules does your project use?
Select: JavaScript modules (import/export)

Which framework does your project use?
Select: React

Does your project use TypeScript?
Select: Yes

Where does your code run?
Select: Browser

How would you like to define a style for your project?
Select: Use a popular style guide

Which style guide do you want to follow?
Select: Airbnb: https://github.com/airbnb/javascript

What format do you want your config file to be in?
Select: JSON

After this, it will check the dependencies that need to be installed and then will ask:

Would you like to install them now with npm?
Select: Yes

Then, it will install all the packages needed. After the installation process, the ‘devDependencies’ on “package.json” file should look like this:

PS: You can ignore if the version doesn’t match with the example shown above.

Step 5: Running ESLint

Inside the project directory, open a terminal.

To run ESLint and see what errors it is pointing, just run:

To automatically fix some errors, you can use ‘--fix’:

If you want to ignore warnings, you can use ‘ --quiet

Step 5.1: Let’s Run!

If we just run the eslint to the whole files inside our ‘src’ directory, it will point 35 errors. WOW!

ESLint output:

Running with auto-fix, it gets less scary, but we still have 22 errors to solve. OMG!

ESLint output:

So, we ran through all those steps and just the ‘Hello World’ Project of ReactJS with Typescript gave us all these errors. And most of them make no sense, like extension file errors or even the use of React itself.

‘React’ was used before it was defined no-use-before-define

JSX not allowed in files with extension ‘.tsx’ react/jsx-filename-extension

Frustrating, no?

The good news is that I’ve already been through this hell to solve these problems and now I will help you finish all the configuration so we can use ESLint properly. Let’s face each problem and what we need to do to solve it!

Solving remaining problems

Problem: “‘no-use-before-define”

Error sample: ‘React’ was used before it was defined

Solution

On ‘eslintrc.json’, over “rules”, add the follow:

The explanation is on this stackoverflow post (https://stackoverflow.com/questions/63818415/react-was-used-before-it-was-defined/64024916#64024916)

Problem: “‘react/jsx-filename-extension”

Error sample: JSX not allowed in files with extension ‘.tsx’

Solution

On ‘eslintrc.json’, over “rules”, add the follow:

Problem: “import/no-unresolved”

Error sample: Unable to resolve path to module ‘./App’

Solution

  • Inside the project directory, open a terminal and install eslint-import-resolver-typescript package
  • On ‘eslintrc.json’, Add a new property “settings” to the json, as follow:

Problem: “import/extensions”

Error sample: Missing file extension ‘tsx’ for ‘./App’

Solution

On ‘eslintrc.json’, over “rules”, add the follow:

Problem: “no-undef”

Error sample: ‘test’ is not defined

Solution

On ‘eslintrc.json’, over “extends”, add “plugin:@typescript-eslint/recommended”:

Problem: “no-shadow”

Error sample: ‘Enum’ is already declared in the upper scope

Solution

On ‘eslintrc.json’, over “rules”, add the follow:

The explanation is on this stackoverflow post (https://stackoverflow.com/questions/63961803/eslint-says-all-enums-in-typescript-app-are-already-declared-in-the-upper-scope)

Problem: Any error over files that are not ‘js’,’jsx’, ‘ts’, or ‘tsx’ extension files

Solution:

You can avoid ESLint to look over some files by adding it on the ‘.eslintignore’ file.

So,

  • Create a ‘.eslintignore’ file in the root of your project
  • Add the follow text to it:

Extra:

Some nice rules to apply

Force all functions have explicit return type

On ‘eslintrc.json’, over “rules”, add:

Note: By enabling this rule, it will generate some ESLint errors that will be fixed by adding explicitly the return type of the functions on your code.

Max length of line code

On ‘eslintrc.json’, over “rules”, add:

React Hooks rules

On ‘eslintrc.json’, over “plugins”, add:

On ‘eslintrc.json’, over “rules”, add:

Some rules to ignore:

Prefer use of default export

On ‘eslintrc.json’, over “rules”, add:

Prop Types rules

On ‘eslintrc.json’, over “rules”, add:

Conclusion

So, with these configurations you will improve your code quality in your ReactJS with Typescript projects. Hope you enjoy! :)

VS Code: execute ESLint with auto fix in a file when save

As a plus, I will show you how to configure auto-fix on VS Code, but is an optional step, if you want to run ESLint with auto-fix every time you save your code.

  • Create a ‘.vscode’ folder on the root of the project
  • Create a ‘settings.json’ file inside .vscode/ folder and insert the follow code on it:
  • Install VS Code ESLint extension

You can go to VS Code ‘Extensions’ section and install it manually:

Or launch VS Code Quick Open (Ctrl+P) AND Run the follow command:

  • Allow ESLint extension usage on VS Code:

For the first time that you are using it, ESLint extension will be blocked. You should then allow it by:

1. Click on the status bar icon.

2. A popup will appears. Select ‘Allow’ option.

Done! Now every file saved will fix the code with the ESLint rules that can be fixed automatically.

References

Just a hardworking developer | https://github.com/andrebnassis