How do I fold/collapse/hide sections of code in Visual Studio Code?

As of Visual Studio Code version 1.12.0, April 2017, see Basic Editing > Folding section in the docs.

The default keys are:

Fold All: CTRL+K, CTRL+0 (zero)

Fold Level [n]: CTRL+K, CTRL+[n]*

Unfold All: CTRL+K, CTRL+J

Fold Region: CTRL+K, CTRL+[

Unfold Region: CTRL+K, CTRL+]

*Fold Level: to fold all but the most outer classes, try CTRL+K, CTRL+1

Macs: use ⌘ instead of CTRL (thanks Prajeet)

Also see the ability to fold any arbitrary lines of code as of Insiders v1.70. That is any lines you select can be folded!

See https://stackoverflow.com/a/72954133/836330 for the command and demo.

Create Manual Folding Range from Selection
editor.createFoldingRangeFromSelection

This is bound to the above create command: Ctrl+K Ctrl+,

Remove Manual Folding Ranges
editor.removeManualFoldingRanges

This is bound to the above remove command: Ctrl+K Ctrl+.

Code folding by regions has arrived with v1.17. Folding by regions documentation. And v1.19 and 1.23.

[Generally you can add a space, for example // region and // endregion to //region and //endregion and it will also work.]

TypeScript/JavaScript: //#region and //#endregion or // #region and // #endregion
C#:                    #region and #endregion
C/C++:                 #pragma region and #pragma endregion
F#:                    //#region and //#endregion
PowerShell:            #region and #endregion
Python:                #region and #endregion
VB:                    #Region and #End Region
PHP:                   #region and #endregion
Bat:                   ::#region and ::#endregion or REM #region and REM #endregion
Markdown:              <!-- #region --> and <!-- #endregion -->
Golang                 //region and //endregion or //#region and //#endregion
Java                   //#region and //#endregion
CSS/SCSS/Less:         /* #region */ and /* #endregion */ or /*#region*/ and /*#endregion*/
SCSS/Less:             // #region and // #endregion
Go:                    // region, // endregion and // #region, // #endregion
shellscript:           # region and # endregion
Perl5                  #region and #endregion or =pod and =cut  
sql                    --#region and --#endregion

Important: If you don't see your language in the list ::

Each language also has snippets available for the markers. Type '#' and invoke code completion to see them. To have region markers configured for your language, contact the language extension provider.

So type # and then Ctrl+Space to see the region markers for any language.

This feature is available in the standard build now. To make the collapse/expand controls appears, you need to mouse over the area just to the right of the line numbers as shown in this screenshot:

Ctrl + K + 0 : Fold all levels (namespace , class , method , block)

Ctrl + K + 1 : namspace

Ctrl + K + 2 : class

Ctrl + K + 3 : methods

Ctrl + K + 4 : blocks

Ctrl + K + [ or ] : current cursor block

Ctrl + K + J : UnFold

You should add user settings:

{
    "editor.showFoldingControls": "always",
    "editor.folding": true,
    "editor.foldingStrategy": "indentation", 
}

The default shortcut for collapse/extend are:

Ctrl + Shift + [ : "Fold"

Ctrl + Shift + Alt + [ : "Fold all"

Ctrl + Shift + ] : "Unfold"

Ctrl + Shift + Alt + ] : "Unfold all"

Or go to keybindings.json and change as you wish.

For example:

{
    "key": "cmd+k cmd+m",
    "command": "editor.foldAll",
    "when": "editorFocus"
},
{
    "key": "cmd+m cmd+k",
    "command": "editor.unfoldAll",
    "when": "editorFocus"
},

If none of the shortcuts are working (like for me), as a workaround you can also open the command palette (Ctrl + 3 or View -> Command Palette...) and type in fold all:

With JavaScript:

//#region REGION_NAME
   ...code here
//#endregion

From Visual Studio Code:

Fold All (Ctrl+K Ctrl+0) folds all regions in the editor.

Unfold All (Ctrl+K Ctrl+J) unfolds all regions in the editor.

Fold Level X (Ctrl+K Ctrl+2 for level 2) folds all regions of level X, except the region at the current cursor position.

This is the latest built-in(default) keyboard shortcuts for folding and unfolding the code

VS Code Keyboard shortcut

Ctrl+Shift+[ Fold (collapse) region
Ctrl+Shift+] Unfold (uncollapse) region
Ctrl+K Ctrl+[ Fold (collapse) all subregions
Ctrl+K Ctrl+] Unfold (uncollapse) all subregions
Ctrl+K Ctrl+0 Fold (collapse) all regions
Ctrl+K Ctrl+J Unfold (uncollapse) all

Nb: But in some cases, your vs code extension or user will alter the keyboard binding(shortcut). So best option that Checks like this

1. View->command palette OR Ctrl+Shift+P
2. Type "fold" .It will suggest the fold and unfold and there shortcut. You can type that shortcut instead of command-palette

e.g.:

Fold All

UnFold All

Collapsing is now supported in release 1.0:

Source Code Folding Shortcuts

There are new folding actions to collapse source code regions based on their folding level.

There are actions to fold level 1 (Ctrl+K Ctrl+1) to level 5 (Ctrl+K Ctrl+5). To unfold, use Unfold All (Ctrl+Shift+Alt+]).

The level folding actions do not apply to region containing the current cursor.

I had a problem finding the ] button on my keyboard (Norwegian layout), and in my case it was the Å button. (Or two buttons left and one down starting from the backspace button.)

Just press Ctrl+Shift+P, and then type 'fold'.
All keybinds about (un)fold will be shown.
If Ctrl+k does not work, probably it's because the vim extension overrides the key.
in this case, you should modify settings.json (press Ctrl+Shift+P, and then type 'settings' ) with

