how to implement regions code collapse in javascript

Question

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

User · Answer

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

User · Answer

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

User · Answer

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  lt  gt  -1 AndAlso startIndex  lt  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  lt  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

User · Answer

Microsoft now has an extension for VS 2010 that provides this functionality   JScript Editor Extensions

User · Answer

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

User · Answer

Thats easy   Mark the section you want to collapse and       Ctrl M H   And to expand use     mark on its left

User · Answer

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  lt  gt  -1 AndAlso startIndex  lt  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  lt  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  gt   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

User · Answer

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

User · Answer

The JSEnhancements plugin for Visual Studio addresses this nicely

User · Answer

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

User · Answer

It works like a charm in PhpStorm    region My Region 1            endregion     region My Region 2            endregion

User · Answer

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

User · Answer

Not only for VS but nearly for all editors    function    RegionName                     Warning  has disadvantages such as scope

User · Answer

For VS 2019  this should work without installing anything          region MyRegion1      foo                    endregion         region MyRegion2      bar                    endregion

User · Answer

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

User · Answer

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

User · Answer

On VS 2012 and VS 2015 install WebEssentials plugin and you will able to do so   http   vswebessentials com features javascript

[javascript] how to implement regions/code collapse in javascript

Examples related to javascript

Examples related to visual-studio

Examples related to folding

Examples related to code-regions