让Visual Studio 也支持JS代码折叠 [ Visual Studio | #region | #endregion ]

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