[英]how to implement regions/code collapse in javascript
如何在 Visual Studio 中為 JavaScript 實現區域又名代碼折疊？
如果 javascript 中有數百行，那么在 vb/C# 中使用帶有區域的代碼折疊會更容易理解。
#region My Code
#endregion
對於正在使用最新版本的 Visual Studio 的開發人員來說是個好消息
Web Essentials將提供此功能。
注意：對於 VS 2017 使用JavaScript 區域： https : //marketplace.visualstudio.com/items?itemName=MadsKristensen.JavaScriptRegions
Microsoft 現在為VS 2010提供了一個擴展，可以提供以下功能：
這很容易！
標記要折疊的部分，然后，
Ctrl+M+H
並擴展使用其左側的“+”標記。
對於那些即將使用 Visual Studio 2012 的人，存在Web Essentials 2012
對於那些即將使用 Visual Studio 2015 的人，存在Web Essentials 2015.3
用法與@prasad 所問的完全一樣
您必須使用 Visual Studio 2003/2005/2008 宏。
為了保真，從博客條目中復制 + 粘貼：
OutlineRegionsOption 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 + H，您將把選區定義為可折疊和可展開的區域。
Visual Studio 的JSEnhancements插件很好地解決了這個問題。
感謝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
這現在在 VS2017 中是原生的：
//#region fold this up
//#endregion
// 和 # 之間的空格無關緊要。
我不知道這是在哪個版本中添加的，因為我在更改日志中找不到任何提及。 我可以在 v15.7.3 中使用它。
對於 VS 2019，這應該可以在不安裝任何東西的情況下工作：
//#region MyRegion1
foo() {
}
//#endregion
//#region MyRegion2
bar() {
}
//#endregion
對於那些來這里學習 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
折疊后如下圖
在 VS 2012 和 VS 2015 上安裝 WebEssentials 插件，您將能夠這樣做。
//#region Get Deactivation JS
.
.
//#endregion Get Deactivation JS
這在早期不起作用所以我從這里下載了擴展
擴展名（JavaScript 區域） 作者：Mads Kristensen
它在 PhpStorm 中就像一個魅力
//#region My Region 1
...
//#endregion
//#region My Region 2
...
//#endregion
如果您使用的是Resharper
休耕這張照片中的步驟
然后在模板編輯器中寫這個
//#region $name$
$END$$SELECTION$
//#endregion $name$
並將其命名為#region如這張圖片所示
希望這對你有幫助
區域應該在不更改設置的情況下工作
//#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
不僅適用於 VS，而且幾乎適用於所有編輯器。
(function /* RegionName */ () { ... })();
警告：具有范圍等缺點。
如何使用intel xdk在javascript中實現區域/代碼折疊？
[英]how to implement regions/code collapse in javascript using intel xdk?
區域/代碼在Visual Studio 2010中的Javascript中崩潰
[英]Regions/code collapse in Javascript in Visual Studio 2010
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.