Prettier on save in VSCode gives your JavaScript, TypeScript, HTML, and CSS files consistent formatting with zero manual effort. This setup reduces style debates in teams and keeps your diffs focused on logic rather than whitespace.
With the right configuration, Prettier can automatically format your code every time you save a file. Below is a quick reference table that compares three common approaches to running Prettier in the editor.
| Trigger Mode | When Format Runs | Control Level | Risk of Conflicts |
|---|---|---|---|
| on save | Immediately when you save a file | Editor-driven, fast feedback | Low if Prettier is default formatter |
| on type | As you type, after short pause | Continuous but may interrupt typing | Medium, can feel intrusive |
| on format document | Manual command or keybinding | Full manual control | Low, explicit action |
Enable Prettier Extension in VSCode
First, install the official Prettier extension from the marketplace. This extension registers Prettier as a code formatter that VSCode can call at different trigger points, including on save.
After installation, confirm that Prettier appears in the list of available formatters by opening the Command Palette (Cmd+Shift+P or Ctrl+Shift+P) and running Format Document With. You should see a Prettier option alongside other tools if multiple formatters are installed.
Configure Settings for Format on Save
Turn on format on save by updating your VSCode settings. You can do this through the UI by opening Settings, searching for format on save, and checking the relevant option, or by editing settings.json directly.
It is best practice to explicitly set the default formatter to Prettier so other plugins do not take over on save. Combine this with language-specific overrides to avoid formatting markdown, image diffs, or configuration files that Prettier cannot parse safely.
Editor Integration and Language Support
VSCode uses built-in language support and installed extensions to determine whether Prettier can format a given file. For JavaScript, TypeScript, JSON, CSS, SCSS, Less, and HTML, Prettier provides stable, reliable results when the language server is active.
If Prettier does not run on a specific file type, check whether the language extension ships with a formatter or whether another plugin is overriding the default action. Disabling conflicting formatters and adding explicit language mappings often resolves these issues.
Workspace and Project Configuration
Use a .prettierrc or prettier.config.js file at the project root to define rules such as tab width, single quotes, and trailing commas. This makes formatting consistent across machines and ensures that Prettier on save applies the same style to every collaborator.
Pair this with an .editorconfig file to align basic editor behavior like indent style and charset. When Prettier settings and VSCode settings are aligned, on save formatting becomes a seamless part of your workflow rather than a source of merge conflicts.
Best Practices and Final Guidance
Treat Prettier on save as a quality gate that keeps your codebase clean without requiring manual formatting sessions. Consistent automation reduces cognitive load and makes code reviews more efficient.
- Install the official Prettier extension and set it as the default formatter in VSCode.
- Enable format on save through settings UI or settings.json with language specific fallbacks.
- Use a shared .prettierrc and .prettierignore at the project root for consistent results across machines.
- Combine Prettier with ESLint rules to avoid formatting related lint errors and conflicts.
- Exclude generated files, minified bundles, and non-code assets from automatic formatting.
Optimize Your Editing Experience
With stable configuration and clear team agreement on style rules, Prettier on save becomes a low friction habit that improves code readability. Your editor handles the details so you can focus on logic, tests, and features that ship value.
FAQ
Reader questions
Why does nothing happen when I save a file even after enabling format on save?
Check that the Prettier extension is enabled, that it is set as the default formatter, and that the file type is supported. Conflicts with other formatter extensions or missing language support can prevent the on save action from running.
Can I exclude certain files or folders from Prettier on save?
Yes, add glob patterns to the Prettier ignore file (.prettierignore) and configure VSCode settings to avoid applying format to generated code or large legacy bundles that would otherwise slow down saves.
How do I prevent Prettier on save from breaking my existing linting rules?
Integrate Prettier with your linter by using eslint-plugin-prettier and eslint-config-prettier. This ensures that formatting rules from Prettier replace conflicting lint rules, so on save formatting does not trigger new lint errors.
Is it safe to use format on save in large projects with many contributors?
Yes, as long as everyone shares the same Prettier configuration and editor settings. On save formatting reduces style noise in pull requests and keeps diffs focused on functional changes rather than whitespace.