How to Fold Code and Create Custom Folding Regions in VS Code

Code folding lets you collapse blocks of code so you can see the structure of a file without scrolling through every line. A long file with classes, methods, and nested blocks becomes a clean outline. You expand only the section you are working on.

VS Code supports folding through gutter icons, keyboard shortcuts, language-aware regions, custom markers, and manual folding ranges.

Fold using the gutter

Move your mouse to the left of the line numbers. A small chevron icon appears next to each foldable region. Click it to collapse the block. Click again to expand.

A collapsed region shows an ellipsis (...) with a preview of the hidden lines when you hover. Shift+Click the folding icon to fold or unfold the region and all nested regions inside it.

The gutter method is fastest when you are already using the mouse. For keyboard-first workflows, the shortcuts below are more efficient.

Keyboard shortcuts

Fold Level shortcuts (1 through 7) collapse everything at that nesting depth:

• Level 1 is the outermost blocks, like classes and top-level functions.
• Level 2 is methods inside classes.
• Level 3 is blocks inside methods.
• Higher numbers show more detail.

You can also fold and unfold from the menu: Edit > Folding.

Custom region markers

You can mark any section of code as a foldable region by adding comment markers. These work in most languages:

Example in JavaScript:

javascript

//#region Form validation
function validateEmail(email) { /* ... */ }
function validatePassword(password) { /* ... */ }
//#endregion

Both functions fold into a single line labeled "Form validation." Region markers can be nested. A region inside another region folds independently.

To fold all marker regions at once, press Ctrl+K Ctrl+8 (Cmd+K Cmd+8). To unfold them, press Ctrl+K Ctrl+9 (Cmd+K Cmd+9).

Manual folding ranges

If your language does not support automatic folding or region markers, you can create folding ranges manually.

Select the lines you want to collapse. Press Ctrl+K Ctrl+, (Windows/Linux) or Cmd+K Cmd+, (macOS). VS Code creates a folding range from the selection and collapses it.

Manual ranges are displayed with a distinct icon in the gutter. They stay until you remove them. To remove a manual folding range, press Ctrl+K Ctrl+. (Cmd+K Cmd+.).

Manual ranges are stored in memory, not in the file. They are lost when you close the editor. If you need persistent foldable regions that survive across sessions and teammates, use region marker comments instead.

Change folding strategy

VS Code decides how to fold code using a folding strategy. The default is automatic: syntax-aware folding when the language supports it, falling back to indentation-based folding otherwise.

To switch to indentation-only folding, useful for languages where syntax folding does not work well, set editor.foldingStrategy to indentation. Scope it to one language or apply it globally:

json

"[html]": {
  "editor.foldingStrategy": "indentation"
}

Remove the language scope, for example "[html]", to apply indentation folding to every language. Set the value back to "auto" to restore the default behavior.

When folding does not behave as expected

Folding depends on consistent indentation. If some parts of your file use tabs and others use spaces, folding regions may break at unexpected places. Format the file (Shift+Alt+F) to normalize indentation.

If folding regions appear at wrong levels, check your editor.foldingStrategy setting. Some language extensions override the default folding provider. Disable the extension temporarily to see if folding improves.

For more editing productivity tools, see the keyboard shortcuts cheat sheet and the guide on using multiple cursors.