How to Set Up Prettier in VS Code (Step-by-Step)

If you're formatting the same project's files over and over by hand — or pasting them into an online tool every time — it's worth spending five minutes setting up automatic formatting on save. Here's how, in VS Code specifically.

Step 1: Install the Prettier extension

Open the Extensions panel in VS Code (the square icon in the sidebar, or Ctrl+Shift+X / Cmd+Shift+X), search for "Prettier - Code formatter", and install the official extension published by the Prettier team.

Step 2: Set Prettier as your default formatter

Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P), run "Format Document", and if prompted, choose Prettier as the formatter for the file type. To set it as the default for JavaScript permanently, open Settings, search for "default formatter", and set it to esbenp.prettier-vscode.

Step 3: Enable format on save

In Settings, search for "format on save" and check the box. From now on, every time you save a JavaScript file, VS Code will automatically run it through Prettier.

Step 4 (optional): Add a project-level config

If you're working on a team, create a .prettierrc file in your project root so everyone's editor uses the same settings regardless of their personal VS Code preferences:

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

Commit this file to your repository. Anyone who opens the project with the Prettier extension installed will automatically pick up these settings.

Step 5: Ignore files you don't want formatted

Create a .prettierignore file (same syntax as .gitignore) to exclude things like build output or vendored code, so Prettier doesn't reformat files you don't own.

If you're not ready to install anything

You don't need an editor extension to try Prettier's output — the JS formatter on this site uses the same underlying rules and lets you adjust indent size, quotes and semicolons directly in the browser. It's a good way to see what your code will look like before committing to an editor setup. If your project also uses a linter, read ESLint vs Prettier: Do You Need Both? to see how the two work together without conflicting.