Become a more productive dev with Prettier

When coding, there are lots of things to keep in mind at the same time. You must keep in your mind the structure of the JSON response of the API you are working on, and the name of that ES6 function that you just googled. And oh you must also remember error handling, and to use immutable variables.

And if that wasn’t enough you must also remember to format the code properly. It should follow the code guidelines of the project you currently work on. Not keep the lines too long.

Programming is a tough mental exercise.

But there is help to get. You can outsource some of the hard work to tools.

Prettier is a really awesome NPM tool that autoformats the code for you! Formatting code after some well-defined ruleset is a perfect thing to let a tool do for you. So you can focus on the creative parts of programming that we cannot let a machine do.

What is the difference between Prettier and the autoformat in your IDE?

If you’re using VS Code, IntelliJ or any other modern IDE or code editor then you already have autoformat of your code built-in. So why would you need prettier?

If you work as a single person on a project, and you are happy with how the IDE formats your code then maybe you can stop reading 😊. But most of us work on larger projects with multiple devs. Either in a company or in an open-source project. The problem then is that many times devs have different editors that format the code differently. This leads to many different problems. The first is that you get non-consistent formatting of the codebase. It makes it a little bit more difficult to read the code.

Another problem this leads to that’s even worse is that every time someone makes a PR and you look at the diff in GitHub 90% is just formatting changes. It’s super hard to find where the actual code change is.

Prettier fixes this.

With Prettier, you have one single rule set that is consistently across all IDEs working with the codebase.

Prettier is opinionated

I don’t know how many hours or days I’ve been in teams discussing if we should use single or double-quotes. Tabs or spaces. We get caught up in these details that don’t really matter much and it steals lots of time. It’s just bike-shedding.

Another strong selling point for Prettier is that its ruleset is pre-defined. It’s an opinionated tool. Prettier has had all the discussions about tabs vs. spaces, etc so you don’t have to. And you have to take it or leave it*. And even though not everyone is 100% happy with the format I think it’s totally worth it.

* ok, there are some config options if you really want to.

How to install

Prettier is installed as an NPM package from the command line:

npm install --save-dev prettier

Prettier comes as a CLI. Formatting a file can be done as easy as this:

npx prettier src/pages/index.js

You can use the CLI to format your code from the terminal, but usually, you configure your IDE/text editor to use it or configure pre-commit or pre-push hooks.

How to set up Editor/IDE keybindings

The most common way to use Prettier is to configure your IDE to format the code for you either with a keybinding or on save. How to configure it depends on which editor you use. There is a long list of editor integrations on the prettier website where there are links on how to set it up for your editor.

I recommend configuring your editor to run prettier when you save. That way you can write your code and don’t think about indentation because you know that whenever you’ll hit that CMD+s it will look beautiful automatically!

How to configure a pre-commit/pre-push hook

The problem with editor integration is that you cannot force them upon your team members. No matter how nicely you all agree on having them, there will always be that guy how forgets to turn it on.

To solve this problem you can enable pre-push or pre-commit hooks. That way, Pretter will be run automatically whenever anyone pushes the code to Github.

The way I prefer to enable these hooks is to use husky

First, install the dev-dependency:

npm install husky --save-dev

Then you configure husky in your package.json file. Husky has its own key called husky. Pretty easy to remember, huh?

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "prettier —-write",
      "pre-push": "npm run test",
    }
  }
}

In the file, you can define both pre-commit hooks and pre-push hooks. Describe what command to run as the value. In this example, I run Prettier as a pre-commit hook, and I run the tests as a pre-push hook.

Final words

Prettier is the tool I miss most when coding in other languages. I have been trying out both Clojure and Dart recently. And I always Google for “Prettier for language x” but it rarely exists. I can’t live without it anymore.

• prettier
• javascript