如何在 Visual Studio 中为 JavaScript 实现区域（即代码折叠）？
如果 javascript 中有数百行，那么使用带有区域的代码折叠（如 vb/C#）会更容易理解。
#region My Code
#endregion
问问题
138827 次
18 回答
67
对于使用最新版本 Visual Studio 的开发人员来说是个好消息
Web Essentials带有此功能。
注意：对于 VS 2017，请使用JavaScript 区域： https ://marketplace.visualstudio.com/items?itemName=MadsKristensen.JavaScriptRegions
于 2016-02-15T12:21:25.103 回答
52
微软现在有一个VS 2010的扩展来提供这个功能：
于 2011-06-13T14:32:22.800 回答
41
这很容易！
标记您要折叠的部分，然后，
Ctrl+M+H
并在其左侧扩展使用“+”标记。
于 2015-09-09T08:38:25.093 回答
32
对于那些即将使用 Visual Studio 2012 的人来说，存在Web Essentials 2012
对于那些即将使用 Visual Studio 2015 的人来说，存在Web Essentials 2015.3
用法与@prasad 询问的完全一样
于 2013-10-01T17:57:50.197 回答
26
通过标记一段代码（不管任何逻辑块）并点击 CTRL + M + H 您将选择定义为可折叠和可扩展的区域。
于 2014-10-06T10:00:50.717 回答
26
您必须使用 Visual Studio 2003/2005/2008 宏。
为了保真，从博客条目中复制 + 粘贴：
- 打开宏资源管理器
- 创建一个新宏
- 给它命名
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
- 保存宏并关闭编辑器
- 现在让我们为宏分配快捷方式。转到工具->选项->环境->键盘并在“显示包含的命令”文本框中搜索您的宏
- 现在在“按下快捷键”下的文本框中，您可以输入所需的快捷键。我使用 Ctrl+M+E。我不知道为什么 - 我只是第一次进入它现在使用它:)
于 2009-12-17T13:01:27.540 回答
20
Visual Studio的JSEnhancements插件很好地解决了这个问题。
于 2011-05-11T18:23:51.893 回答
9
感谢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
于 2010-01-06T20:36:01.573 回答
9
对于那些来这里使用 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
折叠后如下图
于 2021-03-08T07:53:16.917 回答
7
这现在在 VS2017 中原生：
//#region fold this up
//#endregion
// 和 # 之间的空格无关紧要。
我不知道这是在哪个版本中添加的，因为我在更改日志中找不到任何提及。我可以在 v15.7.3 中使用它。
于 2018-06-07T16:05:29.923 回答
5
对于 VS 2019，这应该可以在不安装任何东西的情况下工作：
//#region MyRegion1
foo() {
}
//#endregion
//#region MyRegion2
bar() {
}
//#endregion
于 2020-10-31T21:48:18.457 回答
1
对于视觉工作室 2017。
//#region Get Deactivation JS
.
.
//#endregion Get Deactivation JS
这之前不起作用，所以我从这里下载了扩展
扩展名（JavaScript 区域）作者：Mads Kristensen
于 2018-06-14T09:36:44.537 回答
1
它在 PhpStorm 中就像一个魅力
//#region My Region 1
...
//#endregion
//#region My Region 2
...
//#endregion
于 2020-08-28T07:42:43.990 回答
1
在 VS 2012 和 VS 2015 上安装 WebEssentials 插件，您将能够这样做。
于 2015-11-26T00:30:06.267 回答
0
如果您使用的是Resharper
放松这张照片中的步骤
然后在模板编辑器中写这个
//#region $name$
$END$$SELECTION$
//#endregion $name$
并将其命名#region为这张图片
希望这对你有帮助
于 2016-10-24T15:24:36.423 回答
0
于 2017-06-13T01:56:33.733 回答
-2
区域应该在不更改设置的情况下工作
//#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
于 2018-11-02T10:17:52.200 回答
-4
不仅适用于 VS，而且几乎适用于所有编辑器。
(function /* RegionName */ () { ... })();
警告：具有范围等缺点。
于 2015-07-01T08:30:16.413 回答