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
 
gulshanaggarwal profile image
Gulshan Aggarwal •

Good one, Andrew!

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
 
rukundob451 profile image
Benjamin Rukundo •

Awesome read

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
 
f1lt3r profile image
F1LT3R • • Edited

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

Collapse
 
sidak profile image
gursidak_singh •

cool

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