How do you hide arbitrary section of code in VS Code?
Asked Answered
B

5

30

By "VS Code" I mean the lightweight text editor not the monolithic IDE, unfortunately searching this on google will bring up many pieces of irrelevant information about how to do this in Visual Studio.

To the question itself, Anybody knows how to hide arbitrary selected lines of code in "Visual Studio Code", preferably into a plus sign like collapsing does?

Note: this is different than collapsing nested code which probably could be achieved by Ctrl+K,Ctrl+<num> , what I need here is to hide specific block of code of choice, no matter nested or not.

EDIT: I see there are people who don't understand my requirements.

for example, you may think what I want is this:

before hiding:

for i in j:
    for k in i:
        for l in k:
            somestuff...

after hiding:

[+] for i in j: ...

What I actually want is this:

before hiding:

# doing stuff about a
a = ClassA()
a.bar()
a.i = 2
a.j = 3
a.k = 5

after hiding:

[+] ...  ( doing stuff about a )

2017.10.17 EDIT: turns out VS Code implemented a very similar feature called "Folding Regions" in VS Code 1.17.1 Update. link

Barnaul answered 19/5, 2017 at 2:38 Comment(1)
F
20

In the Insiders Build v1.70 now is the functionality and command to truly hide arbitrary lines of code. The command is

Create Manual Folding Range from Selection
editor.createFoldingRangeFromSelection

It is bound to Ctrl+K Ctrl+, by default. Select any lines you want to fold.

You can unfold those lines either by clicking the gutter folding controls or this command when the cursor is somewhere on the folded line:

Remove Manual Folding Ranges
editor.removeManualFoldingRanges

The above command is bound to Ctrl+K Ctrl+. by default.

fold selected lines demo

Freedafreedman answered 12/7, 2022 at 14:39 Comment(1)
in macOS, replace the 'Ctrl' to 'Command'Twopence
J
58

You can use the following delimiters for code folding:

C/C++:       #pragma region and #pragma endregion
C#:          #region and #endregion
CSS:         /* #region */ and /* #endregion */
Java:        //region and //endregion
JavaScript:  //#region and //#endregion and //region and //endregion
PHP:         #region and #endregion
Powershell:  #region and #endregion
Python:      #region and #endregion
VB:          #Region and #End Region

See https://github.com/Microsoft/vscode/issues/12146 ([folding] fold regions)

Jahdol answered 25/1, 2018 at 11:8 Comment(1)
I wish it would stay folded across sessions. Don't like having secret keys visible on my monitor :\Griqua
F
20

In the Insiders Build v1.70 now is the functionality and command to truly hide arbitrary lines of code. The command is

Create Manual Folding Range from Selection
editor.createFoldingRangeFromSelection

It is bound to Ctrl+K Ctrl+, by default. Select any lines you want to fold.

You can unfold those lines either by clicking the gutter folding controls or this command when the cursor is somewhere on the folded line:

Remove Manual Folding Ranges
editor.removeManualFoldingRanges

The above command is bound to Ctrl+K Ctrl+. by default.

fold selected lines demo

Freedafreedman answered 12/7, 2022 at 14:39 Comment(1)
in macOS, replace the 'Ctrl' to 'Command'Twopence
G
12

Unfortunately, it doesn't appear that VSCode currently allows you to hide an arbitrary selection of code like Visual Studio does via Ctrl+M,Ctrl+H. For now you could use the code folding feature, which depends on indentation. That is, if you indent the code you want to hide, you could then collapse it via Ctrl+Shift+[, like so:

code folding in vscode

Obviously, this is kind of an ugly solution to your problem; it requires multiple steps and makes actual changes to the file. Also, it's clearly useless if you're writing in a whitespace-dependent language like Python, but I don't think you are going to find a better solution short of finding an extension (or writing one yourself). It also might be worth posting an issue on the official VSCode GitHub repo if this feature is important to you.

Ginzburg answered 21/5, 2017 at 18:54 Comment(3)
In retrospection your answer was creative and almost correct at that moment, sorry that I didn't choose you because this might not work in some indent sensitive languages.Barnaul
@Barnaul no worries, I conceded that as part of the answer. Ideally it should be something vscode does by itself.Ginzburg
Dissecting some C code right now, and trying to hide chunks of code beyond just folding it. The indentation trick didn't work for some reason, but I added #if 1 and #endif around the blocks I wanted to hide and that got it done :) Thanks for the idea!Philodendron
L
4

Here is the vs code documentation for folding a selection.

To hide: Highlight the lines you want to fold then press Ctrl+K then Ctrl+,

To unhide: Just click the ">" icon to the left of the row of the folded code or press Ctrl+K then Ctrl+.

Lapboard answered 10/10, 2022 at 15:10 Comment(0)
B
-1

Comment with a delimiter with decreased indentation. Hiding then works as in nested, with the little arrow on the left.

see here

# Below here comes the code to hide.
    a = ClassA()
    a.bar()
    a.i = 2
    a.j = 3
    a.k = 5
Brumbaugh answered 7/3, 2021 at 12:53 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.