How to Auto-Format Code in VS Code

To format code in VS Code, open the file and run Format Document from the Command Palette or editor context menu. To format only highlighted code, choose Format Selection. To format each time you save, set "editor.formatOnSave": true in settings. If multiple formatters are available, choose the one you want through Format Document With… → Configure Default Formatter….

VS Code includes formatters for JavaScript, TypeScript, JSON, HTML, and CSS. For many other languages, install a formatter extension and select it as the default for that language. This guide covers the editor commands, settings, Python and Go examples, scope precedence, troubleshooting, and how to keep formatting predictable across a project.

1. Format a file or a selection

1. Open a file in the language you want to format.
2. To format the full file, open the Command Palette and run Format Document. You can also use the editor context menu. The documented shortcut on Windows and Linux is Shift+Alt+F; use the platform equivalent on macOS.
3. To format only part of the file, select the code and run Format Selection from the Command Palette or context menu.
4. Review the changes in the editor or source control diff, then save.

The whole-document command is the simplest way to confirm that a formatter is available. If VS Code asks which formatter to use, configure a default before relying on format-on-save. Formatter behavior depends on the language and extension: selection formatting requires support for formatting a range.

2. Choose a default formatter

When more than one formatting provider can handle a file, VS Code needs to know which one should run. Run Format Document With…, choose Configure Default Formatter…, then select the intended provider. The choice can be scoped to one language in settings, which prevents a Python formatter from becoming the formatter for every file type.

For example, this configuration selects the Black Formatter extension for Python:

{
  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter"
  }
}

The formatter identifier must match an installed provider. The Python extension documentation uses ms-python.black-formatter as its example. For another language, install an appropriate formatter extension and select it through the same command; do not assume that an extension’s display name is its settings identifier.

3. Turn on format on save

To format every supported file on save, open User Settings (JSON) or the workspace settings file and add:

{
  "editor.formatOnSave": true
}

This is a global editor setting. If you want save formatting only for Python, combine it with the language block and formatter choice:

{
  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter",
    "editor.formatOnSave": true
  }
}

Language-specific blocks can be used for other language IDs when a formatter is available. For example, a TypeScript-only setting has this shape:

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

To configure a project for everyone who opens it, put the settings in .vscode/settings.json at the workspace level. To configure only your editor, use User Settings. A project-level default formatter can make the intended choice visible and consistent for collaborators, provided they install the corresponding extension.

4. Configure formatting triggers separately

VS Code has separate settings for different automatic formatting moments:

Setting	When it runs	Useful detail
editor.formatOnSave	When saving a file	Most common choice for consistent saved files.
editor.formatOnType	As you type	Can adjust code while editing; formatter support varies.
editor.formatOnPaste	After pasting	Requires the formatter to support range formatting.

These triggers are off by default in the general formatting workflow. Turn on only the behavior you want. If paste formatting does not happen, check range-formatting support; a formatter that handles whole documents may not be able to format an arbitrary pasted range.

5. Python: Black formatting and Ruff import organization

For Python, install the formatter extension you intend to use, select it as the default formatter for Python files, and enable format-on-save in the [python] block. Black is one documented choice. A minimal project setting is:

{
  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter",
    "editor.formatOnSave": true
  }
}

Formatting and import organization are distinct operations. If you use Ruff for import sorting, configure it through editor.codeActionsOnSave as an additional save action rather than expecting a formatter to reorder imports automatically. Keep the formatter and import action choices aligned with the repository’s existing tooling so editor saves do not create surprising changes.

If format-on-save appears to do nothing, first run Format Document manually. This separates a missing or misconfigured formatter from a save-trigger configuration issue. Then check that the Python language mode is active, the intended extension is installed and enabled, and the language-specific settings use the correct formatter identifier.

6. Go: gopls formatting

Go formatting is provided through gopls, and the Go extension runs formatting on save by default. You can explicitly select the Go extension as default formatter like this:

{
  "[go]": {
    "editor.defaultFormatter": "golang.go"
  }
}

To disable the Go extension’s save formatting in a workspace or user settings file, use:

{
  "[go]": {
    "editor.formatOnSave": false
  }
}

Language-scoped configuration keeps this choice limited to Go. If a repository relies on the extension’s default behavior, there may be no need to add a setting; add one when the project needs an explicit or different editor policy.

7. JavaScript, TypeScript, JSON, HTML, and CSS

VS Code documents built-in formatting support for JavaScript, TypeScript, JSON, HTML, and CSS. TypeScript also has js/ts.format.* settings for basic formatting customization. Start with Format Document in a file of the relevant language. If a third-party formatter is installed and VS Code presents multiple providers, select and configure the intended default for that language.

For JavaScript or TypeScript projects that also use a formatter extension, check the repository’s configuration and team conventions before choosing an editor default. The editor’s formatter and the command used in continuous integration should produce compatible output; otherwise, a save can create changes that the project’s automated checks later rewrite.

8. Settings scope and precedence

