How to Format Code Automatically on Save in VS Code with Prettier

Nothing breaks the flow of coding like messy formatting. One file uses tabs, another uses spaces, brackets wander, and every code review turns into an argument about style instead of logic. Prettier solves this by reformatting your code automatically, and VS Code can run it every time you save. Set it up once, and every file you touch comes out clean and consistent without you thinking about it.

This guide shows how to install Prettier, make it your default formatter, turn on format on save, and adjust the handful of settings that control how the result looks.

Quick Answer

To format code automatically on save in VS Code with Prettier, install the Prettier – Code formatter extension, then open Settings, set Editor: Default Formatter to Prettier, and turn on Editor: Format On Save. From then on, pressing Ctrl+S reformats the file instantly. You can fine-tune the style with a .prettierrc file in your project.

Step 1: Install the Prettier Extension

1. Open the Extensions view with Ctrl+Shift+X.
2. Search for Prettier and install the one named Prettier – Code formatter by Prettier, which has tens of millions of installs.
3. For team projects, also install Prettier as a project dependency with npm install --save-dev prettier, so everyone and every tool uses the same version.

The extension handles the editor side, while the project dependency pins the exact Prettier version. That pairing prevents the annoying situation where your files change style simply because a teammate’s editor updated. Prettier’s own page on editor integration explains how the extension and the command-line tool work together.

Step 2: Make Prettier the Default Formatter

VS Code can have several formatters installed, so you must tell it which one wins:

1. Open Settings with Ctrl+, and search for Default Formatter.
2. Set Editor: Default Formatter to Prettier – Code formatter.
3. Alternatively, right-click inside any code file, choose Format Document With…, pick Configure Default Formatter, and select Prettier there.
4. Test it with Format Document (Shift+Alt+F) on a messy file and watch it tidy up.

If you work with several languages, you can set a different default per language using settings like [javascript] blocks, but Prettier covers JavaScript, TypeScript, HTML, CSS, JSON and many more, so one default usually serves everywhere.

Step 3: Turn On Format On Save

Now connect formatting to the save action:

1. In Settings, search for Format On Save and tick Editor: Format On Save.
2. Optionally, also enable Format On Paste if you paste a lot of code from elsewhere.
3. Save a deliberately messy file and confirm it snaps into shape.

In settings.json the result looks like this:

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

One setting deserves care: editor.formatOnSaveTimeout. On very large files Prettier may need more time than the default allows, and formatting silently skips. Raising the timeout slightly fixes mystery cases where small files format but huge ones do not, an issue that overlaps with the ones in our guide on why Prettier is not formatting your files even though it is installed.

Step 4: Control the Style with a .prettierrc File

Prettier is opinionated, but a few options are configurable. Create a file named .prettierrc in your project root:

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

These control semicolons, quote style, indent size, trailing commas and the line length at which code wraps. Because the file lives in the project, every teammate and every editor picks up the same rules automatically, and the command-line tool respects them too. Keep the file small; the point of Prettier is to end style debates, not move them into a config file.

Step 5: Stop Other Tools from Fighting Prettier

If files seem to format twice, or the style flips back and forth, another tool is probably also formatting on save. Common culprits are a second formatter extension set as default for a specific language, or ESLint configured with its own formatting rules. The standard peace treaty is to let ESLint handle code-quality rules and Prettier handle layout, using the eslint-config-prettier package to switch off any ESLint rules that conflict. The VS Code settings documentation on user and workspace settings explains where language-specific overrides live if a single language misbehaves.

Common Mistakes to Avoid

• Installing Prettier but never setting the default formatter. The extension alone changes nothing until VS Code knows to use it.
• Enabling format on save in workspace settings only. It will work in one project and mysteriously not in others.
• Expecting unsupported files to format. Prettier does not format every language; unsupported files simply stay as they are.
• Mixing tabs and spaces settings elsewhere. If another extension re-indents on save, the file can bounce between styles.

Step 6: Make the Whole Team Format the Same Way

Format on save only delivers its full value when every contributor uses it. A project where half the team formats and half does not produces noisy diffs, because unformatted files get rewritten the first time someone else touches them. Three habits prevent that:

• Commit the .prettierrc file and a .prettierignore file to the repository so the rules travel with the code.
• Add an .editorconfig file or workspace settings with editor.formatOnSave enabled, so VS Code turns the feature on automatically for anyone who opens the project.
• Pin Prettier in package.json with npm install --save-dev prettier so every machine runs the same version and produces identical output.

Many teams also run Prettier in their build pipeline with a check command, which fails the build if a file is not formatted. That safety net catches code edited in other editors or merged through the web, and it keeps the repository consistent even when someone forgets to save properly.

What About Files Prettier Cannot Format?

Prettier covers the web stack and several other languages, but not everything. For unsupported languages, set a different default formatter just for that language using a language-specific settings block, for example [python], while leaving Prettier as the global default. Format on save then uses the right tool for each file automatically, and nothing about your setup feels inconsistent. If a file type has no formatter at all, saving simply leaves it unchanged, which is harmless; the feature only acts where a formatter exists.

One more reassurance for the cautious: formatting changes only the layout of your code, never its meaning. Prettier does not rename variables, reorder logic or remove anything; it adjusts whitespace, line breaks and punctuation placement within safe limits. That makes format on save safe to enable even in the middle of a busy project, although committing one pure-formatting pass first keeps later diffs easy to read.

Conclusion

Format on save with Prettier is a five-minute setup with a permanent payoff: install the extension, set it as the default formatter, tick Format On Save, and add a small .prettierrc so the whole team shares one style. From that moment, formatting stops being a chore you remember and becomes something the editor quietly does for you on every save.

Frequently Asked Questions

Why does format on save work in one project but not another?

Probably because the setting lives in that project’s workspace settings, or the other project has a language-specific formatter override. Check the workspace .vscode/settings.json and any [language] blocks.

Do I need Prettier installed with npm as well as the extension?

For personal use the extension is enough, since it bundles its own copy. For shared projects, installing the same Prettier version with npm guarantees every machine formats identically.

How do I format only part of a file?

Select the lines, right-click, and choose Format Selection. Prettier reformats just that range, which is useful when you do not want a whole legacy file rewritten at once.

Can I stop Prettier from formatting certain files?

Yes. Create a .prettierignore file in the project root and list files or folders the same way as a .gitignore. Build output and generated files are good candidates.

What is the keyboard shortcut to format manually?

Format Document is Shift+Alt+F on Windows and Linux, and Shift+Option+F on macOS. It uses the same default formatter as format on save.