Why format your code?#

I never realized until after I added Prettier just how much more pleasant development can be when the code is formatted for you.

Prior to Prettier, I (and most of the developers I work with) had been writing JavaScript and formatting each file as we saw fit.

While this didn't negatively impact our app or our users, it did cause a lot of inconsistency in our code.

Some developers would declare variables in one long, unbroken line, while others declared each new variable on a new line. Some files would have functions with almost no spaces or new lines, and others would have lots of extra lines in between lines of code. Or, the greatest and most divisive debate of all, the one over which wars have been waged and relationships ruined: some devs would use tabs whereas others would use spaces.

It was chaos. But then, a better way emerged: Prettier. A code style guide to end the stylistic debates and free up developers to think about more important things than code formatting.

And it got even easier with the VSCode Prettier extension. So easy, I almost don't have to think about it at all; that is the moment when I truly fell in love with code formatting, personally.

This lesson will take us on a quick tour of what Prettier is and how it works, then we'll set it up so that it will format on save or even when you change focus from one file to another in the project.

What is Prettier?#

Prettier is an opinionated code formatter with support for 12+ programming languages and growing, including JavaScript and JSX. It works by removing all of the original styling from a project file and ensuring all the newly outputted code conforms to a consistent style.

Here are a few reasons code formatting with Prettier benefits the whole team.

• It dramatically reduces the amount of time spent nit-picking over personal code style preferences.

• It helps newcomers to the JavaScript language or project get up to speed quicker and debug issues caused by syntax errors faster.

• It makes writing code easier — now there's no need to spend mental energy formatting code.

• It's easy to adopt — the Prettier team worked hard to use the least controversial coding styles and went through many rounds of fixing all the edge cases to make getting started polished and painless.

• It can clean up an existing codebase without being a massive undertaking.

And, luckily, Prettier is simple to add to a JavaScript project and almost as easy to set up with the VSCode extension so that it formats with next to no effort on our part. Let's get to it.

Set up Prettier in the Hardware Handler app#

Now that we've gotten an idea of what Prettier is and why it can benefit everyone on the team, from the newest developers to the experienced seniors, let's set it up in our application.

Sample code zip file

If you need a fresh copy of the sample app before we start to add Prettier and ESLint, it's available here.

Although Prettier can be run from the command line, through global installation, or via the Prettier API, we'll set it up so that any developer can rest assured knowing their Prettier is consistent with the project.

We're going to download it to the project as a dependency, so everyone using it has the same version in addition to having the same config files for it.

The first thing you'll want to do is open up the app in your IDE of choice and, in a new terminal window, cd into the client/ folder. From there, type the following command to save the "prettier" dependency to your package.json.

yarn add prettier

Now when you check your package.json, you should see "prettier" in between the "concurrently" and "react" dependencies.

package.json

    "concurrently": "^6.0.0",

    "prettier": "^2.2.1",

    "react": "^17.0.2",

With Prettier installed locally, we can move on to creating the file giving Prettier our preferred code formatting rules to follow.

Create a .prettierrc file#

At the root of the project, create a new file called .prettierrc.

This file can be written in either JSON or YAML syntax.

You can configure Prettier in so many ways.

Prettier is flexible and smart enough that either type of file, even with no file ending like .json or .yaml, will be correctly interpreted and used within the project.

I prefer JSON syntax (YAML indentation is a little finicky for my tastes), so that's what I'm going to use to define my code formatting rules.

Prettier ships with a handful of options, which I strongly encourage you to explore to see if any really speak to you, but I keep my .prettierrc file simple, and I'm still very pleased with the results it gives me.

Here's the Prettier config I end up including in almost every project I work on. Please copy this code, add it to the new .prettierrc file, and we'll go through each one of these configuration options.