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

小开

最佳答案

必须使用 VisualStudio2003/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

保存宏并关闭编辑器
现在让我们给宏指定一个快捷方式，进入 Tools-> Options-> Environment-> Keyboard，在“ show command  包含”文本框中搜索您的宏
现在在文本框的“按快捷键”下，您可以输入所需的快捷键。我用 Ctrl + M + E。我不知道为什么-我只是第一次输入它，现在使用它:)

小开

感谢 0A0D给出了一个很好的答案。我运气不错。关于限制 JS 文件的复杂性，达林 · 迪米特洛夫也提出了一个很好的论点。尽管如此，我还是发现有时候将函数折叠到它们的定义中会使浏览文件变得更加容易。

关于 # 地区一般，这个有个问题涵盖它相当不错。

我对宏做了一些修改，以支持更高级的代码折叠。这个方法允许您在//# 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

小开

VisualStudio 的增强版本插件很好地解决了这个问题。

小开

微软现在为 VS 2010提供了一个扩展，它提供了以下功能:

JScript 编辑器扩展

小开

对于那些即将使用视觉工作室2012年，存在的 《网络要闻》2012年版

对于那些即将使用视觉工作室2015年，存在的 网站要素2015.3

用法完全符合@prasad 的要求

小开

通过标记一段代码(不管任何逻辑块)并点击 CTRL + M + H，您将把选区定义为一个可折叠和可展开的区域。

小开

不仅对 VS，而且对几乎所有的编辑器。

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

警告: 有范围等缺点。

小开

很简单！

标记要折叠的部分,

Ctrl + M + H

并在其左侧扩展使用’+’标记。

小开

在 VS2012和 VS2015上安装 WebEs待办事项插件，你将能够这样做。

Http://vswebessentials.com/features/javascript

小开

对于正在使用最新版本的可视化工作室的开发人员来说，这是个好消息

网页基本资料带有这个特性。

看看这个

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

小开

如果你使用的是清醒一下

休闲的步骤在这张图片

然后在模板编辑器中编写

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

并命名为 #region，如图所示

希望这个能帮到你

小开

这些答案都不适用于我的2017年视觉工作室。

VS 2017最佳插件: JavaScript 区域

例子一:

例二:

测试和批准:

小开

这是 VS2017版本中的内容:

//#region fold this up


//#endregion

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

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

小开

2017视觉工作室。

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

这在之前没有工作，所以我从给你下载了扩展

扩展名(JavaScript 区域)作者: Mads Kristensen

小开

区域应在不更改设置的情况下工作

//#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 注释折叠隐藏区域 Visual Studio code vscode 2018 version 1.2 + Https://code.visualstudio.com/updates/v1_17#_folding-regions

小开

就像 PhpStorm 里的咒语一样

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


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

小开

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

    //#region MyRegion1


foo() {


}


//#endregion


//#region MyRegion2


bar() {


}


//#endregion

小开

对于那些来到这里为 VisualStudio密码，同样的语法工作

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

当塌陷时，它看起来像下面