DEV Community

Cover image for ESLint vs Prettier: The Great Debate for Your Codebase
Athreya aka Maneshwar
Athreya aka Maneshwar

Posted on

ESLint vs Prettier: The Great Debate for Your Codebase

Let’s face it: JavaScript and TypeScript developers love to argue about tools.

Tabs or spaces? Semicolons or not? And now, the age-old (in JavaScript years) question: Should I use ESLint, Prettier, or both?

Here’s a friendly guide to help you make sense of the madness, with a sprinkle of humor and a whole lot of dev-friendly insight.

Meet the Contenders

ESLint: The Detective

ESLint is your overachieving teammate who not only spots bugs but also gives unsolicited advice about your code style.

It’s a static code analysis tool that ensures your code is functional and follows the rules (your rules, of course).

Image description

Prettier: The Beautician

Prettier is like that friend who’ll fix your messy hair without asking you how you like it.

It’s opinionated, ruthless, and all about formatting your code to look clean and consistent.

You might not agree with all its decisions, but at least it’s consistent!

What They Do

Feature ESLint Prettier
Report code errors Yes No
Automatically fix code errors Yes No
Add custom rules/options Yes No
Formatting Yes Yes
Opinionated configurations Optional Yes

Key Difference:

  • ESLint is Sherlock Holmes: it’ll catch that sneaky unused variable or accidental global scope declaration.
  • Prettier is Marie Kondo: it’ll declutter your code but doesn’t care if there’s a bug.

Image description

Why Prettier Exists

Prettier was born because formatting debates were consuming valuable time and energy.

Should there be a space after the if keyword? Should line lengths be 80 or 100? Prettier says, “Shut up and let me handle it.”

It reprints your entire codebase in a consistent way, making bikeshedding over spaces and tabs a thing of the past.

The trade-off? Less configurability—you’re stuck with what Prettier thinks is best. (Spoiler: it’s usually fine.)

But ESLint Also Formats… Right?

Yes, but here’s the thing:

  • ESLint’s formatting rules can clash with Prettier.
  • Maintaining both code-quality rules and formatting rules in one tool is… messy.

ESLint devs themselves have admitted that combining linting and formatting isn’t ideal.

Enter Prettier: a dedicated formatter that takes the formatting burden off ESLint’s shoulders.

Should You Use Both?

The Golden Rule

Use Prettier for formatting. Use ESLint for code quality.

How to Make Them Play Nice

  1. Install eslint-config-prettier. This disables ESLint’s formatting rules that might conflict with Prettier.
  2. Add it to your .eslintrc config:
   {
     "extends": [
       "eslint:recommended",
       "plugin:prettier/recommended"
     ]
   }
Enter fullscreen mode Exit fullscreen mode
  1. Let Prettier format your code, and let ESLint catch the real bugs.

Do You Even Need Prettier?

If you:

  • Hate long debates about formatting rules ✓
  • Want consistent code across your team ✓
  • Use a highly opinionated ESLint config (like Airbnb) and are happy with its formatting — Maybe not.

Prettier shines in larger teams where consistency is king. But if you’re working solo or already happy with ESLint’s formatting, you might get away without it.

Comparison Table: ESLint vs Prettier

Aspect ESLint Prettier
Nature A static code analysis tool and linter for JavaScript, focused on identifying code issues A code formatter designed to make code more readable and consistent
Primary Purpose Ensures code quality and detects potential bugs Focuses purely on consistent code formatting
Configuration Highly customizable; rules are defined in a .eslintrc config file Minimal customization; enforces standard formatting rules with optional tweaks in .prettierrc.json
Integration Works with popular IDEs, offering real-time feedback and auto-fixing of linting issues Easily integrates with IDEs to format files automatically on save

Final Thoughts

  • ESLint is your code’s safety net. It catches bugs, enforces best practices, and ensures quality.
  • Prettier is your peacekeeper. It stops arguments over formatting and keeps your code looking spick and span.

