Prettier vs ESLint: What’s The Difference?

Except for disagreements about the superiority of their favorite text editor, there’s little that inspires arguments among developers more readily that code style. Whether it’s the K&R vs. ANSI brace wars or JavaScript’s semicolon rebels, developers often believe in the inherent rightness of their favorite style. There is also a contingent of developers who, weary of the debate, declare with an equal stridency that code style is an idiosyncratic and subjective decision not worth arguing about.

While much code style debate and tinkering is a form of bikeshedding, code style does matter, especially in projects with teams of developers. Consistently styled codebases are easier to read, manage, and edit, which allows server hosting clients to iterate more quickly and deploy more often. Developer Nicholas C. Zakas uses music groups as an analogy:

“I liken the situation to a group of musicians trying to form a band. Each one comes in believing that their way of doing things is best (their “method” or “process”). The band will struggle so long as everyone is trying to do their own thing … Unless everyone is on the same page, you aren’t going to accomplish much.”

Many projects use style guides to enforce consistency. ESLint and Prettier are tools that can be used to help developers maintain a consistent style. While there is some crossover in functionality between ESLint and Prettier, they can fruitfully be used together to create consistent and fewer buggy codebases.

Prettier

Prettier is an opinionated code formatter. If you never want to worry about code formatting again, install Prettier in your editor and it will take care of formatting for you. Prettier creates an abstract syntax tree from your code and uses it to write new code formatted according to a set of rules. That’s all it does.

The aim of Prettier is to put an end to arguments about code style. Developers don’t have to think about style while they’re writing code, they don’t have to comb through inconsistent codebases looking for “mistakes”. They write the code, Prettier formats it.

ESLint

ESLint is the most popular JavaScript linter, a tool that analyzes code for errors, which can include stylistic errors but also coding errors that lead to bugs. While Prettier will do little to stop you making coding mistakes, ESLint can be a huge help in this regard.

For example, ESLint will warn if a developer uses a variable without declaring it first. Or if a developer uses “bind” when it’s not necessary. With Prettier, your original code formatting is completely lost — it doesn’t care what you think your code should look like, it just makes it conform to a set of rules. ESLint will let you know what it thinks is wrong and, with its –fix option do something about it, but it isn’t as simple a fire and forget process as Prettier.

Using Prettier with ESLint

Prettier and ESLint complement each other, but they can also conflict when they disagree about style rules. I strongly recommend that developers use both. The Prettier project has a guide to integrating Prettier with ESLint to make sure there are no conflicts and a guide on how to integrate Prettier with your text editor.

Dedicated Server Special

Take advantage of our Double RAM offer on the E3-1230v2 4 x 3.30GHz+HT server! Only $134.95 per month. Managed and Unmanaged options available at checkout.

GET STARTED
  • Nawawish Samerpark

    Thanks!