VS Code Format & Collapse All: Shortcut Guide (2026)

Two of the most reached-for commands in any VS Code session are format code and collapse all — yet most developers only know one shortcut for each, if that. This guide covers every vscode format code shortcut, how to wire up vscode auto format on save, which formatter extension wins in 2026, and the complete visual studio code collapse all reference including depth-based folding, region markers, and the commands that expand and contract large files in one keystroke. No other guide covers both features together — this is the one to bookmark.

Why Formatting and Folding Matter

Consistent code formatting is one of the highest-leverage practices a team can adopt. According to the VS Code official documentation, the editor ships with built-in formatting support and extensible formatter APIs. The 2024 Stack Overflow Developer Survey confirms Visual Studio Code is used by 73.6% of professional developers — which means formatting and folding habits formed in VS Code propagate across the majority of the industry's codebases.

Poorly formatted code creates two categories of problems. First, cognitive load: a reader scanning inconsistently indented JavaScript or Python must mentally re-parse the structure on every pass. Second, noisy diffs: when a developer reformats a file manually before editing, every whitespace change shows up in the pull request alongside the real change — making comparing two versions of a file much harder than it needs to be.

Code folding solves a different problem — navigation. A 2,000-line module is unreadable at a glance, but collapse all functions to their signatures and you immediately see the public API. Toggle open only the method you need to edit. This is not a cosmetic feature; it is how experienced engineers orient themselves in large codebases — and how they find the difference between what changed and what stayed the same — without losing their place.

The two features are related: a well-formatted file folds cleanly. If indentation is inconsistent, VS Code's folding algorithm may misidentify block boundaries and collapse the wrong regions. Getting formatting right is therefore a prerequisite for reliable folding — which is why this guide covers both together.

Every Format Shortcut in VS Code

VS Code ships with built-in formatting support for a handful of languages (HTML, CSS, JavaScript, TypeScript, JSON) and delegates to installed formatter extensions for everything else. All of these formatters are triggered through the same commands.

Format Document (entire file)

The primary vscode format operation applies the active formatter to the entire open file. The vs code format shortcut is a single chord:

Action	Windows	Linux	macOS
Format Document (entire file)	Shift+Alt+F	Ctrl+Shift+I	Shift+Option+F
Format Selection	Ctrl+K, Ctrl+F	Ctrl+K, Ctrl+F	Cmd+K, Cmd+F
Format Document With… (choose formatter)	Command Palette → "Format Document With"		Command Palette → "Format Document With"
Open Command Palette	Ctrl+Shift+P		Cmd+Shift+P

The format shortcut vscode Shift+Alt+F (Windows) or Ctrl+Shift+I (Linux) is one of the most frequently used keystrokes in any editing session. If it does nothing, the most common cause is either no formatter installed for the current language or a conflict between multiple formatters — see the troubleshooting section below.

Format Selection

To format code in visual studio code for only a highlighted block, select the text first, then use the Format Selection chord. This targeted vscode format code approach is useful when you want to clean up a function without touching the rest of a file that is not yet under a formatter.

The vs code formatter shortcut for selection (Ctrl+K, Ctrl+F) is a two-key chord: hold Ctrl, press K, then press F while still holding Ctrl. Release both keys between presses and the chord will not register.

Format Document With…

When you have multiple formatters installed — for example, both Prettier and ESLint — VS Code may prompt you to choose which one to use, or silently pick one. The "Format Document With…" command in the Command Palette gives you explicit control. You can also set the default formatter per language in settings.json:

// .vscode/settings.json
{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter"
  },
  "[go]": {
    "editor.defaultFormatter": "golang.go"
  }
}

The visual studio format code shortcut always invokes whichever formatter is registered as the default for the active file's language. Knowing how to format code in visual studio code per-language and pinning the default in settings.json eliminates the "multiple formatters" prompt entirely.

How to Set Up Auto Format on Save

Manually hitting the vscode format shortcut before every commit works, but it is easy to forget. Vscode auto format on save eliminates the problem entirely by running the formatter automatically every time you save a file.

Enable format on save globally

Open Settings with Ctrl+, (Windows/Linux) or Cmd+, (macOS), search for format on save, and tick Editor: Format On Save. The equivalent settings.json entry is:

// User settings.json (global)
{
  "editor.formatOnSave": true
}

