如何在javascript中实现区域/代码折叠

如何在Visual Studio中实现JavaScript的区域（也称为代码折叠）？

如果javascript中有成百上千行，那么使用带vb / C＃中的区域的代码折叠将更容易理解。

#region My Code

#endregion

这里的博客条目解释了此问题以及MSDN问题。

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

为了保真起见，从Blog条目复制+粘贴：

1. 打开宏浏览器
2. 创建一个新的宏
3. 命名 OutlineRegions
4. 单击编辑宏，然后粘贴以下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

5. 保存宏并关闭编辑器
6. 现在让我们为宏分配快捷方式。转到“工具”->“选项”->“环境”->“键盘”，然后在“显示包含以下内容的命令”文本框中搜索您的宏
7. 现在，在“按快捷键”下的文本框中，您可以输入所需的快捷方式。我使用Ctrl + M + E。我不知道为什么-我是第一次输入它，现在就使用它：)

Microsoft现在具有VS 2010扩展，它提供了以下功能：

JScript编辑器扩展

对于使用最新版本的Visual Studio的开发人员来说是个好消息

该网站要点都具有此功能的到来。

看一下这个

注意：对于VS 2017，请使用JavaScript区域： https : //marketplace.visualstudio.com/items?itemName=MadsKristensen.JavaScriptRegions

这很简单！

标记要折叠的部分，

Ctrl + M + H

并使用左侧的“ +”号进行扩展。

对于将要使用Visual Studio 2012的用户，存在Web Essentials 2012

对于将要使用Visual Studio 2015的用户，存在Web Essentials 2015.3

用法就像@prasad问

通过标记一段代码（与逻辑块无关）并按CTRL + M + H，您可以将选择内容定义为可折叠和可扩展的区域。

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

感谢0A0D提供了一个很好的答案。我祝你好运。 Darin Dimitrov还就限制JS文件的复杂性提出了很好的论据。不过，我确实发现了一些情况，根据它们的定义折叠函数可以使浏览文件变得更加容易。

一般而言，关于#region，这个SO问题涵盖了它。

我对宏做了一些修改，以支持更高级的代码折叠。此方法使您可以在//＃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

更新的宏：

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

这现在是VS2017的本地版本：

//#region fold this up

//#endregion

//和＃之间的空格无关紧要。

我不知道添加了哪个版本，因为在变更日志中找不到任何提及。我可以在v15.7.3中使用它。

在VS 2012和VS 2015上，安装WebEssentials插件即可。

http://vswebessentials.com/features/javascript

如果您使用的是Resharper

休憩这张照片中的步骤

然后在模板编辑器中编写

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

并命名#region为这张照片

希望这对你有帮助

这些答案均不适用于Visual Studio 2017。

VS 2017的最佳插件：JavaScript地区

范例1：

范例2：

经过测试和批准：

适用于Visual Studio 2017。

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

之前无法使用，所以我从这里下载了扩展程序

区域应该工作而不更改设置

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

启用折叠式注释区域/ ** /

/* Collapse this

*/

设置->搜索“折叠”->编辑器：折叠策略->从“自动”到“缩进”。

标记：Node.js Nodejs Node js Javascript ES5 ECMAScript注释折叠隐藏区域Visual Studio代码vscode 2018版本1.2+ https://code.visualstudio.com/updates/v1_17#_folding-regions

不仅适用于VS，而且几乎适用于所有编辑器。

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

警告：具有范围之类的缺点。