前言

      Visual Studio的代码折叠功能非常好用,#region #endregion 这个词连搜狗的词库里面都出现了(不含'#'号),可见使用频率很高,但是他不支持js的代码折叠 : ( 最近Ext用得比较多,一写就是上百行JS代码,非常不方便,想着自己写个扩展或插件什么的,意外搜到了下面的文章,已经用宏来实现了,本文可以理解为该 文的简单译本,注意宏代码部分我有所改动 : )
 

文章

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

 

环境

      Microsoft Visual Studio 2008

 

正文

      1.      打开宏资源管理器:视图 -> 其他窗口 -> 宏资源管理器

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

      2.      创建一个新模块

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

  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 让Visual Studio 也支持JS代码折叠 [ Visual Studio | #region | #endregion ]
                selection.MoveToLineAndOffset(CalcLineNumber(text, CInt(startRegions.Pop())), 1)
                selection.MoveToLineAndOffset(CalcLineNumber(text, endIndex) 
+ 11True)
                selection.OutlineSection()

                lastIndex 
= endIndex + 1
            
End If
        
Loop

        selection.StartOfDocument()
    
End Sub

    
Private Function CalcLineNumber(ByVal text As StringByVal 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.  设置快捷键

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

    4.1  工具 -> 选项 - > 环境 -> 键盘

    4.2  在显示命令包含下面的文本框中输入宏名outli,不用输全,下面能显示你新建的宏

    4.3  点一下 按快捷键 下面的文本框, 然后自定义快捷键组合,我定义的是Ctrl+M,Ctrl+J,点分配(别忘了!),点确定。

 

  5.效果

    5.1  输入代码:


//aasdsadsad

//#region
//
#endregion

    5.2  快捷键Ctrl+M,Ctrl+J启动宏,能看到系统的右下角显示可爱的小方块在转动,js编辑框显示效果如下:

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

    5.3  之后就可以用快捷键Ctrl+M,Ctrl+L来[展开/折叠]代码了,注意关闭之后重新打开需要再启动一次宏,展开效果如下:

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

 

结束

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

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

 

文章

      1.      VS2003折叠代码的Micro

      2.      MSDN

      3.      Document Outline for Client Script in Visual Studio 2005

 

正文

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

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

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

    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      编写测试代码,效果如图:

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

                  藉此我们可以在方法间快速切换!注意这里使用的环境是Microsoft Visual Studio 2005。

                  

            2.2      SmartOutline

                  2.2.1  下载 http://submain.com/download/smartoutline/ 输入邮箱地址点下载即可。

                  2.2.2      安装插件 SmartOutline_v1.1.msi ,下一步下一步就行。工具栏会出现SmallOutline,可能需要重启VS。

                  2.2.3      编写测试代码,依次按步骤:

                        2.2.3.1      选中要折叠的函数,出现如下提示

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

                        2.2.3.2      点击提示或输入组合快捷键 Alt+S、Alt+C ,弹出如下对话框,输入JS代码折叠后显示的注释名

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

                        2.2.3.3      最终效果

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

      2.2.4  总结

        比较之下还是这个最好用,如下优点:

        a).  不污染源代码,和C#里面写#region的效果一样。

        b).  折叠效果好,能显示折叠后代码块的注释,不需要像宏那样关掉之后重新激活。

        c).  此插件同时支持VS2005和VS2008,不仅如此,还支持C#、HTML、CSS等,可以从 SmallOutline -> General -> Enable SmallOutline for the following files下面的列表里看到支持的其他文件。

 

            2.3      结束      

  宏是个好东东,虽然有现成的插件用,仍然假借这个机会来学习一翻,甚至有想法通过宏来辅助ORM工具生成一些代码,以及对代码生成均有参考价值:)

 

相关文章:

  • 2021-11-20
  • 2022-12-23
  • 2022-12-23
  • 2022-01-15
  • 2021-12-19
  • 2021-04-30
  • 2021-11-20
猜你喜欢
  • 2021-10-10
  • 2021-07-04
  • 2021-04-13
相关资源
相似解决方案