How to use Prettier in VS Code | Formatting Code

In this tutorial we will learn how to use Prettier to automatically format code in VS Code.

I previously wrote an article about how to configure VS Code for web development, which you may find helpful if you’re new to VS Code.

Getting started

Prettier can automatically format code and provide more consistent results if you are working on a team.

There are a few prerequisites to follow along with this tutorial. First, we need to have an updated version of VS Code installed. Additionally, we will need to have the Prettier VS Code extension installed as well.

const memberCat = "Basic"
    const uName = 'Jordan';
const readUser = (memberCat, uName) => {
        let someArray = ["Yellow", 'Orange', "Green", "Blue", 'Pink'];
let properties = { "User": 'random1234', "hobbies": { 'tennis': "expert" }, "Active": "Yes" };
    `Hello, ${uName}! Welcome back. You have a ${memberCat} group member.`
    readUser(memberCat, uName);

You might notice that the code example above is difficult to read, this is a result of formatting mistakes, such as mixing quote types, missing indentation and maximum line length.

Installing the VS Code extension

You can search for available extensions inside VS Code using the Extensions View ( Ctrl+Shift+X ). Search for “Prettier – Code formatter” in the search box of the Extension view.

This will return a list of available extensions with that search term in the title or metadata.

Click the Install button in the extension’s details page.

How to format code

There are a few different ways to format your code using the Prettier VS Code extension. Let’s begin by learning how to manually format code.

Format entire document

We can manually format the code contained in an entire document, by using the Command Palette. Open the Command Palette using Ctrl+Shift+P then search for the Format Document command.

Format selection

Additionally, we can format a selection of the code. Open the Command Palette using Ctrl+Shift+P then search for the Format Selection command.

Format on Save

So far, we have only looked at manually formatting code using Prettier. Next, let’s see how we can automate this using the Format on Save setting.

Now that the Format on Save option is selected in the VS Code User settings, your code will automatically be formatted every time you save!

Prettier config file

If you are working on projects collaboratively, many teams will have formatting guidelines in order to produce consistent code. In order to make this happen, you can create a Prettier configuration file.

Configuration support in Prettier is pretty deep, but for now, let’s start by creating a basic config file. The configuration settings will be defined using JSON key value pairs, in a file called  .prettierrc 

Now that you have a Prettier configuration file, you can include it in version control and share it among your teammates. Lastly, Prettier configuration file support is very flexible, if you would like to learn more please read their docs here.

Wrap up

We’ve seen how Prettier can save time and provide more consistent results when working with others. As such, it allows you to concentrate on writing the actual code. Make sure to leverage automatic code formatting in your next project by setting up Prettier.

Categorized as Beginner