Visual Studio For Mac Code Collapse

Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java. For Visual Studio for Mac, see Source editor (Visual Studio for Mac). You can view your code in a number of different ways. By default, Solution Explorer shows your code organized by files. VS Code provides the Collapse All functionality and shows it with same icon and location for all opted-in views. TreeItem label highlights You can highlight the TreeItem label by providing ranges using the highlights option.

Active10 months ago

How can you implement regions a.k.a. code collapse for JavaScript in Visual Studio?

If there are hundreds of lines in javascript, it'll be more understandable using code folding with regions as in vb/C#.

HaskellElephant

7,9984 gold badges31 silver badges66 bronze badges

PrasadPrasad

27.4k60 gold badges135 silver badges197 bronze badges

15 Answers

Blog entry here explains it and this MSDN question.

You have to use Visual Studio 2003/2005/2008 Macros.

Copy + Paste from Blog entry for fidelity sake:

Open Macro Explorer
Create a New Macro
Name it OutlineRegions
Click Edit macro and paste the following VB code:

Save the Macro and Close the Editor
Now let's assign shortcut to the macro. Go to Tools->Options->Environment->Keyboard and search for your macro in 'show commands containing' textbox
now in textbox under the 'Press shortcut keys' you can enter the desired shortcut. I use Ctrl+M+E. I don't know why - I just entered it first time and use it now :)

Gilles

79.7k19 gold badges171 silver badges209 bronze badges

user195488

Microsoft now has an extension for VS 2010 that provides this functionality:

Hakan Fıstık

6,6378 gold badges47 silver badges73 bronze badges

BrianFinkelBrianFinkel

2,3673 gold badges21 silver badges28 bronze badges

Good news for developers who is working with latest version of visual studio

The Web Essentials are coming with this feature .

Note: For VS 2017 use JavaScript Regions :https://marketplace.visualstudio.com/items?itemName=MadsKristensen.JavaScriptRegions

Kaushik ThankiKaushik Thanki

2,2141 gold badge13 silver badges34 bronze badges

Thats easy!

Mark the section you want to collapse and,

Ctrl+M+H

And to expand use '+' mark on its left.

UmitkUmitk

3,8261 gold badge29 silver badges40 bronze badges

For those about to use the visual studio 2012, exists the Web Essentials 2012

For those about to use the visual studio 2015, exists the Web Essentials 2015.3

The usage is exactly like @prasad asked

oneNiceFriend

2,8156 gold badges24 silver badges31 bronze badges

MCSIMCSI

By marking a section of code (regardless of any logical blocks) and hitting CTRL + M + H you’ll define the selection as a region which is collapsible and expandable.

Manish JainManish Jain

3781 gold badge4 silver badges11 bronze badges

The JSEnhancements plugin for Visual Studio addresses this nicely.

Joel HarrisJoel Harris

1,2192 gold badges15 silver badges31 bronze badges

Thanks to 0A0D for a great answer. I've had good luck with it. Darin Dimitrov also makes a good argument about limiting the complexity of your JS files. Still, I do find occasions where collapsing functions to their definitions makes browsing through a file much easier.

Regarding #region in general, this SO Question covers it quite well.

I have made a few modifications to the Macro to support more advanced code collapse. This method allows you to put a description after the //#region keyword ala C# and shows it in the code as shown:

Example code:

Updated Macro:

Community♦

Michael La VoieMichael La Voie

21.6k12 gold badges65 silver badges91 bronze badges

This is now natively in VS2017:

Whitespace between the // and # does not matter.

I do not know what version this was added in, as I cannot find any mention of it in the changelogs. I am able to use it in v15.7.3.

frigglefriggle

2,4201 gold badge25 silver badges43 bronze badges

On VS 2012 and VS 2015 install WebEssentials plugin and you will able to do so.

asteriskdothmgasteriskdothmg

if you are using Resharper

fallow the steps in this pic

then write this in template editor

and name it #region as in this picture

hope this help you

Basheer AL-MOMANIBasheer AL-MOMANI

8,0692 gold badges58 silver badges68 bronze badges

None of these answers did not work for me with visual studio 2017.

Microsoft Visual Studio For Mac

The best plugin for VS 2017: JavaScript Regions

Example 1:

Example 2:

Tested and approved:

Matheus MirandaMatheus Miranda

6571 gold badge8 silver badges21 bronze badges

Visual Studio Collapse All Code

For visual studio 2017.

This was not working earlier so I downloaded extension from here

CharlieCharlie

2,6581 gold badge22 silver badges43 bronze badges

Region should work without changing settings

To enable collapsing comment area /**/

Settings -> Search 'folding' -> Editor: Folding Strategy -> From 'auto' to 'indentation'.

TAGS: Node.js Nodejs Node jsJavascript ES5 ECMAScript comment folding hiding regionVisual studio code vscode 2018 version 1.2+https://code.visualstudio.com/updates/v1_17#_folding-regions

4baad44baad4

Not only for VS but nearly for all editors.

(function /* RegionName */ () { ... })();

Warning: has disadvantages such as scope.

Burak TamtürkBurak Tamtürk

protected by πάντα ῥεῖAug 13 '16 at 18:03

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).
Would you like to answer one of these unanswered questions instead?

Ringnin