With visual studio code auto format enabled, pressing Ctrl+S (or Cmd+S) saves the file and immediately formats it. Each vscode format file operation preserves the cursor position after formatting.

Enable format on save per workspace

For team projects, put the setting in .vscode/settings.json at the repository root. Everyone who opens the project in VS Code will automatically get vs code auto format without touching their personal settings:

// .vscode/settings.json (committed to the repo)
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSaveMode": "file"
}

The formatOnSaveMode option accepts two values: "file" (format the whole file, the default) and "modifications" (format only lines changed since the last Git commit). The "modifications" mode is useful in large legacy codebases where reformatting the entire file at once would generate an enormous diff. This granular vs code auto format control helps teams adopt formatting incrementally.

Format on type and format on paste

Two related auto formatter vscode settings are worth knowing:

{
  "editor.formatOnType": true,
  "editor.formatOnPaste": true
}

• formatOnType: Triggers the formatter after you press Enter or another configured trigger character. Useful for languages with strict indentation rules like Python.
• formatOnPaste: Formats pasted text to match the surrounding file's style. Prevents the classic "I pasted from Stack Overflow and now the indentation is wrong" problem.

The visual studio code format on save feature, combined with a consistent formatter across the team, is one of the most effective ways to eliminate formatting discussions in code review entirely. If you are also using diff tools to review changes, see our guide on static code analysis tools for how linting and formatting fit into a broader quality pipeline.

Best Formatter Extensions Compared

VS Code's built-in formatter handles HTML, CSS, JavaScript, and JSON. For everything else — and for a more opinionated, consistent style — you need an extension. Here is how the major vscode format file extensions compare in 2026:

Extension	Languages	Speed	Config required	Linting	Best for
Prettier	JS, TS, CSS, HTML, JSON, MD, GraphQL, 20+	Fast	Optional .prettierrc	No	Most web projects
Biome	JS, TS, JSX, TSX, JSON, CSS	Very fast (Rust)	Optional biome.json	Yes	Speed-sensitive pipelines
ESLint + Prettier	JS, TS	Moderate	Yes (.eslintrc + .prettierrc)	Yes	JS/TS projects needing lint+format
Black	Python	Fast	Optional pyproject.toml	No	Python projects
gofmt / gopls	Go	Very fast	None	No	Go projects
Rustfmt	Rust	Fast	Optional rustfmt.toml	No	Rust projects

Prettier — the de facto standard

Prettier is the most popular auto formatter vscode extension in the marketplace with tens of millions of installs. It is opinionated — it does not ask for your style preferences, it enforces a consistent one — which is precisely why teams adopt it. To install: open the Extensions panel (Ctrl+Shift+X), search for "Prettier - Code formatter" (publisher: esbenp), and install. Then set it as the default formatter:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "prettier.tabWidth": 2
}

Biome — the fast newcomer

Biome (formerly Rome) is a formatter and linter written in Rust. Its Rust implementation means it formats files significantly faster than Prettier on large codebases — benchmarks show Biome formats a 200 KB TypeScript file in under 10 ms. It also combines formatting and linting in a single tool, eliminating the ESLint + Prettier configuration friction. The trade-off is narrower language support — it targets the JavaScript/TypeScript ecosystem.

The ESLint + Prettier combo

Many teams run ESLint for linting and Prettier for formatting together. To prevent the two tools from fighting over style rules, install eslint-config-prettier to disable all ESLint rules that would conflict with Prettier's output. The result is ESLint catching logic errors and Prettier handling all whitespace — a clean separation of concerns. This combo is the most battle-tested way to format visual code in JavaScript and TypeScript projects.

Visual Studio Code Collapse All — Complete Reference

Vscode collapse all is a two-key chord that folds every foldable region in the active editor simultaneously (see the VS Code folding docs for the full specification). The complete shortcut reference for collapse all in vscode and related commands:

Action	Windows / Linux	macOS
Collapse all (fold all)	Ctrl+K, Ctrl+0	Cmd+K, Cmd+0
Expand all (unfold all)	Ctrl+K, Ctrl+J	Cmd+K, Cmd+J
Collapse to level 1	Ctrl+K, Ctrl+1	Cmd+K, Cmd+1
Collapse to level 2	Ctrl+K, Ctrl+2	Cmd+K, Cmd+2
Collapse to level 3–7	Ctrl+K, Ctrl+3–7	Cmd+K, Cmd+3–7
Fold current region	Ctrl+Shift+[	Cmd+Option+[
Unfold current region	Ctrl+Shift+]	Cmd+Option+]
Fold all block comments	Command Palette → "Fold All Block Comments"	Command Palette → "Fold All Block Comments"
Fold all regions	Command Palette → "Fold All Regions"	Command Palette → "Fold All Regions"

