React + TypeScript + ESLint + Prettier

Benefits of building an environment

• Coding rules can be tightened in team production etc.
  -> If each team does their own coding, no one can read would be completed.
• Eliminate the weird habits of coding from beginners
  -> If you have a strange habit from a beginner, it is difficult to correct it.
• Eliminate coding holes
  -> JavaScript itself is a language with very loose rules. So there may be security holes as a result of doing it in my own way. You can reduce such mistakes.
• A beautiful code is completed
  -> Your code will be clean, so you won’t be embarrassed to publish it.

unsplush

Building an Environment

Create a React + TypeScript project

npx create-react-app my-app — template typescrip

You can use yarn as well.

ESLint installation

ESLint is for tightening coding rules.
Install using — init, which summarizes the initial settings.

yarn run eslint — init

Getting Started with ESLint

Select initial settings

You must answer for several question for initialization. I selected those answers like:

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

What type of modules does your project use?
=> JavaScript modules (import / expoer)

Which framework does your project use?
=> React

Does your project use TypeScript?
=> Yes

Where does your code run?
=> Browser

How would you like to define a style for your project?
=> Use a popular style guide

Which style guide do you want to follow?
=> Airbnb
Standard is the basic one, and Airbnb does the strictest check. Therefore, I recommend it.

What format do you want your config file to be in?
=> JavaScript

Would you like to install them now with npm?
=> Yes

Install additional packages for ESLint

In the first place, install additional packages for TypeScript.

yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

Install a package that makes detailed settings for Airbnb

npx install-peerdeps --dev eslint-config-airbnb

They would ask like “Are you using Yarn?”. So press y to start the installation.

Prettier installation

Install the Prettier package.

yarn add -D prettier eslint-config-prettier

Prettier will format your code nicely.
It is very convenient because it formats the code according to the ESLint settings by using ESLint and Prettier at the same time.

ESLint and Prettier settings

Set ESLint in .eslinyrc.js.
Make some settings, but delete unnecessary parts and add necessary settings.

.eslinyrc.js

By default, namedComponents is set to function-declaration, and unnamedComponents is set to function-expression. I needed to apply an arrow function to a function component declaration in ESLint. That is why I added:

"react/function-component-definition": [   
  2,   
  { "namedComponents": "arrow-function" } 
]

Secondly, create a file named .prettierrc.js directly under the project.
The settings in this file apply to Prettier.

.prettierrc.js

Create a file called .eslintignore directly under the project
Specify the file to which ESLint is not applied

.eslintignore

Add the following settings to package.json.
Now you can use commands like yarn run lint and yarn run fix.

package.json

That’s all.

Now you can command

npx eslint --fix .

to lint all files and

npx prettier --write .

to clean your code up!

Happy coding ! You can ask me any question.