Formatting with Prettier

A short example of how we began using the Prettier code formatter

Posted by Thomas Atkins on September 26, 2018

We first started using Prettier on our team a few months ago for one of our primary projects. This was kind of a trial run to see if we liked it. After a while of having it automatically format the code on our main project, I began to miss it when I needed to make changes in our other projects.

The value was quite clear. With automatic formatting, there are no more time consuming discussions about formatting: spacing, semi-colons, line breaks, etc. There are not a lot of options to customize formatting with Prettier since it is an opinionated formatter. That’s a good thing. Once the team agrees on a few formatting choices, it is just done automatically.

Plus, we can have it set up to format on each commit so the repo is consistently formatted. Code reviews become easier to read, without a lot of extra formatting differences obscuring the real point of the pull request.

The documentation is excellent. There are great explanations for the ‘what’, ‘why’ and ‘how’ of Prettier. They also document several possibilities to get it integrated into your project, so you will probably find something to meet your project’s needs.

Setup is very simple. I’ll go over the configuration we used.

npm install --save-dev --save-exact prettier

  • The save-exact is intentional as even minor versions will change the formatting.

npm install --save-dev husky pretty-quick

Husky is there for the pre-commit git hook, so that all files committed to the repo can be formatted automatically. By adding this as a dependency, everyone developing on the project will have the same git hook. Nice!

Pretty Quick is used to run Prettier on only changed and staged files. It is much quicker than formatting the whole project each time. And it would also allow you to apply changes gradually across the project if you wish.

To use these tools we added these scripts to our package.json:

  "scripts": {
    "precommit": "pretty-quick --staged",
    "postcommit": "git update-index -g",
    "pretty": "prettier --write \"./**/*.{js,jsx,json}\"",
  • I also found I needed the postcommit script, which wasn’t on the Prettier docs. When using the command line for git commits, this wasn’t necessary. But our team mostly uses the IntelliJ IDEA editor, and without this postcommit the IDE wouldn’t recognize the current git state after husky and pretty-quick did their thing.

  • The pretty npm script isn’t strictly necessary, but I found it handy to run Prettier on the entire project at once.

  • Prettier can also format css, less, sass, and md files. So you might be interested in including other file types in the glob pattern that I used above.

Next, set up the configuration. There are already some sensible defaults, that may just work for your tastes. So you might not even need this step. But you may find you want to customize with the options Prettier provides. I chose to configure with just a .prettierrc.js file. You can also use json or yaml files if you prefer.

Our current configuration:

module.exports = {
    printWidth: 120,
    singleQuote: true,
    trailingComma: 'es5',
    semi: false,
    tabWidth: 4,
    bracketSpacing: false,
    jsxBracketSameLine: true,

Pretty straight forward. There are a few more customizable options, that are well documented.

I also threw in a .prettierignore, which works as you’d expect - ignores specified files from being formatted.

If you are already using eslint for code quality rules, there are modules that make that integration possible. Prettier can handle your formatting rules, while eslint can continue to apply your existing code quality rules. This is documented on their site as well.

Also there looks to be great integration with the popular VS Code and Atom editors, which makes it easy to save and format as you go.

So really that’s about it. It came down to a couple of installs, a few npm scripts in the package.json, and an optional config file. In the end I’m really happy with the results and impressed at how easy it is to set up.

You should give it a try, I think you’ll like it!

posted on September 26, 2018 by
Thomas Atkins