"vim.handleKeys": {
  "<C-k>": false,
},

This feature is now supported, since Visual Studio Code 1.17. To fold/collapse your code block, just add the region tags, such as //#region my block name and //#endregion if coding in TypeScript/JavaScript.

Example:

To fold/unfold current block use (Ctrl+K+L)

Here is the most common useful default keymap of VS Code. And you can easily customize them with your own keymap. Ctrl+K and then:

• Fold All: Ctrl+0
• Unfold All: Ctrl+J
• Fold Region: Ctrl+[
• Unfold Region: Ctrl+]
• Fold Level 1: Ctrl+1
• Fold Level 2: Ctrl+2
• Fold Level 3: Ctrl+3
• Fold Level 1: Ctrl+4

No technical tips here, just simple adjustments of the preferences of VS Code.

I managed to show code folding controls always in VsCode by going to Preferences and searching for 'folding'. Now just select to always show these controls. This works with the Typescript code and HTML of templates in the Angular 8 solution I tested it with.

This was tested with VS Code Insiders 1.37.0 running on a Windows 10 OS.

v1.42 is adding some nice refinements to how folds look and function. See https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_42.md#folded-range-highlighting:

Folded Range Highlighting

Folded ranges now are easier to discover thanks to a background color for all folded ranges.

Fold highlight color Theme: Dark+

The feature is controled by the setting editor.foldingHighlight and the color can be customized with the color editor.foldBackground.

"workbench.colorCustomizations": { "editor.foldBackground": "#355000" }

Folding Refinements

Shift+Click on the folding indicator first only folds the inner ranges. Shift+Click again (when all inner ranges are already folded) will also fold the parent. Shift+Click again unfolds all.

When using the Fold command (kb(editor.fold))] on an already folded range, the next unfolded parent range will be folded.

As of version 1.3.1 (2016-07-17), Block Collapse is much more convenient.

Any line followed by an indented line will have a '-' character to allow collapse. If the block is collapsed, it will then be replaced by a '+' character that will open the collapsed block.

The (Ctrl + Shift + Alt + ]) will still affect all blocks, closing one level. Each repeated use closed one more level. The (Ctrl + Shift + Alt + [) works in the opposite way.

Hooray, block collapse finally works usefully.

Note: these shortcuts only work as expected if you edit your keybindings.json

I wasn't happy with the default shortcuts, I wanted them to work as follow:

• Fold: Ctrl + Alt + ]
• Fold recursively: Ctrl + ⇧ Shift + Alt + ]
• Fold all: Ctrl + k then Ctrl + ]
• Unfold: Ctrl + Alt + [
• Unfold recursively: Ctrl + ⇧ Shift + Alt + [
• Unfold all: Ctrl + k then Ctrl + [

To set it up:

• Open Preferences: Open Keyboard Shortcuts (JSON) (Ctrl + ⇧ Shift + p)
• Add the following snippet to that file

  Already have custom keybindings for fold/unfold? Then you'd need to replace them.

    {
        "key": "ctrl+alt+]",
        "command": "editor.fold",
        "when": "editorTextFocus && foldingEnabled"
    },
    {
        "key": "ctrl+alt+[",
        "command": "editor.unfold",
        "when": "editorTextFocus && foldingEnabled"
    },
    {
        "key": "ctrl+shift+alt+]",
        "command": "editor.foldRecursively",
        "when": "editorTextFocus && foldingEnabled"
    },
    {
        "key": "ctrl+shift+alt+[",
        "command": "editor.unfoldRecursively",
        "when": "editorTextFocus && foldingEnabled"
    },
    {
        "key": "ctrl+k ctrl+[",
        "command": "editor.unfoldAll",
        "when": "editorTextFocus && foldingEnabled"
    },
    {
        "key": "ctrl+k ctrl+]",
        "command": "editor.foldAll",
        "when": "editorTextFocus && foldingEnabled"
    },

VS Code extension: Fold Level, one key fold to the level you want.

On a mac, it's the RHS Command key, ⌘+K, not the left for the code folding commands.

Otherwise the left hand Command key will delete the current line, ⌘+K.

I wish Visual Studio Code could handle:

#region Function Write-Log
Function Write-Log {
    ...
}
#endregion Function Write-Log

Right now Visual Studio Code just ignores it and will not collapse it. Meanwhile Notepad++ and PowerGUI handle this just fine.

Update: I just noticed an update for Visual Studio Code. This is now supported!

Or, if you want to remove the folding buttons, for extra space:

"editor.folding": false

(add to your settings.json file)

If you are editing a large file, it might be handy to increase Folding Maximum Regions setting, since by default it's limited to 5000.

"editor.foldingMaximumRegions": 5000

More info here: region extensionhttps://marketplace.visualstudio.com/items?itemName=maptz.regionfolder

After installing the extension and using python, it works like this:

# region ARBITRARY_REGION_NAME

   code goes here...

# endregion

Also, selecting the desired area, use Ctrl+M+Ctrl+R.

(that is: first hit and hold Ctrl, then hit M, let go M, then hit R, and let go all)

If you encountered the issue where your class name is collapsed into due to ◦◦◦ or ..., it might be caused by Tailwind related extensions like this:

• Tailwind Fold
• Inline Fold

The extension will collapse the class because tailwind CSS can be repetitive and long, so the extension will help to fold those classes from something like:

<div class="some class names here"></div>

Into:

<div class="..."></div>

VS Code extensions can modify the behaviour of codes such as the formatting and display, so it will be better to review your Extensions list and ensure none of them caused a side effect that is unexpected. Disable them and try again to see whether it solved your issue.