TL;DR

Use Prettier to format. Use ESLint to analyze. And if you’re ever in doubt, remember: tools are here to make your life easier, not harder.

Choose what works best for your team and your sanity.

Happy coding, and may your linting and formatting be ever in harmony!


I’ve been working on a super-convenient tool called LiveAPI.

It’s designed to make API documentation effortless for developers.

With LiveAPI, you can quickly generate interactive API documentation that allows users to execute APIs directly from the browser.

Image description

If you’re tired of manually creating docs for your APIs, this tool might just make your life easier.

Top comments (19)

Collapse
 
jankapunkt profile image
Jan Küster

There is also Biome if you want both in one tool

Collapse
 
lovestaco profile image
Athreya aka Maneshwar

Will check it out

Collapse
 
perisicnikola37 profile image
Nikola Perišić • Edited

Good article.
I think the best option is to implement automatic run of prettier and eslint with Husky.

By doing this, with each commit, you ensure that you have formatted and error-less code pushed to the remote codebase.

Collapse
 
lovestaco profile image
Athreya aka Maneshwar

Thankyou :)

Yes, Husky is just great, forgot to mention it in the article, I've also got a few pre-commit hooks set.

Collapse
 
ansellmaximilian profile image
Ansell Maximilian

Thanks for sharing!

Collapse
 
lovestaco profile image
Athreya aka Maneshwar

:)

Collapse
 
grantdotdev profile image
Grant Riordan

Mod: Nice useful article - I think you make a great point about picking what is right for you. I think too many times in development teams try and fit their project to a mould or what is “the right” way to do something but this doesn’t always mean the “best” way for your team.

Collapse
 
lovestaco profile image
Athreya aka Maneshwar • Edited

Thank you :)

Collapse
 
hkp22 profile image
Harish Kumar

Great article! 🎉 ESLint and Prettier are invaluable tools for maintaining a clean, consistent, professional codebase. They help catch errors early and ensure that your team follows the same coding style, which is a big win for collaboration.

For anyone who wants to take their setup to the next level, I’ve created a couple of tutorials that you might find useful:

1️⃣ ESLint, Prettier, and VSCode Setup for JavaScript Code Linting & Formatting – This video walks you through setting up ESLint and Prettier with VSCode, helping you streamline your JavaScript code linting and formatting workflow.

2️⃣ Git Hooks + Husky + Lint-Staged = Automate code linting & formatting – Here, I show how to set up Git Hooks with Husky and Lint-Staged to automate linting and formatting every time you commit your code.

These tools, when combined, can supercharge your development process and make your codebase more robust and easier to maintain. I’d love to hear your thoughts or any additional tips you might have! 🚀

Collapse
 
lovestaco profile image
Athreya aka Maneshwar

Thanks for the share :)

Collapse
 
keyru_nasirusman profile image
keyru Nasir Usman

This is very nice artice👌
I can code without prettier but I don't feel safe when I am coding without ESLint. I use both but if i have to choose one, i will go with ESLint.

Collapse
 
lovestaco profile image
Athreya aka Maneshwar

Thank you :)

Collapse
 
rcls profile image
OssiDev

These days I often grab Biome instead of these two separate tools that I have to configure differently.

Collapse
 
peshale_07 profile image
Peshal Bhardwaj

Great.

Collapse
 
lovestaco profile image
Athreya aka Maneshwar

Thanks

Collapse
 
tomasdevs profile image
Tomas Stveracek

Nice read! I like how you broke down the topic—it’s helpful for anyone deciding how to set up their codebase. Thanks for sharing!

Collapse
 
lovestaco profile image
Athreya aka Maneshwar

Thanks a lot :)

Collapse
 
ali_hamza_f2c2f043ec912fb profile image
Ali Hamza

Our fleet has premium cars available for instant booking.Corporate travel

Some comments may only be visible to logged-in visitors. Sign in to view all comments.