讓Visual Studio 也支援JS程式碼摺疊功能 [ Visual Studio | #region | #endregion ]

 

前言

      Visual Studio的程式碼摺疊功能功能非常好用，#region #endregion 這個詞連搜狗的詞庫裡面都出現了(不含'#'號)，可見使用頻率很高，但是他不支援js的程式碼摺疊功能 : ( 最近Ext用得比較多，一寫就是上百行JS代碼，非常不方便，想著自己寫個擴充或外掛程式什麼的，意外搜到了下面的文章，已經用宏來實現了，本文可以理解為該文的簡單譯本，注意宏代碼部分我有所改動 : )
 

文章

      1.      Using #region Directive With JavaScript Files in Visual Studio

 

環境

      Microsoft Visual Studio 2008

 

本文

      1.      開啟宏資源管理員:視圖 -> 其他視窗 -> 宏資源管理員

 　　

      2.      建立一個新模組

　　

　　3.　　編輯宏:　　選中模組 -> 右鍵編輯

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()
        '農民伯伯 --- 自動為"//#endregion"結束的代碼添加最後一行，不然出錯
        If selection.Text.EndsWith(REGION_END) Then
            selection.EndOfLine()
            selection.NewLine()
            selection.SelectAll()
        End If

        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

　　　　儲存即可。這裡可以省去建立宏的步驟，他會根據代碼自動給你產生一個宏的。

　　　　注意我加的程式碼片段，如果不加，並且你的JS最後一行為#endregion，宏將報錯，顯示“值不在預期的範圍內”。

 

　　4.　　設定快速鍵

　　 

　　　　4.1　　工具 -> 選項 - > 環境 -> 鍵盤

　　　　4.2　　在顯示命令包含下面的文字框中輸入宏名outli，不用輸全，下面能顯示你建立的宏

　　　　4.3　　點一下 按快速鍵 下面的文字框， 然後自訂快速鍵組合，我定義的是Ctrl+M,Ctrl+J，點分配(別忘了！)，點確定。

 

　　5.效果

　　　　5.1　　輸入代碼:

//aasdsadsad

//#region
//#endregion

　　　　5.2　　快速鍵Ctrl+M,Ctrl+J啟動宏，能看到系統的右下角顯示可愛的小方塊在轉動，js編輯框顯示效果如下：

　　　　

　　　　5.3　　之後就可以用快速鍵Ctrl+M,Ctrl+L來[展開/摺疊]代碼了，注意關閉之後重新開啟需要再啟動一次宏，展開效果如下:

　　　　 

 

結束

　　想到不如做到，但做之前要是能先Google一下也許能事半功倍: )