如何在JavaScript中实现区域/代码崩溃

如何在Visual Studio中实现区域aka代码折叠？

如果在JavaScript中有数百行，那么使用vb / C＃中的区域代码折叠将会更容易理解。 

#region My Code #endregion

博客条目在这里解释它和这个MSDN的问题 。

您必须使用Visual Studio 2003/2005/2008macros。

复制粘贴从博客条目保真的缘故：

  1. 打开macros浏览器
  2. 创build一个新的macros
  3. 将其命名为OutlineRegions
  4. 单击编辑macros并粘贴以下VB代码： 
 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
  1. 保存macros并closures编辑器
  2. 现在让我们分配一下这个macros的快捷方式。 转到工具 – >选项 – >环境 – >键盘，并在“显示命令包含”文本框中search您的macros
  3. 现在在文本框的“按快捷键”下可以input所需的快捷方式。 我使用Ctrl + M + E。 我不知道为什么 – 我刚刚进入第一次，现在就使用它:)

微软现在有一个VS 2010的扩展，它提供了这个function：

JScript编辑器扩展

对于那些即将使用Visual Studio 2012的用户，将存在Web Essentials 2012

对于那些即将使用视觉工作室2015，存在的Web Essentials 2015.3

用法和@prasad一模一样

对于正在使用最新版本的Visual Studio的开发者来说，这是个好消息

Web Essentials即将推出此function。

看一下这个

在这里输入图像描述

通过标记一段代码（不pipe任何逻辑块）并按下CTRL + M + H，您将select定义为可折叠和可展开的区域。

这很容易！

标记要折叠的部分，

CTRL + M + H

并在其左侧扩大使用“+”标记。

Visual Studio的JSEnhancements插件很好地解决了这个问题。

感谢0A0D的一个很好的答案。 我已经有好运了。 Darin Dimitrov也对限制JS文件的复杂性提出了一个很好的观点。 尽pipe如此，我还是会发现将function折叠到其定义的场合使浏览文件变得更容易。

总的来说，这个SO问题覆盖得很好。

我已经对macros进行了一些修改，以支持更高级的代码崩溃。 此方法允许您在//＃region关键字ala C＃之后放置一个描述，并将其显示在代码中，如下所示：

示例代码： 

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

更新macros： 

 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

在VS 2012和VS 2015上安装WebEssentials插件，你就可以做到这一点。

http://vswebessentials.com/features/javascript

如果你正在使用Resharper

休闲在这张照片中的步骤

在这里输入图像描述 然后写在模板编辑器中 

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

并将其命名为#region如图所示 在这里输入图像描述

希望这对你有所帮助

这些答案都不适用于2017年的视觉工作室。

VS 2017最好的插件： JavaScript地区

例1：

在这里输入图像描述

例2：

在这里输入图像描述

经testing和认可：

在这里输入图像描述

不仅仅是VS而是几乎所有的编辑。

(function /* RegionName */ () { ... })();

警告：有范围等缺点。

    Interesting Posts

    在Visual Studio 2010中，区域/代码在Javascript中折叠