How To Format Code with Prettier in Visual Studio Code

Formatting code consistently is a challenge, but modern developer tools make it possible to automatically maintain consistency across your team’s codebase.

In this article, you’ll se up Prettier to automatically format your code in Visual Studio Code.

For demo purposes, here’s the sample code we will be formatting. If you’re picky about code formatting, you’ll pick up on some obvious misteps immediately.

  • mix of single vs double quotes
  • the first property of the person object should be on it’s own line
  • the console statement inside of the function should be indented
  • you may or may not like the optional parenthesis surrounding the parameter of the arrow function

Installing the Prettier Extension

To work with Prettier in Visual Studio Code, you’ll need to install the extension. Search for Prettier – Code Formatter. You can see the extension below. If you’re installing it for the first time, you’ll see an “install” button instead of the “uninstall” button you see on mine.

The Format Document Command

With the Prettier extension installed, we can now leverage it to format our code. We’ll work more on this later, but to start, we can use the Format Document command.

To open the command pallette, you can use Command **+ Shift + P** on Mac or Control **+ Shift + P** on Windows. In the command pallette search format, then choose** Format Document**.

You may then be prompted by to choose which formatter to use. To do so, click the Configure button.

Then choose Prettier **- Code Formatter**.

Your code is now formatted with spacing, line wrapping, and consistent quotes.

This also works on CSS files. You can turn something like this:

into this:

Now let’s look at doing this automatically.

Formatting Code on Save

So far, you’ve had to manually run a command to format your code. Instead, you can choose a setting in VS Code to have your files automatically formatted when you save. This also ensures that code doesn’t get checked to version control that’s not formatted.

To change this setting, use Command+, on macOS or Control+, on Windows to open the Settings menu. Then search for Editor: Format on Save and make sure it is checked:

Once this is set you can write your code and it will be automatically formatted for you when you save your file.

Changing the Prettier Configuration Settings

Prettier does a lot of things for you by default, but you can also customize the settings.

Open the settings menu. Then, search for Prettier. This will bring up all of the settings that you can change:

Here are a few of the most common settings.

  • Single Quote – choose between single and double quotes
  • Semi – choose whether or not to include semi colons at the end of lines.
  • Tab Width – how many spaces you want a tab to insert.

The downside to using the built-in settings menu in VS Code is that it doesn’t ensure consistency across developers on your team.

Creating a Prettier Configuration File

If you change settings in your VS Code, someone else could have an entirely different set of settings in theirs. You can establish consistent formatting across your team by creating a configuration file for your project.

Create a new file called .prettierrc.extension with one of the following extensions.

  • yml, yaml, or json
  • js
  • toml

Here’s an example of a simple configuration file using JSON:

For more specifics on the configuration files, check out the Prettier Docs. After creating one of these and checking it in to your project, you can ensure that every team member follows the same formatting rules.

Conclusion

Prettier ensures consistency in your code formatting and makes the process automatic.