How to Format Code with Prettier in Visual Studio Code

When writing code, it’s often hard to focus on keeping it visually neat. Indentation, single vs. double quotes, and semicolons can feel insignificant when you're deep in thought about the complex logic of modern web applications.

This is where the Prettier Code Formatter comes in. Prettier is a customizable code formatter that supports multiple languages and integrates with most code editors. In this article, we’ll look at how to use Prettier in Visual Studio Code. For other integrations and installation methods, refer to the Prettier documentation.

Setting Up the Workspace

We assume you already have Visual Studio Code installed and a code file that needs formatting. Here’s a sample snippet:

const name = "Hostman";
const service ={first: name
}
console.log(service);
const printName = (fName) => {
console.log(`This is ${fName}`)
}
printName ('Hostman');

This code has typical issues: inconsistent quotes, missing indentation, and misplaced line breaks. If you run it, it will execute just fine since these details don’t matter to JavaScript. However, for a human reader, this code is hard to follow.

What we need to do is install an extension to automatically add indentation, semicolons, and other elements that make the code more readable.

1. Open the Extensions tab in the VS Code menu (or press Ctrl + Shift + X on Windows).

2. Search for Prettier. This VS Code extension has over 20 million installs.

3. Click Install to add it to your editor.

There’s an alternative method. Press Ctrl + P to open the Quick Launch panel and run the following command:

ext install esbenp.prettier-vscode

This command will install the Prettier extension directly.

Now you can use the tool for quick code formatting in VS Code.

Auto-Formatting

Say you get a Slack message from the project manager — the updated Hostman Cloud Server page needs to go to production urgently. Everything’s ready and working, but the code formatting is lacking, and your team won’t be thrilled about that. Luckily, you now have a VS Code extension that can fix these issues quickly and painlessly.

1. Press Ctrl + Shift + P to open the Command Palette.

2. Find and run the Format Document With command.

3. Select Prettier from the dropdown list.

Your code will be formatted with the necessary spaces, indentation, line breaks, and consistent quotes. Here’s an example:

const name = "Hostman";
const person = { first: name };
console.log(person);
const sayHelloLinting = (fName) => {
  console.log(`Hello linting, ${fName}`);
};
sayHelloLinting("Hostman");

This tool is extremely convenient, supporting quick setup for different languages. For example, if you run auto-formatting on a Python file, you’ll be prompted to install autopep8. This utility automatically formats Python code according to PEP 8, the official Python style guide, using pycodestyle to identify areas needing formatting. Autopep8 can fix most issues flagged by pycodestyle.

To avoid the need for manual formatting each time, enable auto-formatting on save in Prettier:

1. Open Settings (on Windows, press Ctrl + ,).

2. Use the search bar to find Editor: Format On Save.

3. Check the box to enable formatting on save.

That’s it! Now you won’t need to run formatting manually.

Setting Up Custom Formatting Rules

Developers can customize their formatting rules in two ways:

1. Adjust the configuration directly in the extension’s settings.

2. Create a separate configuration file.

In the extension settings, you can change common parameters, such as the number of spaces for indentation or whether to add a semicolon at the end of each line. This approach is quick, but the configuration will only apply to your personal setup. To share the configuration with your entire development team, you should create a separate configuration file that enforces consistent formatting rules across Visual Studio Code.

A .prettierrc configuration file can use extensions like .yml, .yaml, .json, .js, or .toml. Here’s a simple example in JSON format:

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": false
}

For other basic options, refer to the Prettier documentation.

Conclusion

Prettier is a tool that significantly speeds up development by automatically applying formatting rules, whether default or developer-customized.

After creating a configuration file, your team will have a unified set of formatting rules. This allows everyone to work on the next task without worrying about code style. Thanks to Prettier, all those commas and indentations can be fixed in just a few clicks during the refactoring stage, letting you focus on development with peace of mind.