How fold levels work

Collapse all in vscode with Ctrl+K, Ctrl+0 folds every level simultaneously. The depth-based shortcuts give you more surgical control. Level 1 collapses only the outermost blocks — in a TypeScript class, that means class bodies are collapsed but you still see class names. Level 2 collapses class bodies and method bodies. Level 3 collapses everything inside methods, and so on up to level 7.

In practice, vs code fold all to level 1 is the most useful starting point when navigating an unfamiliar file. You get a bird's-eye view of the top-level structure — exports, classes, functions — without any implementation detail. Then you can expand (Ctrl+Shift+]) only the sections you need to read.

VS Code code folding in the gutter

Vscode code folding indicators appear in the editor gutter — the narrow margin to the left of line numbers. Hover over any line that begins a foldable block and a chevron icon (› / ⌄) appears. Click it to toggle the fold. This mouse-based approach complements the keyboard shortcuts and is especially useful when you want to fold a single function without disturbing the rest of the file.

Enable or disable the gutter indicators with "editor.showFoldingControls" in settings.json:

{
  "editor.showFoldingControls": "always"
  // Options: "always" | "never" | "mouseover" (default)
}

Vscode collapse functions specifically

Vscode collapse functions — folding only function bodies while leaving other code visible — is not a single built-in command, but you can achieve it with level folding. For JavaScript and TypeScript files where functions are defined at the top level, Ctrl+K, Ctrl+1 typically collapses exactly the function bodies. In class-based code, use level 2 to reach method bodies.

For more precise vs code collapse functions behavior, the Fold Plus extension adds commands like "Fold Functions" and "Fold Classes" that are language-aware. It is available free in the VS Code Marketplace.

Vscode expand all

To restore a fully collapsed file, vscode expand all uses Ctrl+K, Ctrl+J (Windows/Linux) or Cmd+K, Cmd+J (macOS). This recursively unfolds every region in the file, including any nested folds. It is the quickest way to return to a full view after exploring a collapsed outline.

Region Folding for Custom Sections

Language-grammar folding is automatic but limited to block structures the parser understands. Vscode region folding lets you define custom collapsible sections with comment markers — regardless of the surrounding code structure. This is particularly powerful for long configuration objects, data arrays, or groups of related functions you want to collapse as a unit.

Region syntax by language

VS Code recognizes several region comment syntaxes depending on the language:

Language	Open marker	Close marker
TypeScript / JavaScript	// #region My Section	// #endregion
CSS / SCSS / Less	/* #region */	/* #endregion */
HTML	<!-- #region -->	<!-- #endregion -->
Python	# region My Section	# endregion
C# / Java	#region My Section	#endregion
Markdown	<!-- #region -->	<!-- #endregion -->

Here is a practical TypeScript example using region markers to organize a large configuration file:

// #region Database Config
export const dbConfig = {
  host: process.env.DB_HOST ?? 'localhost',
  port: Number(process.env.DB_PORT) || 5432,
  name: process.env.DB_NAME ?? 'myapp',
  pool: { min: 2, max: 10 },
};
// #endregion

// #region Cache Config
export const cacheConfig = {
  driver: 'redis',
  host: process.env.REDIS_HOST ?? 'localhost',
  ttl: 3600,
};
// #endregion

// #region Feature Flags
export const flags = {
  newDashboard: process.env.FLAG_NEW_DASHBOARD === 'true',
  betaSignup: process.env.FLAG_BETA_SIGNUP === 'true',
};
// #endregion

With this structure, collapse all in vscode reduces the entire file to three named headers. You can expand only the section you need, keeping the others out of sight. The region name (e.g., "Database Config") appears in the collapsed fold indicator, so you always know what is hidden. This technique is especially valuable for large JSON-based config files — if you need to diff two versions of such files, see our guide on how to compare JSON objects online.

Folding all regions at once

Open the Command Palette (Ctrl+Shift+P) and run Fold All Regions to collapse every #region block simultaneously — without collapsing the code between regions. This vscode region folding command is distinct from vscode collapse all (Ctrl+K, Ctrl+0), which folds all structural blocks including functions, classes, and objects in addition to named regions.

