How to Set Up Format on Save with Prettier in VS Code

Consistent formatting keeps diffs clean and stops pointless arguments about spacing, which matters even more when an AI assistant writes chunks of your code. Prettier formats your files automatically against one shared style. With format on save turned on, you never think about it again. This guide wires it up end to end.

What you need

• VS Code installed
• A JavaScript, TypeScript, CSS, or similar project open
• Internet access to install an extension

Step 1: Install the Prettier extension

Open the Extensions view with Ctrl+Shift+X. Search for Prettier - Code formatter, published by Prettier. Click Install. This is the extension that lets VS Code run Prettier on your files.

Step 2: Set Prettier as the default formatter

Open settings.json (Command Palette, then Open User Settings (JSON)) and set the default formatter to Prettier, then turn on format on save. The value esbenp.prettier-vscode is the extension's id.

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

Step 3: Add a project config (optional)

To pin the style for a whole team, add a .prettierrc file to the project root. Anyone who opens the project gets the same rules. Without this file Prettier uses sensible defaults.

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

Step 4: Test it

Open any supported file, mangle the spacing on purpose, then save with Ctrl+S. Prettier instantly reformats the file to the correct style. If nothing happens, check the next tip.

Result

Every time you save, your code snaps to a single consistent style. Manual spacing fixes and formatting nitpicks in code review disappear.