A setting can appear correct in User Settings and still be overridden elsewhere. VS Code applies settings from defaults, user, remote, workspace, and folder scopes, with language-specific settings at their corresponding scopes; policy settings can take precedence. In practice, check these locations when behavior differs between projects:

• User Settings: your general editor preferences.
• Remote Settings: preferences for a remote development environment.
• Workspace Settings: commonly stored in .vscode/settings.json.
• Folder Settings: relevant in a multi-root workspace.
• Language-specific blocks: such as [python] or [go], which override general settings for matching files.

Open the Settings editor and search for formatOnSave or defaultFormatter to inspect the active values. Also inspect the workspace’s .vscode/settings.json. If you are editing a file in a multi-root workspace, check the settings for that folder as well.

9. Troubleshooting common formatting problems

Symptom	Likely cause	What to do
“There is no formatter for…” or nothing changes	No formatter provider is installed, enabled, or available for the file’s language mode.	Confirm the language mode, install or enable an appropriate formatter, then try Format Document again.
VS Code asks which formatter to use	Multiple providers handle the file and no default is configured.	Choose Format Document With… → Configure Default Formatter…; set it globally or in the language block.
Manual formatting works, save formatting does not	editor.formatOnSave may be false or overridden at workspace, folder, or language scope.	Inspect effective settings and the relevant .vscode/settings.json; enable the setting at the scope you intend.
The wrong formatter runs	A different default formatter is configured at a more specific scope, or the intended extension is not selected.	Use Format Document With… and set the desired provider in the matching language block.
Settings show JSON errors	Malformed JSON, such as a missing comma, extra trailing comma, or mismatched brace.	Use Preferences: Open User Settings (JSON) or the Settings editor and correct the highlighted syntax. The default-settings file is read-only; use it as a reference rather than editing it.
Paste or selection is not formatted	The provider supports full-document formatting but not range formatting.	Check the extension’s range-formatting support; use whole-document formatting where range support is unavailable.
Imports remain unsorted after formatting	Formatting and import organization are separate actions.	Configure an import-sorting code action, such as the documented Ruff approach for Python, separately from the formatter.
Formatting changes files differently on two machines	Different extensions or versions, differing project configuration, or different settings scopes.	Align the formatter extension and repository configuration, and inspect workspace settings and the source control diff.

If multiple formatter extensions conflict with a keyboard shortcut, VS Code supports a dedicated keybinding that invokes editor.action.formatDocument.multiple with a formatter identifier. This selects a formatter for that shortcut without changing editor.defaultFormatter.

10. Keep formatting reliable and fast

• Use project configuration: let the repository’s formatter configuration define style, then keep the editor extension consistent with it.
• Limit automatic triggers: format on save is usually less disruptive than formatting while typing. Enable paste formatting only if the chosen provider supports ranges and the behavior suits your workflow.
• Separate responsibilities: formatting, lint fixes, and import organization may be separate operations. Make save actions explicit so you can identify which tool changed a file.
• Review diffs: especially when introducing a formatter to an existing codebase or changing providers. A whole-file style change can create a large diff.
• Check remote behavior: in remote development, confirm that the needed extension is available in the environment where the file is being edited and that remote settings do not override your local choice.

The cited VS Code documentation does not provide a quantitative performance benchmark for formatting. Save-time cost depends on the provider and file or project. If saves become noticeably slow, try manual formatting on a representative file, check whether multiple save actions run, and narrow automatic actions to the relevant language.

11. Or skip the browser setup

If your documentation or workflow also needs screenshots of websites, ScreenshotNeo provides a website screenshot API and MCP server. One GET request returns an image or PDF. For a screenshot of Stripe:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

See the ScreenshotNeo API documentation for the request options. Cookie banners, newsletter popups, and chat widgets are removed before the shot, and each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed; response headers say the page verdict and billing result. An MCP server gives AI agents tools to take screenshots, get page information, and capture PDFs.

The free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000; every feature is available on every plan. Sign up free for 1,000 screenshots a month, with no card.

12. Frequently asked questions

Does VS Code format code automatically by default?

The general format-on-save, format-on-type, and format-on-paste triggers are off by default. Go formatting on save is enabled by the Go extension by default.

Can I format only one language when saving?

Yes. Put editor.formatOnSave in a language-specific block such as [python] or [typescript], and set that language’s default formatter there if needed.

Will the same settings work for every programming language?

The settings pattern is reusable, but each language needs a formatter provider and a valid language identifier. Formatting features such as range formatting also vary by provider.

Why does Format Selection behave differently from Format Document?

Selection formatting asks the provider to format a range. Some providers support whole-document formatting without supporting range formatting, so the selection command or paste formatting may be unavailable.

Should I format imports with my formatter?

Not necessarily. Import organization can be configured as a separate save-time code action, as with Ruff for Python. Check the tooling already used by the project.

Reference documentation: VS Code basic editing and formatting, Formatting Python in VS Code, Go in Visual Studio Code, and TypeScript formatting.