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

how to implement regions/code collapse in javascript

提问by Prasad

How can you implement regions a.k.a. code collapse for JavaScript in Visual Studio?

如何在 Visual Studio 中为 JavaScript 实现区域又名代码折叠？

If there are hundreds of lines in javascript, it'll be more understandable using code folding with regions as in vb/C#.

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

#region My Code

#endregion

采纳答案by Manish Jain

Blog entry here explains itand this MSDN question.

此处的博客条目解释了它和这个MSDN 问题。

You have to use Visual Studio 2003/2005/2008 Macros.

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

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:

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

1. Save the Macro and Close the Editor
2. Now let's assign shortcut to the macro. Go to Tools->Options->Environment->Keyboard and search for your macro in "show commands containing" textbox
3. 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 :)

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

回答by BrianFinkel

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

Microsoft 现在为VS 2010提供了一个扩展，可以提供以下功能：

JScript Editor Extensions

JScript 编辑器扩展

回答by Kaushik Thanki

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

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

The Web Essentialsare coming with this feature .

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

Check this out

看一下这个

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

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

回答by Umit Kaya

Thats easy!

这很容易！

Mark the section you want to collapse and,

标记要折叠的部分，然后，

Ctrl+M+H

Ctrl+M+H

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

并扩展使用其左侧的“+”标记。

回答by MCSI

For those about to use the visual studio 2012, exists the Web Essentials 2012

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

For those about to use the visual studio 2015, exists the Web Essentials 2015.3

对于那些即将使用 Visual Studio 2015 的人，存在Web Essentials 2015.3

The usage is exactly like @prasad asked

用法与@prasad 所问的完全一样

回答by Manish Jain

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.

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

回答by Joel Harris

The JSEnhancementsplugin for Visual Studio addresses this nicely.

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

回答by Michael La Voie

Thanks to 0A0Dfor a great answer. I've had good luck with it. Darin Dimitrovalso 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.

感谢0A0D提供了一个很好的答案。我很幸运。 Darin Dimitrov还就限制 JS 文件的复杂性提出了很好的论据。尽管如此，我确实发现在某些情况下，将函数折叠到其定义中可以更轻松地浏览文件。

Regarding #region in general, this SO Questioncovers it quite well.

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

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:

我对宏做了一些修改以支持更高级的代码折叠。此方法允许您在 //#region 关键字 ala C# 之后放置一个描述，并将其显示在代码中，如下所示：

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

回答by friggle

This is now natively in VS2017:

这现在在 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.

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

回答by asteriskdothmg

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

在 VS 2012 和 VS 2015 上安装 WebEssentials 插件，您将能够这样做。

http://vswebessentials.com/features/javascript

http://vswebessentials.com/features/javascript