How do I collapse sections of code in Visual Studio Code for Windows?

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.


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)


Folding has been rolled out and is now implemented since Visual Studio Code version 0.10.11. There are these keyboard shortcuts available:

  • Fold folds the innermost uncollapsed region at the cursor:

    • Ctrl + Shift + [ on Windows and Linux
    • ⌥ + ⌘ + [ on macOS

  • Unfold unfolds the collapsed region at the cursor:

    • Ctrl + Shift + ] on Windows and Linux
    • ⌥ + ⌘ + ] on macOS

  • Fold All folds all regions in the editor:

    • Ctrl + K, Ctrl + 0 (zero) on Windows and Linux
    • ⌘ + K, ⌘ +0 (zero) on macOS

  • Unfold All unfolds all regions in the editor:

    • Ctrl + K, Ctrl + J on Windows and Linux
    • ⌘ + K, ⌘ + J on macOS

References: https://code.visualstudio.com/docs/getstarted/keybindings


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:

Enter image description here

Tags:

Visual Studio Code

Recent Posts