There’s often a bit of confusion around ESLint and Prettier and each of their roles. ESLint and Prettier do very different things.
ESLint
ESLint helps developers find problems with their code and improves consistency.
Prettier
Prettier handles formatting in an opinionated way so you don’t have to think about it anymore. You can use them separately or together which is what I recommend.
Why use Prettier?
- It frees your brain to think of more important things
- Improved consistency across the team
- Reduces time spent doing code reviews
It frees your brain to think of more important things
It takes time to think about how to make your code look pretty and consistent and where to put line breaks, commas, and which quotes. Instead of wasting time thinking about formatting, you can use your cycles to think of more important things.
Improved consistency across the team
Since Prettier is opinionated and doesn’t give many configuration options the formatting will look consistent from one developer to the next. Once you have learned how Prettier formats it makes reading another developers’ code easier.
Reduced time spent doing code reviews
This is one of my favorite points and has a few different reasons that are not obvious. The consistency does make the code review process faster. Code reviews become faster also due to less time spent horizontally scrolling for lines that are too long to fit in the browser. However, one of the reason’s that is not easy to see is that there’s often an issue when working with another developer that uses a different formatter that might be fixing a bug in one function but the formatter causes the whole page to be modified according to the developer’s preference. Then in the code review process when looking at the code diff it can be difficult to know what changes the developer made and what changes the formatter made. When using Prettier the code diffs become just about the changes the developer made and code reviews become faster.
When using Prettier the code diffs become just about the changes the developer made and code reviews become faster.
I don’t like how Prettier changes my formatting
Often developers new to Prettier complain it’s too heavy-handed with formatting. However, they will often prefer that their coworker’s code is formatted with Prettier.
