Prettier

Prettier is an “opinionated code formatter”. It re-formats our code so that it conforms with community standards.

For example, suppose you write the following bit of code:

function myFunction( theFirstParameter, theSecondParameter, theThirdParameter )
{
  return {hi: 5}
}

This code is perfectly valid, but it's formatted in an unconventional manner. When we run this code through Prettier, we get the following output:

function myFunction(
  theFirstParameter,
  theSecondParameter,
  theThirdParameter
) {
  return { hi: 5 };
}

When I first started using Prettier, I found it a bit annoying. I liked my personal conventions around spacing and formatting. Why was this tool erasing all of my personality?!

Over time, however, I grew to love it. I now consider it an absolutely indispensable tool. I never want to write code without Prettier.

I don't agree with 100% of the choices that Prettier makes, but I adapted surprisingly quickly; after a couple weeks, I stopped noticing the things I didn't like.

Prettier has become universal in the React ecosystem and beyond. Most teams use Prettier. Most of the code you'll see online has been formatted with Prettier.

Even though most developers have some gripes with its formatting choices, it's become so popular because of a simple truth: consistent formatting is wonderful, even when it's not perfectly aligned to your preferences.

When I write code nowadays, I don't worry about formatting at all. I can be as sloppy as I want, trusting that Prettier will do all the sweeping and mopping for me.

Especially in team settings, this is amazing. No more code reviews asking you to add a space here or insert a semi-colon here. It removes a whole class of annoying nitpick feedback.

Prettier can even help you spot problems. More on that in a bit.

Prettier is an extremely flexible tool. There are lots of ways to use it, including as an NPM script. But my favourite way is at the editor level, to automatically format on save.

Assuming you're using VS Code, the first step is to install the official VS Code extension. You can do this by toggling the "Extensions" tab (Ctrl + Shift + X), and searching for “Prettier”.

Next, we need to set Prettier as our default formatter. Open the “Settings” tab by selecting Preferences -> Settings, and search for “formatter”. Select Prettier from the dropdown:

You can run the formatter anytime by running the “format” command. The shortcut for this operation is shift + option + F on macOS, shift + alt + F on Windows.

There's an even easier option, though. Rather than explicitly running the “format” operation, you can instruct VS Code to format automatically when you save the document.

Here's the setting you need to enable for this to work:

I strongly recommend this setting. It makes life much easier, once you get used to it.

Also, fun fact: The code playgrounds in this course platform are set up this way! You can use Prettier to format by focusing the text editor (click inside the code area) and hitting your platform's “Save” shortcut (Ctrl + S). Try it out below: the code should become much more readable:

You can also click the little magic wand (Format code using Prettier) to format with Prettier.

In general, Prettier follows its own conventions, and there isn't much you can do about it. There are, however, some exceptions.

Prettier allows you to configure things like:

• Whether to use single (') or double (") quotes.
• Whether to add semi-colons to the end of statements.
• Whether to add spaces inside brackets ({ hi: 5 } or {hi: 5}).

You can view a full list of configuration options in the Prettier documentation. You can tweak these options in the VS Code settings; search for “prettier” to filter all relevant settings.

Here are the settings I personally use:

{
  "prettier.printWidth": 70,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "es5"
}

Most of the time, Prettier helps readability by enforcing a consistent style. Sometimes, though, Prettier makes things harder to read.

For example, I prefer to format nested ternaries like this:

const result = someVal < 0
  ? 'negative'
  : someVal > 100
    ? 'big'
    : 'normal';

Prettier will force it all onto one line, if it fits:

const result =
  someVal < 0 ? 'negative' : someVal > 100 ? 'big' : 'normal';

Fortunately, we can selectively disable Prettier on a line-by-line basis with a special comment:

// prettier-ignore
const result = someVal < 0
  ? 'negative'
  : someVal > 100
    ? 'big'
    : 'normal';

The // prettier-ignore comment will tell Prettier not to mess with the formatting of the very next line (and any subsequent lines that are part of the same statement).

This is an escape hatch. It isn't meant to be used on every other line. If you catch yourself disabling Prettier multiple times per file, it suggests that you're being a bit too stubborn with your own preferences, rather than deferring to Prettier.

To give you an idea: in the codebase for this course platform (~800 JavaScript/TypeScript files, ~50k lines of code), I use prettier-ignore about 30 times.

When I write code, I'm constantly hitting the "Save" shortcut to format my code.

Sometimes, however, the code won't be formatted. The "Save" shortcut will appear to have no effect.

This usually means there's a syntax error. If Prettier can't format the code, it means that the code isn't valid JavaScript.

As a result, I discover bugs more quickly, because I notice right away when Prettier doesn't fire. If you hit the "Save" shortcut every 60 seconds, you'll always know that you messed up within the last minute.

Prettier can help you find the issue as well. Often, I'll start by deleting a big chunk of code, and trying to format. If it works, it means the issue is within the chunk I deleted. If it doesn't, I delete another chunk and try again.