VS Code Prettier Setup — Format on Save in VS Code (Plus Browser Option)

VS Code + Prettier is the most popular code formatting setup in JavaScript development. Format-on-save means your code is automatically cleaned up every time you hit Ctrl+S — no manual formatting steps, no formatting debates in code review.

This guide covers setting up Prettier in VS Code from scratch, plus the browser formatter for when you're working outside VS Code and need quick formatting without any setup.

Step 1 — Install the Prettier Extension in VS Code

1. Open VS Code and press Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (Mac) to open Extensions
2. Search for "Prettier - Code formatter"
3. Install the extension by Prettier (the one with 40M+ installs)

That's enough to format manually. For format-on-save, continue to the next steps.

Step 2 — Enable Format on Save

Two options:

Option A — Settings UI:

1. Press Ctrl+, (Windows/Linux) or Cmd+, (Mac) to open Settings
2. Search for "Format on Save"
3. Check the box for "Editor: Format On Save"
4. Search for "Default Formatter" and set it to "Prettier - Code formatter"

Option B — settings.json (recommended for teams):

Open your project's .vscode/settings.json and add:

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

Committing this file means everyone who opens the project in VS Code gets format-on-save automatically.

Sell Custom Apparel — We Handle Printing & Free Shipping

Step 3 — Create a .prettierrc Config File

Without a config file, Prettier uses defaults (2 spaces, double quotes, semicolons). To match your team's preferences, create a .prettierrc in your project root:

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

Commit this file so all teammates use the same settings. The options map directly to what you set in the browser formatter — you can verify the output by matching settings and comparing results.

VS Code Manual Formatting Shortcut

To format the current file without format-on-save:

• Windows/Linux: Shift+Alt+F
• Mac: Shift+Option+F

To format selected code only:

• Windows/Linux: Ctrl+K, Ctrl+F
• Mac: Cmd+K, Cmd+F

If the shortcut doesn't work, check that Prettier is set as the default formatter for your file type. Some languages (Python, Java) may have a different formatter configured by default.

When to Use the Browser Formatter Instead of VS Code

VS Code Prettier is great for your main machine. Use the browser formatter when:

• You're reviewing code in a GitHub PR without checking it out
• You're on a machine without VS Code or Node.js installed
• You're on a Chromebook, iPad, or tablet
• You want to format a quick snippet from email or chat without opening an editor
• You need to format code for a document or presentation

Open the free browser formatter, match your project's settings, and get the same output as VS Code Prettier — without any installation. Both use the same Prettier engine under the hood.

Frequently Asked Questions

Why isn't Prettier formatting my file when I save?

Check three things: (1) Is the Prettier extension installed and enabled? (2) Is "Format on Save" checked in settings? (3) Is Prettier set as the default formatter for this file type? Some languages require per-language formatter settings.

How do I make VS Code use tabs instead of spaces?

In your .prettierrc: set "useTabs": true. In VS Code settings, also set "editor.insertSpaces": false for consistency. Note: most JS/TS projects use spaces; tabs are more common in Go and PHP projects.

Should I install Prettier globally or per project?

Per project (npm install --save-dev prettier). This ensures everyone uses the same version and the version is tracked in package.json. The VS Code extension uses the locally installed Prettier if it exists, falling back to its bundled version.

Can I use Prettier with ESLint in VS Code?

Yes. Install eslint-config-prettier to disable ESLint's formatting rules, and set up the ESLint VS Code extension alongside Prettier. They run in sequence: Prettier formats, ESLint fixes logic issues. See Prettier's official docs for the exact setup.