Collapsing javascript code in visual studio

Question

I’m looking for equivalent functionality to C# regions in javascript

C# syntax

#region RegionName

public static void MyFunction()
{
    [mycode]
}

#endregion

This allows me to “collapse” my code in my .js file with Visual Studio and make it a little more manageable.

Anybody got any ideas?

This question has the correct method for supporting code collapse in javascript: http://stackoverflow.com/questions/1921628/how-to-implement-regions-in-javascript — Michael La Voie, Jan 06 '10 at 19:20

score 53 · Answer 1 · answered Nov 15 '12 at 06:25

53

If it need for collapse the java script code then you may select the code and press

Ctrl + M + H

It will collapse the selected code.

answered Nov 15 '12 at 06:25

Shiblee Shahriar

619
6
2

2

+1 since this doesn't use any plugins. – Justin Lessard Jun 18 '14 at 17:38
Writing this on a post-it note right now! – Bobby Jul 30 '14 at 10:19
2

How do you remove this collapsible area? – Bobby Jul 30 '14 at 10:20
8

To remove the collapsible area: CTRL + M, CTRL + U Source: http://msdn.microsoft.com/en-us/library/td6a5x4s.aspx – Nolan St. Martin Nov 12 '14 at 20:04
1

how to add comment in that region currently it show like [...] – Prageeth godage Apr 20 '15 at 13:07

score 17 · Answer 2 · answered Jun 13 '11 at 15:08

17

Microsoft now has an extension for VS2010 that provides this functionality:

JScript Editor Extensions

answered Jun 13 '11 at 15:08

BrianFinkel

2,687
3
26
28

Not working for community version.. found it in install log after installation failure.. – Thameem Oct 17 '19 at 12:40

Chris - Haddox Technologies · Answer 3 · 2013-07-02T00:50:58.197

13

This feature can be installed in Visual Studio 2012 with the help of Web Essentials plugin.

EDIT:

To do an actual region you can use:

//#region MyRegion
function Example() {

}
//#endregion

The plugin can be downloaded here: Web Essentials 2012, Web Essentials for 2010

edited Jul 02 '13 at 00:50

answered Oct 02 '12 at 17:19

Chris - Haddox Technologies

1,867
1
18
33

2

Can you share the syntax for this? It doesn't seem to work for me. – Johnny Oshika Oct 03 '12 at 16:34
When you do something like: `function DoThis() { \\stuff }` VS2012 should automatically place +/- icon next to it and allow you to expand/collapse the function just like your div's – Chris - Haddox Technologies Dec 28 '12 at 17:44
Worked fine...love this... Any shortcut to collapse these regions it would be a great help..??!! – Thameem Oct 17 '19 at 12:39

score 6 · Accepted Answer · answered Oct 13 '09 at 16:15

6

Take a look at this article, which implements the #region directives in js files using macros.

answered Oct 13 '09 at 16:15

Brandon

68,708
30
194
223

3

Microsoft now has an extension for VS2010 that provides this functionality (see my answer below for link). – BrianFinkel Jun 13 '11 at 15:10
2

They took macros out of VS 2012. (Great idea, right?) Any good solutions for VS 2012? – Daniel Jan 09 '14 at 21:35

score 5 · Answer 5 · answered Oct 03 '12 at 16:40

5

For Visual Studio 2012, you can use this extension: http://visualstudiogallery.msdn.microsoft.com/4be701d8-af03-40a4-8cdc-d2add5cde46c

answered Oct 03 '12 at 16:40

Johnny Oshika

54,741
40
181
275

score 1 · Answer 6 · answered Jul 15 '13 at 19:46

1

This is the best one (I've tried them all):

http://visualstudiogallery.msdn.microsoft.com/0696ad60-1c68-4b2a-9646-4b5f4f8f2e06/view/Discussions/1

answered Jul 15 '13 at 19:46

RedAces

319
1
3
16

score 1 · Answer 7 · answered Jun 23 '10 at 17:55

1

There is a javascript outlining extension for VS 2010 here http://jsoutlining.codeplex.com/documentation it works great for me

answered Jun 23 '10 at 17:55

scepak

73
1
2
9

Collapsing javascript code in visual studio

7 Answers7