how to implement regions/code collapse in javascript

B

18

159

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#.

#region My Code

#endregion

Beauharnais answered 17/12, 2009 at 13:0 Comment(1)

None of these solutions worked as well for me as this one. #46268408 – Waterlog 17/9, 2017 at 20:39

L

26

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:

Option Strict Off
Option Explicit Off

Imports System
Imports EnvDTE
Imports EnvDTE80
Imports System.Diagnostics
Imports System.Collections

Public Module JsMacros

    Sub OutlineRegions()
        Dim selection As EnvDTE.TextSelection = DTE.ActiveDocument.Selection

        Const REGION_START As String = "//#region"
        Const REGION_END As String = "//#endregion"

        selection.SelectAll()
        Dim text As String = selection.Text
        selection.StartOfDocument(True)

        Dim startIndex As Integer
        Dim endIndex As Integer
        Dim lastIndex As Integer = 0
        Dim startRegions As Stack = New Stack()

        Do
            startIndex = text.IndexOf(REGION_START, lastIndex)
            endIndex = text.IndexOf(REGION_END, lastIndex)

            If startIndex = -1 AndAlso endIndex = -1 Then
                Exit Do
            End If

            If startIndex <> -1 AndAlso startIndex < endIndex Then
                startRegions.Push(startIndex)
                lastIndex = startIndex + 1
            Else
                ' Outline region ...
                selection.MoveToLineAndOffset(CalcLineNumber(text, CInt(startRegions.Pop())), 1)
                selection.MoveToLineAndOffset(CalcLineNumber(text, endIndex) + 1, 1, True)
                selection.OutlineSection()

                lastIndex = endIndex + 1
            End If
        Loop

        selection.StartOfDocument()
    End Sub

    Private Function CalcLineNumber(ByVal text As String, ByVal index As Integer)
        Dim lineNumber As Integer = 1
        Dim i As Integer = 0

        While i < index
            If text.Chars(i) = vbCr Then
                lineNumber += 1
                i += 1
            End If

            i += 1
        End While

        Return lineNumber
    End Function

End Module

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 :)

Lacylad answered 17/12, 2009 at 13:1 Comment(8)

This one is useful and the important point to note from the site's comments is "You must check the name of the module in the above code with the name of your new Macro. both names must match!" – Beauharnais 17/12, 2009 at 16:48

Does this work on VS2010? I can't get to. The Macro doesn't show up when searching for it. – Belia 27/5, 2010 at 15:5

@Mr. Flibble: Not Sure.. I only have VS2005. – Lacylad 27/5, 2010 at 15:41

OK. I've asked in a new question here: #2923677 – Belia 27/5, 2010 at 17:1

Microsoft now has an extension for VS2010 that provides this functionality (see my answer below for link). – Rennarennane 13/6, 2011 at 15:9

Very Nice But Please is there is a way while highlight a javascript code and do a shortcut to put a #region in the begining and #endregion in the end to make it easy please ??? :) i think it will be a very helpful thing – Elevation 25/11, 2012 at 8:15

@Marwan: If you have a question, then ask another one. Do not comment on this answer. – Lacylad 26/11, 2012 at 13:18

@Marway - Check out the answer below from Kaushik Thanki about using Web Essentials - – Thermosiphon 17/6, 2016 at 5:55

A

87

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

The Web Essentials are coming with this feature .

Check this out

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

Ainsley answered 15/2, 2016 at 12:21 Comment(6)

@William some day people will need this for sure ;) – Ainsley 17/6, 2016 at 14:9

as time is going, this will the defacto accepted answer. – Doublet 22/2, 2017 at 11:14

Works perfect with latest version of VSCode - Typescript as of 6/10/2019. – Advocate 10/6, 2019 at 13:59

This also work for VS2019 as well, and I don't have Web Essentials installed. – Hecker 31/10, 2020 at 21:46

@LukeVo then seems vs2019 inbuilt support this one, – Ainsley 1/11, 2020 at 8:45

Never use Web Essentials BE AWARE it takes you on a loop basis trying toinstall the same thimgs everytime you open vs2015. Also your JS collpase functions will not work. COMPLETELY USELESS – Polysyndeton 29/11, 2022 at 9:4

R

53

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

JScript Editor Extensions

Rennarennane answered 13/6, 2011 at 14:32 Comment(4)

This is fantastic! I hope they include this into the next VS update. Thanks for sharing! – Icky 8/7, 2011 at 2:51

Really wonderful extension, even better than the third party outlining extension. – Briggs 11/5, 2012 at 18:47

any of this happening for VS 2012 and 2013? – Highboy 28/6, 2013 at 9:35

This is great! Is there any version for VS 2012 or 2013? – Coons 26/5, 2015 at 16:39

B

45

Thats easy!

Mark the section you want to collapse and,

Ctrl+M+H

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

Belle answered 9/9, 2015 at 8:38 Comment(2)

It worked!. Saved me as it made my code look slimmer as i have lots of ajax calls under a single ajax calls. – Teniacide 10/12, 2016 at 8:51

It is a temporary solution. If you close and re-open the file, the selected area disappears. – Ruelu 1/3, 2017 at 8:38

P

32

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

Pedology answered 1/10, 2013 at 17:57 Comment(1)

+1 - this should be the answer, as most people will be using 2012/2013 by now! (it also works for 2013) – Schoonover 27/4, 2014 at 11:58

L

26

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:

Option Strict Off
Option Explicit Off

Imports System
Imports EnvDTE
Imports EnvDTE80
Imports System.Diagnostics
Imports System.Collections

Public Module JsMacros

    Sub OutlineRegions()
        Dim selection As EnvDTE.TextSelection = DTE.ActiveDocument.Selection

        Const REGION_START As String = "//#region"
        Const REGION_END As String = "//#endregion"

        selection.SelectAll()
        Dim text As String = selection.Text
        selection.StartOfDocument(True)

        Dim startIndex As Integer
        Dim endIndex As Integer
        Dim lastIndex As Integer = 0
        Dim startRegions As Stack = New Stack()

        Do
            startIndex = text.IndexOf(REGION_START, lastIndex)
            endIndex = text.IndexOf(REGION_END, lastIndex)

            If startIndex = -1 AndAlso endIndex = -1 Then
                Exit Do
            End If

            If startIndex <> -1 AndAlso startIndex < endIndex Then
                startRegions.Push(startIndex)
                lastIndex = startIndex + 1
            Else
                ' Outline region ...
                selection.MoveToLineAndOffset(CalcLineNumber(text, CInt(startRegions.Pop())), 1)
                selection.MoveToLineAndOffset(CalcLineNumber(text, endIndex) + 1, 1, True)
                selection.OutlineSection()

                lastIndex = endIndex + 1
            End If
        Loop

        selection.StartOfDocument()
    End Sub

    Private Function CalcLineNumber(ByVal text As String, ByVal index As Integer)
        Dim lineNumber As Integer = 1
        Dim i As Integer = 0

        While i < index
            If text.Chars(i) = vbCr Then
                lineNumber += 1
                i += 1
            End If

            i += 1
        End While

        Return lineNumber
    End Function

End Module

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 :)