How to Add ESLint and Prettier To A React and TypeScript Project (2021)

Introduction

This tutorial aims to be a definitive guide for setting up ESLint and Prettier working together on a React Typescript project.

After reading a lot of tutorials, and struggling myself into it, I decided to create this definitive guide to make life easier for anyone who needs it.

Why use ESLint and Prettier?

ESLint is one of the most popular tools for code quality rules check and code formatting.

Prettier is a code formatting tool.

So, why use Prettier if I can also format my code using just ESLint? In a short answer, because Prettier do the code formatting better than ESLint.

So, as the Prettier documentation says, use Prettier for formatting and linters for catching bugs!

Let’s start!

This article will be divided in 4 parts:

Setting up ESLint
Setting up Prettier
Checking files content
Making ESLint and Prettier work together

Checking files content

To make sure that ESLint and Prettier are setted up right, let’s do a quick check over your Project files.

package.json

It should contain the follow packages over “devDependencies”:

"devDependencies": {
"@typescript-eslint/eslint-plugin": "^4.15.1",
"@typescript-eslint/parser": "^4.15.1",
"eslint": "^7.20.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-import-resolver-typescript": "^2.4.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"prettier": "2.2.1"
}

#prettier #typescript