DEV Community

Cover image for Setup ESLINT and PRETTIER in React app
Ankit Kumar
Ankit Kumar

Posted on

Setup ESLINT and PRETTIER in React app

Setting up ESlint and Prettier is tedious for beginners, I know this because I have faced this issue too. You will find many articles about setting up the linting on the internet. Some of them will work for you, some will not but most of them will be outdated because of the continuous growing of the library.

So, instead of picking our brain too much, we should try to understand few things.

What is ESLint?

ESLint statically analyses our code and find the problems. It is present in most of the editors.ESLint fixes are syntax-aware so you won't experience errors introduced by traditional find-and-replace algorithms.

Write your own rules that work alongside ESLint's built-in rules. You can customise ESLint to work exactly the way you need it for your project.

What is Prettier?

Prettier is an opinionated code formatter which is compatible with most of the languages. It saves a lot of time. It quickly indents our code on save (depends on VSCode/editor settings).

How to make them work together?

ESLint has also formatting rules which could conflict with prettier. So we should configure it carefully (sounds tough but it is very simple 😅)

Let's begin

Step 1 : -

npm install eslint --save-dev
yarn add eslint --dev
Enter fullscreen mode Exit fullscreen mode

Step 2 : -

Create .eslintrc.json by running

npx eslint --init
yarn run eslint --init
Enter fullscreen mode Exit fullscreen mode


Step 3 : -

In React - 17.0.0, importing react to a file is optional,
To fix this, we will add a rule to our .eslintrc file. So open your .eslintrc file and add this line "react/react-in-jsx-scope": "off" inside the rules.

  "rules": {
    "react/react-in-jsx-scope": "off"
Enter fullscreen mode Exit fullscreen mode

Step 4 : -

If you are using jest then you will find that eslint is giving us an error that test or expect is not defined . To fix this we need to add "jest": true inside env.

  "env": {
    "browser": true,
    "es2021": true,
    "jest": true
Enter fullscreen mode Exit fullscreen mode

Step 5 : -

Now, add esling plugins to make it work with react, and make proper configuration for eslint and prettier so that they don't collide with each other


npm install eslint-config-prettier eslint-plugin-prettier prettier --save-dev
yarn add eslint-config-prettier eslint-plugin-prettier prettier --dev
Enter fullscreen mode Exit fullscreen mode

Please check each of their git repositories.
eslint-config-prettier - Turns off all rules that are unnecessary or might conflict with Prettier.

eslint-plugin-prettier - Runs Prettier as an ESLint rule

After installing above, make changes to .eslintrc file.

 "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"]
Enter fullscreen mode Exit fullscreen mode

We can run prettier separately but we want eslint to run it for us so that it does not conflict with the eslint rules.

Step 6: -

Create .prettierrc and paste the below code

  "semi": true,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "none",
  "jsxBracketSameLine": true

Enter fullscreen mode Exit fullscreen mode

Now, eslint and prettier is setup lets add the script to the package.json

"lint": "eslint .",
"lint:fix": "eslint --fix",
"format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
Enter fullscreen mode Exit fullscreen mode

This should work but before you test it, it is better to restart your VSCode.

You are all setup to write your awesome code.

Thanks for dropping by 🌟
Add a ❤️ if you liked it. Checkout my GitHub profile for cool projects. GitHub
Support me by following me on twitter

Top comments (20)

nzxt profile image
Deniz True

Thanks for the good manual!
Could you clarify, please, what is the real profit of using prettier? What prettier does that eslint does not. I'm using eslint without prettier connected for a long time and it covers all our formatting needs. I see the notice, that prettier is optional. So is it really worth it to install one more additional package?

cassiorsfreitas profile image
Cássio Freitas
  • ESLint: underline when code doesn’t comply to logical rules. Can run a script and fix some easy errors (etc. unused variables lying around)
  • Prettier: doesn’t change the logic of code, only formats it (etc. removing extra spaces, turning double quotes to singles)
knowankit profile image
Ankit Kumar • Edited

⭐️ This is a very good question. I know the answer for it and I am writing one small article on this and I will post the link once done. Thanks for dropping by.

amappola7 profile image
Ana María Porras Pinto • Edited

Thanks for sharing! It was really helpful. Just a little annotation...

I followed all the steps but they keep colliding with some things, to fix that I had to add 'prettier' in the extends array in the .eslintrc file in the last position, like this:

"extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended", "prettier"]
Enter fullscreen mode Exit fullscreen mode
thevediwho profile image
Vaibhav Dwivedi

Short and simple. Thank you for sharing!

yashiroquy profile image

How do I run it then? I tried npm lint or npm format but nothing works

midhatahir profile image

Simple and incredible. Thanks

knowankit profile image
Ankit Kumar

Support me by following me on twitter ⭐️

gilliardmacedo profile image
Gilliard Macedo

Thank you!

lint:fix script is missing "." after "eslint"

gabrielizalo profile image
Gabriel Porras • Edited

Please update eslint-config-prettier and eslint-plugin-prettier links.
And THANKSSS.. Amazing help.

samuel_marien profile image
Samuel Marien

Wow ! Nice job. Thank for sharing !!

codezerox1 profile image
Muhammad Lutfi

Wow, this is help me a lot, Thanks dude.

ade_sholly11 profile image
Ibrahim L..

Really nice... Thanks for sharing..

dereemii profile image
Leslie Herrera

I always return to this tutorial, great work :D

daniyaniazi profile image
Daniya Niazi


gilbishkosma profile image

Thanks man, it was really useful.

snezhi profile image

Awesome, awesome guide! Great overview, easy to follow, and gives us all a great starting point, whether it's our first linting project, or our 30th (but we wanted a good reference).

Thank you!