[folding] fold regions

[mbeckenbach]

Use markers such as //#region and //#endregion to mark folding regions

[waderyan]

@mbeckenbach can you provide more information of what you are looking for? I am not familiar with //#region support.

Also, is this VS Code specific or is this a feature request for TypeScript? This may be better in TypeScript.

[mbeckenbach]

The full visual studio uses comments to mark code blocks as collapsable in all languages. Depending on the language, the syntax is slightly different as the comment syntax is different.

Hard to explain, but web essentials has a nice screenshot of regions in the javascript area: http://vswebessentials.com/features/javascript

Regions should exist for all languages. The comment syntax is different but the result schould be the same.

[divieirasilva]

I think, @mbeckenbach are talking about the #region, current present on c# syntax of Visual Studio. Currently, on C#, #region name_region is used to tell where code will start folding and #endregion tells where code will stop folding.
I'm really missing this feature on VS Code as well, all my code have regions for better code reading and on VSCode I can't fold my regions.

e.g.

#region region_sample

void MyDummyMethod()
{
int a = 1 + 1;
}

void MyDummyMethod2()
{
int b = 1 + 1;
}

#endregion

In the sample above, the entire region block should fold and "region_sample" should be the label on folding.

[mbeckenbach]

yes, that's what i'm talking about. i'm really missing that feature in other languages like for example ts

[waderyan]

This issue was moved to microsoft/TypeScript#11073

[freebrevik]

@waderyan Not trying to step on any toes here... but just curious why this issue would be moved to Typescript, isn't regions purely aesthetic? That seems like something the Editor should be handling not the language.

As others have mentioned this is great for large code bases, obviously its better when you can split things across multiple files but that's not always the case in large projects without adding even more unnecessary complexity.

[waderyan]

@awdogsgo2heaven thank you for your comment. You may be correct and I have been meaning to come back and reopen this issue on our end to gather more feedback from VS Code users.

[waderyan]

@isidorn I believe this issue is more general than TypeScript. This is a possibility for a feature request for any language. We see this in other editors (for example, this is what WebStorm does).

Possibly this falls under code folding and should be assigned to @aeschli?

Please advise.

[isidorn]

FYI @aeschli @alexandrudima

[unional]

Would like to have this support too.
Note that the way of WebStorm #region is different than in Visual Studio for C#, so I don't know if it should or can be done in one shot for all languages.

In WebStorm, you specify the region (for JavaScript) as follow:

// region Some comment
... code
// endregion

Notice that it does not have # before region and endregion.

when folded, it looks like this:

It would be great to match WebStorm syntax for JS/TS as my team use it instead of VSCode (I keep persuade them to change. 🌷 ), but that's my personal need / preference.

[ghost]

I use regions heavily and I have // #region XXX and // #endregion all over my JavaScript code which I mainly edit with Visual Studio 2015 Pro.

Here's what Visual Studio 2015 does with them:

