让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一下也许能事半功倍: )

上文让JS代码折叠的功能能用了，本文将对代码继续改进以期更好用、更实用，随后有介绍Visual Studio JS方面的几个插件。

文章

1. VS2003折叠代码的Micro

2. MSDN

3. Document Outline for Client Script in Visual Studio 2005

正文

一、继续上文改造，主要是支持region 后面跟注释和显示注释

　　　　1.1　　效果图，这里就不贴步骤了，上文有详细的步骤。

　　　　1.2　　宏代码，修改上文使用的宏即可。

Option Strict Off
Option Explicit Off

Imports System
Imports EnvDTE
Imports EnvDTE80
Imports System.Diagnostics
Imports System.Collections

Public Module JsMacros

    Sub OutlineRegions()

        Const REGION_START As String = "//region"
        Const REGION_END As String = "//endregion"

        Dim selection As EnvDTE.TextSelection = DTE.ActiveDocument.Selection
        Dim startRegions As Stack = New Stack()         '堆栈
        Dim intCollapseStart As Integer = 0
        Dim intCollapseNum As Integer = 0
        Dim strLines() As String

        selection.StartOfDocument(True)
        selection.SelectAll()
        strLines = selection.Text.Split(vbCrLf)         '获取所有行

        For i = 0 To strLines.Length - 1
            If strLines(i).TrimStart.StartsWith(REGION_START) Then
                startRegions.Push(i + 1)                            '保存行号
            End If
            If strLines(i).TrimStart.StartsWith(REGION_END) Then
                intCollapseStart = startRegions.Pop() + 1           '返回行号
                intCollapseNum = (i + 1) - intCollapseStart + 1     '返回要折叠的行数
                selection.GotoLine(intCollapseStart)
                selection.LineDown(True, intCollapseNum)
                selection.SwapAnchor()
                selection.OutlineSection()
            End If
        Next

        selection.StartOfDocument()
    End Sub

End Module

　　　　1.3　　注意

　　　　　　1.3.1.　　由上文的"//#region" 、"//#endregion"修改成了本文的"//region"和"//endregion" 。

　　　　　　1.3.2 　　如果想把"//region"这一行也隐藏掉只剩下"...",只需要将宏代码"intCollapseStart = startRegions.Pop() + 1"后面的"+1"去掉即可。遗憾的是没能弄出C# 折叠的那种效果出来。

　　　　　　1.3.3　　如果还想支持if for 等关键字的折叠，强烈推荐文章1，本文也是在此文的基础上修改的，改正了"//region"后面不能接注释的缺陷。

　　二、支持JS的Visual Studio插件

2.1 ScriptOutline 从试用的情况看来并没有折叠，但是他显示了方法大纲，且无需设置快捷键，作为插件和VS集成，同样能达到快速找到方法的目的。参照文章3。

2.1.1 下载插件： http://www.geocities.com/evgenypages/ScriptOutline.zip

2.1.2 拷贝压缩文件中的ScriptOutline.AddIn、 ScriptOutline.dll到目录 C:\Documents and Settings\<username>\My Documents\Visual Studio 2005\Addins

如果Addins目录没有的话自己建一个就行。

2.1.3 工具(Tools) -> 外部程序管理器(Add-in Manager...)，勾上ScriptOutline插件，确定即可显示Script Outline窗口。

2.1.4 编写测试代码，效果如图：