DEV Community

Cover image for Setup ESLINT and PRETTIER in React app

Setup ESLINT and PRETTIER in React app

Ankit Kumar on September 26, 2021

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...
Read full post
Collapse
 
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?

Collapse
 
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)
Collapse
 
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.

Collapse
 
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
Collapse
 
thevediwho profile image
Vaibhav Dwivedi •

Short and simple. Thank you for sharing!

Collapse
 
yashiroquy profile image
UMR •

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

Collapse
 
samuel_marien profile image
Samuel Marien •

Wow ! Nice job. Thank for sharing !!

Collapse
 
midhatahir profile image
Midha •

Simple and incredible. Thanks

Collapse
 
dereemii profile image
Leslie Herrera •

I always return to this tutorial, great work :D

Collapse
 
gilliardmacedo profile image
Gilliard Macedo •

Thank you!

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

Collapse
 
ade_sholly11 profile image
Ibrahim L.. •

Really nice... Thanks for sharing..

Collapse
 
knowankit profile image
Ankit Kumar •

Support me by following me on twitter ⭐️

Collapse
 
codezerox1 profile image
Muhammad Lutfi •

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

Collapse
 
gabrielizalo profile image
Gabriel Porras • • Edited

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

Collapse
 
pradeep profile image
Pradeep Suthar •

thanks man

Collapse
 
daniyaniazi profile image
Daniya Niazi •

Thanks

Collapse
 
mehtabbutt11971 profile image
Mehtab Butt •

thanks, pretty straight forward

Collapse
 
gilbishkosma profile image
Gilbish •

Thanks man, it was really useful.

Collapse
 
snezhi profile image
Snezhi •

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!

Collapse
 
muhammadwasi81 profile image
Muhammad wasi •

Simple and incrediable

Collapse
 
samirmishra27 profile image
Samir •

Everytime I create a React or Next.js app, i come to this article to help install and setup eslint with prettier. This is a valuable resource! Thank you so much for making it :)

Collapse
 
chxlvwh profile image
CaoHouxuan •

Thanks, it works very well~