DEV Community

Cover image for How to use ESLint and Prettier for code analysis and formatting

How to use ESLint and Prettier for code analysis and formatting

Andrew Baisden on June 16, 2022

ESLint and Prettier are pretty much the two most popular tools when it comes to doing code analysis and formatting in a developer's codebase. They ...
Collapse
 
esamalsawah profile image
Esam Alsawah

Awesome !
Thank you alot

Collapse
 
throughahaze profile image
through.a.haze

package.lock.json

Did you mean package-lock.json?

Collapse
 
andrewbaisden profile image
Andrew Baisden

Thanks yes you are correct! I fixed it cheers!

Collapse
 
rukundob451 profile image
Benjamin Rukundo

Awesome read

Collapse
 
dmutoni profile image
Denyse

A great master piece

Collapse
 
andrewbaisden profile image
Andrew Baisden

Thanks so much!

Collapse
 
kissu profile image
Konstantin BIFERT

Always nice to have an ESlint + Prettier configuration indeed, cannot live without it myself.

Collapse
 
andrewbaisden profile image
Andrew Baisden

Agreed!

Collapse
 
sadullah profile image
Sadullah TANRIKULU

Excellent thanks

Collapse
 
gulshanaggarwal profile image
Gulshan Aggarwal

Good one, Andrew!

Collapse
 
killerkvothe117 profile image
Kosi Iyiegbu

Nice. I needed this

Collapse
 
nevulo profile image
Nevulo

Nice one Andrew, great read and informative!

Collapse
 
thec0def0x profile image
CodeFox • Edited

Some strange things have been happening recently with me and eslint. Apparently Microsoft’s ESLint in VSC has prettier within it but it keeps conflicting with my prettier formatter. So for example I had an empty class and the formatter would set the curly braces to { } with a space meanwhile eslint prettier would be coming up red telling me to remove the space. It’s been pretty frustrating and happened out of nowhere 🤔

Collapse
 
darktek profile image
DarkteK

I always love the articles posted in this page, although there's one comment in this article that I think is wrong...
"IDEs like Visual studio...", maybe I'm wrong here but, is Visual studio really considered as an IDE? I thought IDEs were some softwares like Phpstorm or Eclipse.. But no VSC or Sublime text... Am I wrong?

Collapse
 
andrewbaisden profile image
Andrew Baisden • Edited

If you do a google search for is vscode an ide you will get mixed results. Some developers say that it is and others disagree. It could be debated for hours like React vs Vue 😅

I'm just going to say that it is because when you add all of those extensions it becomes even more feature rich but I understand that everybody has a different opinion 😄

Collapse
 
shinigami92 profile image
Shinigami

If you have more complex eslint configs, feel free to use github.com/Shinigami92/eslint-defi... to get auto completion and jsdocs

Collapse
 
sidak profile image
gursidak_singh

cool

Collapse
 
f1lt3r profile image
F1LT3R • Edited

How to set this up without using plugins for prettier, but just using your own customer prettier/eslint config?