Troubleshooting Format and Fold Issues

The most common complaints about format visual code and folding are either "the shortcut does nothing" or "formatting produces unexpected output." Here are the definitive fixes.

Format shortcut does nothing

1. No formatter installed for this language. Open the Command Palette and run "Format Document With…". If only "Configure Default Formatter…" appears with no formatters listed, you need to install one. Search the Extensions panel for the language name plus "formatter".
2. Multiple formatters conflict. If "Format Document With…" shows more than one option and no default is set, VS Code will prompt you to choose. Set a default in settings.json using "editor.defaultFormatter" for the relevant language key (see the settings examples earlier in this guide).
3. File is excluded by a formatter config. Prettier respects .prettierignore. If the file matches an ignore pattern, the formatter silently does nothing. Check your .prettierignore at the project root.
4. Formatter extension is disabled. Open the Extensions panel, find the formatter, and verify it shows "Enabled". Extension conflicts can cause silent disablement.

Auto format on save not working (visual studio code format on save)

1. Confirm "editor.formatOnSave": true is in settings — search "format on save" in the Settings UI.
2. Check for a workspace-level .vscode/settings.json that overrides user settings with "editor.formatOnSave": false.
3. Verify the file is not in a .prettierignore or equivalent.
4. Check the VS Code Output panel (View → Output) and select "Prettier" or your formatter from the dropdown. Error messages from the formatter appear here.

Vscode code folding not working

1. Folding is disabled. Confirm "editor.folding": true in settings (it defaults to true, but can be overridden).
2. Language grammar not loaded. VS Code needs the language extension for the file type to compute fold ranges. A plain .txt file has no fold ranges.
3. File too large. VS Code limits folding computation on very large files (default: 250,000 lines). The limit is configurable via "editor.foldingMaximumRegions".
4. Indentation-based folding strategy. By default VS Code uses language-aware folding. Switch to indentation-based folding for languages where the grammar extension does not compute folds correctly:

   {
     "editor.foldingStrategy": "indentation"
     // Options: "auto" (default) | "indentation"
   }

Prettier and ESLint produce conflicting output

When Prettier and ESLint both run on save and disagree on formatting, you will see the file "flicker" — it formats one way, then ESLint auto-fix reverts a rule, then Prettier runs again. The fix is to install eslint-config-prettier and extend it in your ESLint config. This disables all ESLint rules that are purely stylistic (handled by Prettier) while keeping the logic-checking rules active.

If you are reviewing the before/after state of a file after setting up formatters, a diff tool makes the audit straightforward. The same approach works for reviewing string-level changes — see our guide on string comparison techniques for character-level diff methods.

Frequently Asked Questions

What is the keyboard shortcut to format code in VS Code?

The vscode format shortcut is Shift+Alt+F on Windows, Ctrl+Shift+I on Linux, and Shift+Option+F on macOS. This is the visual studio format code shortcut that triggers the active formatter on the entire file. You can also open the Command Palette (Ctrl+Shift+P) and run "Format Document".

How do I collapse all code in VS Code?

Press Ctrl+K, Ctrl+0 on Windows/Linux or Cmd+K, Cmd+0 on macOS. This vs code fold all chord — hold the modifier key, press K, then press 0 while still holding the modifier. To expand everything back, use Ctrl+K, Ctrl+J.

How do I enable format on save in VS Code?

Add "editor.formatOnSave": true to your settings.json, or open Settings (Ctrl+,), search "format on save", and tick the checkbox. This visual studio code auto format setting works globally or per workspace. For team projects, add the setting to .vscode/settings.json in the repo so all contributors share the same vscode auto format on save behavior.

What is the best auto formatter for VS Code?

Prettier is the most widely used auto formatter vscode extension, supporting 20+ languages. Biome is a faster Rust-based alternative for JavaScript and TypeScript. For Python, Black is the standard. For Go, gofmt is built into the language toolchain and invoked automatically by the official Go extension.

How do I collapse only functions in VS Code?

Use Ctrl+K, Ctrl+1 to collapse to the outermost fold level, which typically corresponds to top-level function and class declarations. For class methods, use level 2 to vs code collapse functions at the method level. The Fold Plus marketplace extension adds language-aware "Fold Functions" and "Fold Classes" commands for more precise vscode collapse functions control.