how to implement regions/code collapse in javascript

JavascriptVisual StudioFoldingCode Regions

Javascript Problem Overview

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

Javascript Solutions

Solution 1 - Javascript

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

The Web Essentials are coming with this feature .

Check this out

enter image description here

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

Solution 2 - Javascript

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

JScript Editor Extensions

Solution 3 - Javascript

Thats easy!

Mark the section you want to collapse and,

> Ctrl+M+H

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

Solution 4 - Javascript

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

Solution 5 - Javascript

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:

  1. Open Macro Explorer
  2. Create a New Macro
  3. Name it OutlineRegions
  4. 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

5. Save the Macro and Close the Editor 6. Now let's assign shortcut to the macro. Go to Tools->Options->Environment->Keyboard and search for your macro in "show commands containing" textbox

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

Solution 6 - Javascript

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.

Solution 7 - Javascript

The JSEnhancements plugin for Visual Studio addresses this nicely.

Solution 8 - Javascript

For those who have come here for Visual Studio Code, the same syntax works

// #region MongoDB Client
const MongoClient = require('mongodb').MongoClient;
const url = constants.credentials["uat"].mongo.url
MongoClient.connect(url, { useUnifiedTopology: true }, function (err, client) {
    if (err) {
        console.log(err);
    }
    else {
        docDB = client.db("middlewareDB");
    }
});
// #endregion

When collapsed, it looks like below

enter image description here

Solution 9 - Javascript

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:

//#region InputHandler
var InputHandler = {
	inputMode: 'simple', //simple or advanced

	//#region filterKeys
	filterKeys: function(e) {
		var doSomething = true;
		if (doSomething) {
			alert('something');
		}
	},
	//#endregion filterKeys

	//#region handleInput
	handleInput: function(input, specialKeys) {
		//blah blah blah
	}
	//#endregion handleInput

};
//#endregion InputHandler

Updated Macro:

Option Explicit On
Option Strict On

Imports System
Imports EnvDTE
Imports EnvDTE80
Imports EnvDTE90
Imports System.Diagnostics
Imports System.Collections.Generic

Public Module JsMacros


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

		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 New Stack(Of Integer)

		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 ...
				Dim tempStartIndex As Integer = CInt(startRegions.Pop())
				selection.MoveToLineAndOffset(CalcLineNumber(text, tempStartIndex), CalcLineOffset(text, tempStartIndex))
				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) As Integer
		Dim lineNumber As Integer = 1
		Dim i As Integer = 0

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

			If text.Chars(i) = vbCr Then
				lineNumber += 1
				i += 1
				If text.Chars(i) = vbLf Then
					i += 1 'Swallow the next vbLf
				End If
			End If

			i += 1
		End While

		Return lineNumber
	End Function

	Private Function CalcLineOffset(ByVal text As String, ByVal index As Integer) As Integer
		Dim offset As Integer = 1
		Dim i As Integer = index - 1

		'Count backwards from //#region to the previous line counting the white spaces
		Dim whiteSpaces = 1
		While i >= 0
			Dim chr As Char = text.Chars(i)
			If chr = vbCr Or chr = vbLf Then
				whiteSpaces = offset
				Exit While
			End If
			i -= 1
			offset += 1
		End While

		'Count forwards from //#region to the end of the region line
		i = index
		offset = 0
		Do
			Dim chr As Char = text.Chars(i)
			If chr = vbCr Or chr = vbLf Then
				Return whiteSpaces + offset
			End If
			offset += 1
			i += 1
		Loop

		Return whiteSpaces
	End Function

End Module

Solution 10 - Javascript

This is now natively in VS2017:

//#region fold this up

//#endregion

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.

Solution 11 - Javascript

For VS 2019, this should work without installing anything:

enter image description here

    //#region MyRegion1

    foo() {

    }

    //#endregion

    //#region MyRegion2

    bar() {

    }

    //#endregion

Solution 12 - Javascript

It works like a charm in PhpStorm

//#region My Region 1
    ...
//#endregion

//#region My Region 2
    ...
//#endregion

my regions

Solution 13 - Javascript

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

http://vswebessentials.com/features/javascript

Solution 14 - Javascript

For visual studio 2017.

    //#region Get Deactivation JS
    .
    .
    //#endregion Get Deactivation JS

This was not working earlier so I downloaded extension from here

Extension Name(JavaScript Regions) By Mads Kristensen

Solution 15 - Javascript

if you are using Resharper

fallow the steps in this pic

enter image description here then write this in template editor

  //#region $name$
$END$$SELECTION$
  //#endregion $name$

and name it #region as in this picture enter image description here

hope this help you

Solution 16 - Javascript

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

The best plugin for VS 2017: JavaScript Regions

Example 1:

enter image description here

Example 2:

enter image description here

Tested and approved:

enter image description here

Solution 17 - Javascript

Region should work without changing settings

//#region Optional Naming
    var x = 5 -0; // Code runs inside #REGION
    /* Unnecessary code must be commented out */
//#endregion

To enable collapsing comment area /**/

/* Collapse this

*/

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

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

Solution 18 - Javascript

Not only for VS but nearly for all editors.

Warning: has disadvantages such as scope.

Categories
Recommended Javascript Solutions
Recommended Visual Studio Solutions
Recommended Folding Solutions

Previous Solution:

My Git repository is in the wrong root directory. Can I move it? (../ instead of ./)

Git

Next Solution:

Unable to evaluate expression because the code is optimized or a native frame is on top of the call stack

asp.net.Net 3.5response.redirect

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionPrasadView Question on Stackoverflow
Solution 1 - JavascriptKaushik ThankiView Answer on Stackoverflow
Solution 2 - JavascriptBrianFinkelView Answer on Stackoverflow
Solution 3 - JavascriptUmit KayaView Answer on Stackoverflow
Solution 4 - JavascriptMCSIView Answer on Stackoverflow
Solution 5 - Javascriptuser195488View Answer on Stackoverflow
Solution 6 - JavascriptManish JainView Answer on Stackoverflow
Solution 7 - JavascriptJoel HarrisView Answer on Stackoverflow
Solution 8 - JavascriptLakshman PilakaView Answer on Stackoverflow
Solution 9 - JavascriptMichael La VoieView Answer on Stackoverflow
Solution 10 - JavascriptfriggleView Answer on Stackoverflow
Solution 11 - JavascriptLuke VoView Answer on Stackoverflow
Solution 12 - JavascriptAbdurrahmanYView Answer on Stackoverflow
Solution 13 - JavascriptasteriskdothmgView Answer on Stackoverflow
Solution 14 - JavascriptCharlieView Answer on Stackoverflow
Solution 15 - JavascriptBasheer AL-MOMANIView Answer on Stackoverflow
Solution 16 - JavascriptMatheus MirandaView Answer on Stackoverflow
Solution 17 - Javascript4baad4View Answer on Stackoverflow
Solution 18 - JavascriptBurak TamtürkView Answer on Stackoverflow