How to Format Code Automatically in VS Code

On this page

1. Prepare to format code automatically in VS Code #

Open a folder through File → Open Folder, then create index.html in the Explorer. Use a practice folder before changing formatting rules for an existing team project. The goal is to understand what a save does before hundreds of files start changing.

Paste this original example. The inconsistent spacing is intentional:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
<title>Workshop signup</title>
</head>
<body>
      <main>
<h1>Workshop signup</h1>
   <p>Bring a laptop and a question.</p>
<a href="mailto:[email protected]">Ask about a place</a>
    </main>
</body>
</html>

The example uses a reserved example email address. It doesn't send anything when you save the file. Formatting should change whitespace and indentation, while the title, heading, paragraph and link remain the same.

2. Confirm the language and run Format Document #

Check the Language Mode in the lower-right status bar. It should say HTML. If it says Plain Text, select it and choose HTML.

Open the Command Palette with Ctrl+Shift+P on Windows or Linux, or Cmd+Shift+P on Mac. Run Format Document. The basic editing documentation confirms that VS Code includes formatters for HTML, CSS, JavaScript, TypeScript and JSON.

You should see the nested elements line up more consistently. The exact whitespace depends on the active formatter and settings, so compare the content as well as the appearance: Workshop signup and the mail link should still be present. If nothing changes, settle manual formatting before enabling a save rule.

3. Choose the HTML formatter explicitly #

If several formatters are installed, run Format Document With… from the Command Palette, then choose Configure Default Formatter… and select the built-in HTML formatter. Microsoft's HTML documentation describes the built-in formatter and its configuration options.

One file type should have one intentional default. A formatter extension might be correct for your existing project; this practice example uses the built-in one so you can see the editor's behavior without introducing a dependency.

For HTML, the built-in formatter's identifier is vscode.html-language-features. You'll use it in the project settings below. Don't assign that formatter to PHP, Python or another language it doesn't handle.

4. Save HTML settings with the project #

Create a .vscode folder in the practice project, then a settings.json file inside it. Add:

{
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features",
    "editor.formatOnSave": true,
    "editor.formatOnSaveMode": "file",
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.detectIndentation": false
  },
  "html.format.indentInnerHtml": true
}

This is an original configuration for the exercise. It sets HTML formatting to the whole file and asks for two spaces, including the inner head and body. Disabling indentation detection keeps the deliberately messy example from overriding that spacing choice.

The settings documentation explains language-specific settings and precedence. A workspace setting is attached to the folder; a user setting affects other projects too. I'd keep a team's formatting rules with the project after agreeing on them, so every contributor can see what saves are expected to do.

If settings.json already exists, merge these properties into it. A JSON object cannot have a second copy of the same key with an unambiguous meaning. Preserve the unrelated settings.

5. Change one line and save #

Return to index.html, add extra indentation before the paragraph and press Ctrl+S or Cmd+S. The line should return to the selected indentation.

Now close and reopen the file. Check that the formatted text is saved on disk, not merely displayed differently. The unsaved indicator in the tab should be gone. Repeat with the link line if you want to check another nested element.

Use an explicit save for this check. That gives you a clear trigger and avoids confusing automatic saving with the formatting command while you troubleshoot. Once this works, choose the Auto Save behavior that fits your workflow.

6. Review the changes before applying the rule widely #

For an existing Git project, inspect the diff after enabling formatting. A few indentation changes are expected; rewritten content, removed attributes or unrelated generated files deserve attention before you commit.

Keep code-formatting changes separate from a behavior change when you can. A reviewer trying to understand a bug fix shouldn't have to sort through the entire file's new indentation at the same time. For larger repositories, follow the formatter and configuration already selected by the maintainers.

Known formatting problems and fixes #

Files outside source control don't format on save

A February 2025 VS Code report describes ignored files failing to format with modificationsIfAvailable; the reporter's workaround was editor.formatOnSaveMode: "file". Use whole-file mode for this practice project. Modified-lines modes depend on source-control information and aren't necessary here.

Prettier still runs when another formatter is selected

A January 17, 2026 Prettier report described formatting through a code action despite the selected default. A fix merged January 21 made that action respect the default unless explicitly enabled. Update the extension and inspect editor.codeActionsOnSave, especially source.fixAll.prettier, if two tools seem to run.

A language-specific rule overrides the visible general setting

VS Code's settings documentation confirms that a language-specific rule can override a general one. Check the HTML block in user and workspace settings. A global checkbox alone doesn't tell you the final value for the file you are editing.

Troubleshooting table #

Variations for related work #

Format only selected lines

Select the portion you want to adjust and run Format Selection. This helps when the surrounding file follows an existing style you don't want to change. The formatter must support selection formatting; not every language tool does.

Use different rules for another language

Add a separate language block for CSS or JavaScript and select that language's formatter. Copying the HTML formatter ID into every block won't work. For Python, PHP and other languages, consult the chosen extension's official setup instructions before enabling save actions.

Keep one legacy file unchanged

If a project's formatter supports an ignore file, use its documented exclusion mechanism. Otherwise disable format on save for that editing task and review changes manually. Don't create a second formatter just to work around one file's style.

Completion checklist #

• The practice file is saved as index.html and recognized as HTML.
• Format Document works before you rely on saving.
• One default formatter is selected for HTML.
• The workspace settings have the intended spacing and whole-file mode.
• An explicit save fixes the deliberately uneven indentation.
• The file's text and link remain intact, and any Git diff is reviewed.

Next steps #

Use the free code editor shortlist if you want to compare editing workflows, or read VS Code vs VSCodium before changing distributions. The VS Code listing, VSCodium listing and VS Code alternatives provide other starting points.

Featured illustration: Webindexly.