How to Enable Format on Save in VS Code

VS Code Format on Save runs the active formatter whenever a file is saved. Enable Editor: Format On Save in Settings, then confirm that the file's language has a built-in or extension-provided formatter.

Without Format on Save, run Format Document manually with Shift+Alt+F on Windows, Ctrl+Shift+I on Linux, or Shift+Option+F on macOS.

VS Code documents the current built-in languages and save triggers in its formatting guide.

Enable format on save

Open your settings and search for "format on save". Check the box next to Editor: Format On Save.

Or add this line to your settings.json:

json

{
  "editor.formatOnSave": true
}

Save the file. The setting takes effect immediately. The next time you save any supported file, it is formatted automatically.

How to verify it is working

Make a deliberate formatting mistake in a file: remove indentation from a line or add extra spaces between words. Save the file with Ctrl+S (Windows/Linux) or Cmd+S (macOS).

If the formatting corrects itself, format on save is working. If nothing happens, check the sections below.

Built-in formatters

VS Code ships with default formatters for these languages:

• JavaScript and TypeScript
• JSON and JSONC
• HTML
• CSS, SCSS, and Less

If you only work with these languages, you do not need any extensions. Format on save works out of the box.

Other languages need a formatter supplied by an extension. The required extension depends on the language and formatting tool.

Install a formatter for other languages

For languages supported by Prettier, its open-source Marketplace extension is one option. It is published by Prettier with the identifier esbenp.prettier-vscode.

Prettier can use a bundled formatter or a project's local Prettier package. In an untrusted workspace, it does not load local or global modules or plugins. Review the official Marketplace listing before installing, especially if the project uses plugins.

Python formatting is provided by separate formatter extensions rather than the Microsoft Python extension itself. Microsoft currently publishes the autopep8 and Black Formatter extensions, as described in the official Python formatting guide.

Choose a specific formatter

When you have multiple formatters installed for the same language, you can choose which one runs on save.

Right-click inside a file of that language, select Format Document With..., and then select Configure Default Formatter.... Choose the formatter you want VS Code to use for that language.

To set it permanently, add this to your settings.json:

json

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Replace javascript with your language ID and the extension ID with whichever formatter you want.

Enable format on save for specific languages only

If you prefer to keep the global setting off and only format certain file types, use language-specific overrides:

json

{
  "[typescript]": {
    "editor.formatOnSave": true
  },
  "[json]": {
    "editor.formatOnSave": true
  }
}

Only TypeScript and JSON files will be formatted on save. All other file types are left alone.

What to try if it does not work

No formatter is available

If you see the message "There is no formatter for this file type installed" when saving, you need to install a formatter. Check the Extensions view for a formatter that supports your file's language.

Format on save does nothing

Check that editor.formatOnSave is not overridden by workspace settings. Open the Settings editor and look at both the User and Workspace tabs. If the Workspace tab shows it as disabled, that overrides your user setting.

Also check for a conflicting Editor: Format On Save Mode setting. If it is set to modifications, only lines you changed are formatted. Set it to file to format the entire file:

json

{
  "editor.formatOnSaveMode": "file"
}

The wrong formatter runs

If a different formatter runs than the one you want, you likely have multiple formatters installed. Set Editor: Default Formatter for that language to lock in your preference.

Prettier conflicts with another formatter

If formatting and save-time code actions produce competing edits, first choose one default formatter for the language. Then review that formatter's Output channel and your editor.codeActionsOnSave entries. Remove or disable only the overlapping save action, and keep a copy of the previous setting so you can restore it.

Next steps

Pair format on save with auto save so your code saves and formats without any manual steps. For a broader set of productivity settings, see 25 best VS Code settings for productivity.