(Above: Image of uncollapsed // #region Constants and collapsed regions: Main, Data Access, File I/O)

My team absolutely needs this feature for large files and we can't use VSCode as our main editor without it.

[D3MaxT]

I would love to see this feature in VS Code as well.
In my case, for PowerShell scripts.

#region Name
...code...
#endregion

Thank you!

[DrewLandgrave]

Bump

[blackie1019]

As a C# developer, region/endregion is very general use on wrap reference section. Like below

Please teach me how to do on VSCode. If the feature not implement, please consider it seriously.

[aeschli]

@Fenweldryn What region patterns are common in PHP?

[aeschli]

@pr-yemibedu I added the suggested region markers to fsharp

[Fenweldryn]

@aeschli For php using Javascript pattern is fine: //#region

[pr-yemibedu]

Hello,
There is also something to be said to follow other existing tooling that would make it easier on people. Phpstorm uses //region as described here Using Folding Comments. including a comparison with other editors. Just to minimize possible disparity. Thank you. Good day.

[pr-yemibedu]

Hello,
@aeschli is there a way to have a fallback folding region. {single-line-comment-leader}<editor-fold desc="Description"> like //<editor-fold desc="Code"> that is used with netbeans and jetbrains products? Then when something specific is needed, it can be added with precedence ahead of the fallback. That is described in Folding Regions for JetBrains and for Code Folds Netbeans. Thank you. Good day.

[Benny1007]

Hi @aeschli please can you confirm if the content within the #region and #endregion tags has to be indented for the collapsed visual decoration to appear, as is currently in vscode 16.1?

I say this because it would be very handy to use #region to hide the useful, but ugly PowerShell here-string syntax where the @" or @" has to be on the first column of a new line :(

[ZyoxNet]

Support for CSS/SASS/LESS would also be very nice.
Pattern is /*#region Description*/ and /*#endregion*/

[aeschli]

@Ben-Shirley Content inside #region and #endregion does not need to be indented: It can have any indentation.

[daviwil]

When will this show up in the Insiders build? It doesn't seem to be working for me here:

Judging from the date in that screenshot there hasn't been an Insiders update in a few days, maybe that explains it?

[aeschli]

@daviwil Yes, unfortunately still no insiders updates on Mac and Windows. Use Linux or see #34978 for download links.

[pr-yemibedu]

Hello,
@aeschli I have some nice updates to the fsharp language folding regular expression. Should I send a pull request or do you need to apply the code yourself? This will enable the following:

• flexible whitespace before the #region and #endregion signals
  "//#region name" or "// #region name"
• using one line block comments to enable the same region folding
  "(*#region name*)" or "(* #region name *)"

This style will allow languages like CSS to have fold support (it only has block comments).
I already tried with my own editor and it all does the right thing. This would be helpful to give freedom of choice to the developer and let VSCode lead by example. Thank you. Good day.

[aeschli]

@pr-yemibedu I'm happy to take a PR. But I'd like to limit us to established folding markers, and not come up with new variants, however useful they might be.
At some point we will can add user configurable markers.

[pr-yemibedu]

Hello,
That sounds fair enough. I will qualify any future submissions of this kind with a link to at least one other generally accepted popular editor. Probably looking at tmLanguage files would be a good reference point. Thank you. Good day.

[DarkNami]

Could vscode support #region and #endregion in PHP ?
( # is also PHP comment )
http://php.net/manual/en/language.basic-syntax.comments.php

[aeschli]

@DarkNami I'm happy to add it if this is already an established marker in PHP. Please file a new issue or even PR.

[Hankrecords]

What about Python? A simple #region and #endregion would be useful. Right now you can only fold like that if you indent code between the two region comments, but that leads to wrong indentation errors.

[yveslange]

This new feature doesn't seem to work in a HTML file.

eg (file: my-app.html):

...
<script>
//region
..... some stuff
//endregion
</script>

That would be very usefull.

[pr-yemibedu]

Hello,
@yveslange the region handling it is not a global feature. So the javascript regions would need to be included in the htnl language configuration. I am sure many would argue if you start to use regions, to pull that code out into a dedicated file. The you will get the support you expect. Thank you. Good day.

[pr-yemibedu]

Hello,
@KillyMXI honestly you probably actually want language aware context folding instead of this artificial editor folding. CSS only has block comments, so be careful with your sets of open and close comments. Anyone can manually edit their CSS lang config file:
C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\css\language-configuration.json
and add an acceptable folding section.

"folding": {
  "markers": {
    "start": "^\\s*\\/[*]\\s?#region\\s*(.*)\\s*[*]\\/$",
    "end": "^\\s*\\/[*]\\s?#endregion\\s*(.*)\\s*[*]\\/$"
  }
}

This is something that would probably be lost when the program updates itself, but if you want it anyway, that would probably be a possibilty. I always make a copy of the file before I make changes, just in case. Thank you. Good day.

[Sevin777]

We want both language aware context folding and artificial region folding for every language. The Ace editor does this for all C style languages (including CSS); it also works for the SqlServer language.

https://github.com/ajaxorg/ace/wiki/Non-Standard-Code-Folding

[pr-yemibedu]

Hello,
@sevin7676 I agree that a lot of people do want both. I looked at ACE too before and found it had some nice folding options. My prior post was because MXI was asking about a feature in a different issue that seemed better suited here.

So my first sentence is actually out of context here as I started writing it. The rest of my post and example are actually in support of the idea that users should have choice. The code snippet I shared can be hacked into any 1.17.1 editor where they want some non official support for existing code. Thank you. Good day.

[KillyMXI]

Hello. Thanks for answers, @pr-yemibedu
I missed this issue because it has closed status.

I upvoted #12146 (comment) above, with only note that I'd like it to support arbitrary number of spaces around #region keywords and maybe optional description repeated after #endregion, so it will be easier to read in other code editors without region folding.

I'm not interested in editor hacking. I'd like to see this as an officially supported feature that I can refer to when formatting files for a project accessed by multiple developers.

[contractormario]

There should be an option to set initial fold state for specific regions.

#region imports folded
// code folded by default
#endregion

#region logic
// code not folded by default
#endregion

you can make it even more fancy with region pragmas taking json objects as props

#region imports {folded=true, bgColor:'red', fontSize:'8pt'}

[pr-yemibedu]

@aeschli can we have the folding markers be arrays instead of just a single string? The logic would match start and end markers pair wise until the shortest list is exhausted.

indentRanges.ts 200 can have patterns (an Array) instead of pattern (a String) and just loop over the smaller of the two lists.

let minMarker = markers.start.length < markers.end.length ? markers.start.length : markers.end.length;
for (let currentMarker = 0; currentMarker < minMarker; currentMarker++){
  let currentPattern = new RegExp(`(${markers.start[currentMarker].source})|(?:${markers.end[currentMarker].source})`);
  patterns.push(currentPattern);
}

indentRanges.ts 220 can check for list length > 0 with an outer if and then on an inner for loop over each pattern, do all the existing logic you have today inside.

if(patterns.length >0){
  for(let pattern of patterns){ do existing logic }
}

And that would all work (including an update to the schema) with below as an example.

"folding": {
  "markers": {
    "start": ["^\\s*#Region\\b", "^\\s*Region\\b"],
    "end": ["^\\s*#End Region\\b", "^\\s*End Region\\b"]
  }
}

This would promote not having mixed start and end markers.