Install EsLint in JavaScript, Typescript, React

Why use ESLint

Currently, there are no worthy competitors for ESLint, it is a project that has been maintained by a very large community. Most coding programs support it, we will not have trouble using it with VSCode, Vim, Emac, WebStorm, Sublime, Atom, …

Because of that, why waste such a delicious package ^^

Install ESLint

Like any other package, ESLint can be installed at two levels:

• One is global, always install npm -g
• And the second is to go by project

The global implementation of ESLint makes sense since we want to use it in every project. However, it makes sense to install separately on each project if you need the following elements:

• ESLint versions differ from project to project
• Publicly you depend on ESLint for that project
• Colleagues and automated tools (like the CI guys) can install ESlint like any other package.

Install ESLint in the project directory

Run ESLint in the project

To create a shortcut to the command that runs eslint. Inside the package.json file add the following line:

Parameters . lets run ESLint inside the current directory, we run the command via the shortcut

ESLint installation file

The ESLint installation file can be placed in many locations. If there are no special needs, a single file in the outermost directory (root) is sufficient.

ESLint allows to use many types of files:

• Javascript
• JSON
• YAML

Use YAML in this example. Create a file named .eslintrc.yaml , this if you run eslint init in the src/ directory of the project it will ask if you want to create, it creates.

If you want to add logic with code, you need to use javascript type

The first thing to care about is to tell ESLint what language we are writing, which version, and the environment in which the code will run. Without the information, ESLint won’t run.

Pure Javascript

With the project is pure javascript, the entire file is .js, can be defined from the beginning, but that is quite time consuming, difficult to maintain, not sure because it depends on your understanding of javascript.

Many big companies like Google, Airbnb, and Facebook spend billions of billions of time maintaining and updating these settings.

Use the ten thousand favorite settings, Airbnb

There are articles on the net that will ask you to install eslint-config-airbnb , which includes the React, React Hooks, … settings. Not necessary in case the project is just regular javascript.

Notice we are NOT using npm to install, but using npx install-peerdeps . It will install which packages the eslint-config-airbnb-base depends on. When we use ESLint we will see it all the time, because it almost depends on a few other packages.

Once installed, declare it will inherit Airbnb’s installation

Airbnb’s settings can be said to be very popular and trusted by many large and small projects. We can use it with peace of mind without much change.

summary

TypeScript settings

The main problem with TypeScript is that ESLint cannot automatically parse, we have to add a parser @typescript-eslint/parser .

Setting

Parse reads the input file and creates a version that ESLint understands.

Declare to use this parser

Also update package.json and tell ESLint not to check the file .js but to check the file .ts

Similar to javascript, we use Airbnb’s settings

eslint-plugin-import must be installed separately, manually, for no reason why.

Update the ESLint config file again

You may be wondering, why haven’t we installed @typescript-eslint that we can use, actually when we installed eslint-config-airbnb-typescript we installed it with npx install-peerdeps

Maybe another rule can be directly referenced from the documentation on github

Finally, you will find there are a lot of articles out there, only you set up

If the recommended ESLint settings are not used, this is not necessary. The reason is that Airbnb has already enabled such rules.

summary

package.json

.eslintrc.yaml

React settings

Adding ESLint settings for React is incredibly simple, everything Airbnb has to worry about.

One of the common mistakes is to assume that writing like below will enable React support

.eslintrc.yaml

React uses JSX, but in a way that ESLint can’t understand. In order for React and ESLint to talk to each other, we have to use eslint-plugin-react

React Javascript

Install the package

.eslintrc.yaml

package.json

If you use React Hook, you should add the following settings (accessibility checking is omitted).

.eslintrc.yaml

summary

package.json

.eslintrc.yaml

Free to sit and watch all this

React TypeScript

If we use TypeScript, we cannot install npx install-peerdeps , but we must install it independently

.eslintrc.yaml

package.json

Install for VSCode

VSCode has a pretty godly plugin to support ESLint. My favorite settings

Automatically run lint when saving

VSCode will check on JS, JSX, TS, TSX

Choose a single quote pattern

Automatically update file location

Source: https://blog.geographer.fr/eslint-guide