/ How to

How To Configure and Set Up Prettier Code Formatter in VS Code

Introduction

Prettier is an extremely popular open-source code formatter that helps developers format their code quickly and easily. It supports many programming languages like JavaScript, TypeScript, CSS, HTML, JSON, GraphQL, Markdown, YAML and more.

The key benefits of using Prettier include:

  • Consistent Code Styling: Prettier takes your code and reprints it with its own rules and styles for how code should look. This enforces a consistent coding style and prevents debates over styles.
  • Improved Readability: Code formatted with Prettier is highly readable and easy to understand. This makes collaboration easier.
  • Automatic Formatting: With editor integrations, Prettier can format your code automatically on save. This saves you time and effort.
  • Focus on Coding: With formatting automated, developers can focus their efforts on actual programming rather than worrying about code style.

In this comprehensive guide, we will walk through how to setup and configure Prettier code formatter in Visual Studio Code (VS Code) to take advantage of its powerful capabilities.

Installing Prettier Extension in VS Code

The first step is to install the Prettier extension in VS Code which provides tight integration with the code editor.

Here are the simple steps to install it:

  1. Open VS Code
  2. Click on the Extensions icon in the left sidebar
  3. Search for “Prettier – Code formatter”
  4. Click Install
  5. Click Reload to activate the extension

Once installed, Prettier will be ready to use in VS Code.

Configuring Prettier Settings

While Prettier ships with good default formatting options, you may want to customize the settings to match your project’s guidelines.

Here are some ways to configure Prettier settings:

1. Editor Settings

You can update formatting settings in VS Code’s user or workspace settings JSON files. For example:

"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.semi": false,
"prettier.tabWidth": 4

Note: Editor settings will be overridden if a Prettier config file like .prettierrc is present in the project.

2. Prettier Config File

For consistent Prettier setup across your team, it’s best to use a .prettierrc file with rules like:

{
  "semi": false,
  "tabWidth": 4,
  "printWidth": 100  
}

Supported config formats include .prettierrc (JSON/YAML/TOML), .prettierrc.js, prettier.config.js.

3. .editorconfig

You can also use .editorconfig to configure formatting. Prettier will read spacing/indentation rules from this file.

Enabling Format on Save

To automatically format code on saving the document, enable “Format on Save” in VS Code settings:

"editor.formatOnSave": true

Now Prettier will format code every time you save the file!

Manual Formatting

You can also manually format the entire file or just a selection:

  • Format Document – Shift + Alt + F
  • Format Selection – Select code and press Ctrl + K Ctrl + F

Customizing Language Configuration

The Prettier extension has default support for common languages like JavaScript, CSS, JSON etc.

But in case your language is not supported out of the box, you may need to update user settings to customize the language configuration.

For example, to add support for Vue Single File Components:

"[vue]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Troubleshooting Issues

Here are solutions for some common issues when using Prettier:

  • Code is not formatted on save: Ensure editor.formatOnSave setting is enabled and default formatter is set to Prettier.
  • Incorrect formatting: Use a Prettier config file instead of editor settings.
  • Prettier conflicts with other extensions: Disable other formatting extensions like Beautify.

Conclusion

Configuring Prettier formatter in VS Code is quick and simple. With useful features like automatic formatting on save and code linting, it can greatly boost your productivity and code quality.

The key takeaways are:

  • Install the Prettier extension
  • Configure formatting rules
  • Enable format on save option
  • Use Prettier config file for consistent styling
  • Customize language configurations if needed

Prettier offers a seamless VS Code integration so you can format code easily and collaborate with your team effectively.

Related Posts