Skip to main content

How to install the Prettier Extension

Introduction​

This tutorial is for developers working in Visual Studio Code who want to ensure consistent code formatting across projects using Prettier. You’ll learn how to install the Prettier extension and configure VS Code to format files automatically on save.

This setup helps you avoid manual formatting, ensures your code aligns with project standards, and works well with shared linting configurations like wl-linters.

By the end of this tutorial, you'll have Prettier running automatically in your editor — no terminal commands or extra effort needed to format files.

Step 1: Install the Prettier extension​

In this step, you’ll add Prettier to your editor via the VS Code marketplace.

Install from Extensions tab​

  1. Open Visual Studio Code.
  2. Navigate to the Extensions tab (Ctrl+Shift+X or Cmd+Shift+X).
  3. In the search bar, type Prettier - Code formatter.
  4. Click Install on the extension by Prettier (esbenp.prettier-vscode).

Alternatively, you can install it via command line:

code --install-extension esbenp.prettier-vscode

Once installed, Prettier will be available to format supported files manually and automatically — but you’ll still need to enable format-on-save explicitly.

Step 2: Enable Format on Save​

Turn on Format on Save in VS Code settings​

  1. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P).
  2. Search for and select Preferences: Open Settings (UI).
  3. In the Settings tab, search for Format On Save.
  4. Check the box for Editor: Format On Save.

Now, whenever you save a file, VS Code will format it automatically using the default formatter.

Set Prettier as your default formatter​

To ensure VS Code uses Prettier instead of another formatter:

  1. Still in Settings, search for Default Formatter.
  2. Set it to esbenp.prettier-vscode.

You can also do this by adding the following to your workspace or user settings:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

You can edit your settings file directly by selecting Preferences: Open Settings (JSON) from the Command Palette.

Further Reading​