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

Question

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

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

#region My Code

#endregion

Answer 1

Microsoft现在有一个VS 2010扩展,提供此功能:

JScript编辑器扩展

Answer 2

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

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

看一下这个

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

Answer 3

这很简单!

标记要折叠的部分,

CTRL + M + H

并在左侧扩展使用"+"标记.

Answer 4

对于那些即将使用visual studio 2012的人来说,存在Web Essentials 2012

对于那些即将使用visual studio 2015的人来说,存在Web Essentials 2015.3

用法与@prasad一样

Answer 5

通过标记代码的一部分(不管任何逻辑块)并按CTRL + M + H,您将选择定义为可折叠和可扩展的区域.

Answer 6

这里的博客条目解释了它和这个MSDN问题.

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

为了忠实起见,从博客条目复制+粘贴:

1. 打开Macro Explorer
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.我不知道为什么 - 我刚刚第一次进入并立即使用它:)

Answer 7

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

Answer 8

对于那些来这里学习 Visual Studio Code的人来说，相同的语法是有效的

// #region MongoDB Client
const MongoClient = require('mongodb').MongoClient;
const url = constants.credentials["uat"].mongo.url
MongoClient.connect(url, { useUnifiedTopology: true }, function (err, client) {
    if (err) {
        console.log(err);
    }
    else {
        docDB = client.db("middlewareDB");
    }
});
// #endregion

折叠后如下图所示

Answer 9

感谢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

Answer 10

这现在在 VS2017 中是原生的：

//#region fold this up

//#endregion

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

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

Answer 11

对于 VS 2019，这应该可以在不安装任何东西的情况下工作：

    //#region MyRegion1

    foo() {

    }

    //#endregion

    //#region MyRegion2

    bar() {

    }

    //#endregion