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