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
This question is related to
javascript
visual-studio
folding
code-regions
The answer is
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.
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
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
None of these answers did not work for me with visual studio 2017.
The best plugin for VS 2017: JavaScript Regions
Example 1:
Example 2:
Tested and approved:
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.
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
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
Not only for VS but nearly for all editors.
(function /* RegionName */ () { ... })();
Warning: has disadvantages such as scope.
On VS 2012 and VS 2015 install WebEssentials plugin and you will able to do so.
It works like a charm in PhpStorm
//#region My Region 1
...
//#endregion
//#region My Region 2
...
//#endregion
Thats easy!
Mark the section you want to collapse and,
Ctrl+M+H
And to expand use '+' mark on its left.
if you are using Resharper
fallow the steps in this pic
then write this in template editor
//#region $name$
$END$$SELECTION$
//#endregion $name$
and name it #region as in this picture
hope this help you
The JSEnhancements plugin for Visual Studio addresses this nicely.
For VS 2019, this should work without installing anything:
//#region MyRegion1
foo() {
}
//#endregion
//#region MyRegion2
bar() {
}
//#endregion
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
Microsoft now has an extension for VS 2010 that provides this functionality:
Source: Stackoverflow.com