Set Up Prettier
Code formatting, especially when it's set up, so you don't even have to think about it, is the best.
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.
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?#
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 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.
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
Now when you check your
package.json, you should see
"prettier" in between the
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
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
.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.