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

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

A definitive guide for running ESLint and Prettier in a perfect harmony on a React Typescript project

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

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

What is TypeScript? Why TypeScript? and Why Not TypeScript?

TypeScript extends JavaScript by adding Types. There are many great reasons to switch to TypeScript. Especially if your team uses JavaScript. There are some reasons to not use TypeScript as there are with any language or framework.

Setting up efficient workflows with ESLint, Prettier and TypeScript

In this article I would like to start very easily and go into more depth from topic to topic. In the first step we will use simple rules and options. Then we will learn the correct use of configs and plugins. During the whole learning process you will get useful tips and information so you will be able to build your own ESLint and Prettier environment.

What’s New In Typescript 4.0?

Today I am going to talk about new features in Typescript 4.0. TypeScript 4.0 comes with lots of new features to make JavaScript development easier.

Introduction to TypeScript | TypeScript Tutorial | TypeScript for Beginners

★ This video will give you an introductory overview of Typescript and the best way to learn it ★ TypeScript is a programming language that helps you write JavaScript code effortlessly and efficiently ★ Typescript is part of our Live Training module on Angular. ★ Topics Covered in the video: ✓ Introduction to TypeScript ✓ Installation ✓ Variables ✓ Data Types ✓ Functions ✓ Interfaces ✓ Classes ✓ Access Modifiers

Setting Up Efficient Workflows with ESLint, Prettier and TypeScript

In this the article you will be able to setting up eficient workflows with ESLint, Prettier and TypeScript - JavaScript inDepth. Understand and handle ESLint, Prettier and TypeScript in a good way.