Prettier: An Opinionated Code Formatter, Excellent for Open Source
As part of my work with Outreachy on Jaeger, an open source distributed tracing system, we’ve recently added Prettier to the Node.js client library. 🎉
Why Prettier is great for open source
Prettier is an opinionated code formatter. In practice, this means that Prettier leverages what computers are good at — parsing and analysing code — to enable smoother, easier collaboration in software development.¹
This is fantastic for many teams and projects, but especially for open source, where contributors are usually dispersed, often strangers, and sometimes new to the project. With Prettier, individuals who are not familiar with the project’s style guidelines have one less thing to worry about when making a pull request. And owners, maintainers, and collaborators don’t have to enforce a style guide using nits in code reviews. At the same time, Prettier makes code formatting consistent across an entire codebase, increasing legibility.
Prettier makes formatting computers’ work.
More about Prettier
Prettier is an opinionated code formatter that supports JavaScript (including ES2017), JSX, Flow, TypeScript, JSON, CSS, Less, SCSS, styled-components, Markdown, and GraphQL.
Prettier guarantees consistency in formatting by parsing your code into an abstract syntax tree (AST) and pretty-printing the AST.
All of your original styling choices are gone² and your code is pretty-printed to a standard style, with some options that you and your team can decide on and preconfigure.
What does Prettier mean for you?
It means you can write stylistically idiosyncratic code and Prettier will fix it for you.
Hate writing semicolons in JavaScript? Can’t remember what statements are affected by the rules of automatic semicolon insertion? No problem, leave out all semicolons and Prettier will handle them for you.
Hard to decide what is the ‘best’ way to format a long argument list? Prettier will format that argument list beautifully for you.
Want to press Enter less often and instead write your code in one long line? Your teammates won’t be annoyed, because Prettier will prettify your code before they ever see it.
There is a huge amount of formatting decisions you’ll never need to think about again — that’s true for the individual developer and for the team. The background noise of constant small decisions about formatting is gone.
When I first started learning JavaScript, involved discussions on tabs versus spaces still happened. My favourite joke about those conversations is by Richard Westenra:
‘Personally, I prefer to increase the spacing for each successive indent according to the Fibonacci sequence.’
Fine. Each individual on your team, or contributor to your open source project, can write their own stylistically idiosyncratic code and Prettier will pretty-print it before anyone else has to read it. Or code review it.
You can ensure that PRs are prettified before they are reviewed, thus removing the need for nits regarding styling or formatting.
Prettier is a fantastic productivity win for developers, teams, and especially open source projects, where contributors are usually dispersed, often strangers, and sometimes new to the project. Prettier not only makes code formatting consistent across an entire codebase, it makes reading and reviewing each other’s code easier. It makes teamwork smoother. And it simplifies at least one aspect of contributing to open source.
Prettier is great because it is an elegant technical solution to what is above all a human problem of communication around code. That you and your team will find Prettier’s default style, with limited options, acceptable and even beautiful is something that Prettier’s contributors have worked hard to ensure. Christopher Chedeau gave a fascinating talk on the subject at React London 2017.³
Hopefully, this blog post has inspired you to use Prettier in your next project, or add it to an existing repository. Installing and using Prettier in a project is generally a straightforward process, and Prettier’s documentation is exemplary.
[1] Auto-formatting is not a new idea in software. James Long, who created Prettier, was inspired by Reason’s refmt tool. His article on Prettier is fantastic.
[2] Some original styling is preserved when practical — see in the docs how Prettier handles empty lines and multi-line objects.
[3] I’m very grateful to Red Badger, who organised React London 2017, for providing me with the opportunity to attend the conference. I first heard of Prettier during React London 2017 and have happily used it ever since.
