Question

如何在Visual Studio中为JavaScript实现区域a.k.a.代码折叠？

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

#region My Code

#endregion

Answer 1

Microsoft现在提供了 VS 2010 的扩展程序，可以提供此功能：

JScript Editor Extensions

Answer 2

使用最新版Visual Studio的开发人员的好消息

Web Essentials即将推出此功能。

Check this out

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

Answer 3

太容易了！

标记要折叠的部分，

控制+ M + H

并扩大使用＆＃39; +＆＃39;在左边标记。

Answer 4

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

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

用法与@prasad问题

完全相同

Answer 5

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

Answer 6

Blog entry here explains it和此MSDN question。

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

从博客条目中复制+粘贴以保证真实性：

打开Macro Explorer
创建新宏
将其命名为OutlineRegions
单击编辑宏并粘贴以下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

保存宏并关闭编辑器
现在让我们为宏分配快捷方式。转到工具 - ＆gt;选项 - ＆gt;环境 - ＆gt;键盘并在“显示包含”文本框的命令
现在在“按快捷键”下的文本框中，您可以输入所需的快捷方式。我使用Ctrl + M + E.我不知道为什么 - 我刚刚第一次进入并现在使用它：）

Answer 7

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

Answer 8

感谢0A0D提供了一个很好的答案。我好运。 Darin Dimitrov也就限制JS文件的复杂性提出了一个很好的论据。尽管如此，我确实发现将函数折叠到其定义的过程更容易浏览文件。

关于#region，一般来说，SO Question很好地涵盖了它。

我对宏进行了一些修改，以支持更高级的代码崩溃。这个方法允许你在//＃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 9

对于那些为了 Visual Studio 代码来到这里的人来说，同样的语法有效

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

现在这本身就出现在VS2017中：

//#region fold this up

//#endregion

//和＃之间的空格并不重要。

我不知道添加了什么版本，因为我在更改日志中找不到任何提及它的内容。我可以在v15.7.3中使用它。

Answer 11

对于VS 2019，这应该无需安装任何东西即可工作：

    //#region MyRegion1

    foo() {

    }

    //#endregion

    //#region MyRegion2

    bar() {

    }

    //#endregion

Answer 12

在VS 2012和VS 2015上安装WebEssentials插件，您就可以这样做。

http://vswebessentials.com/features/javascript

Answer 13

它在PhpStorm中就像一个魅力

//#region My Region 1
    ...
//#endregion

//#region My Region 2
    ...
//#endregion

Answer 14

如果您使用Resharper

休会这张照片中的步骤

然后在模板编辑器中写这个

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

并将其命名为#region，如此图所示

希望这能帮到你

Answer 15

这些答案都不适用于2017年的Visual Studio。

VS 2017的最佳插件：JavaScript Regions

示例1：

示例2：

经过测试和批准：

Answer 16

2017年视觉工作室。

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

之前没有使用，所以我从here

下载了扩展程序

Answer 17

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

BaseDataHolder

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

BaseDataHolder

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

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

Answer 18

不仅适用于VS，也适用于所有编辑。

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

警告：有缺点，例如范围。

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

18 个答案:

2017年视觉工作室。