让Visual Studio 也支持JS代码折叠 —— 续 [ Visual Studio | Js | ScriptOutline | SmallOutline ]

简介:

前言

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

                  

                  藉此我们可以在方法间快速切换!注意这里使用的环境是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      选中要折叠的函数,出现如下提示

        

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

         

                        2.2.3.3      最终效果

         

      2.2.4  总结

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

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

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

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

 

            2.3      JavaScript Function Outliner插件 也请大家关注和支持此园友的插件 : )

 

结束      

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

 

转载:http://www.cnblogs.com/over140/archive/2009/06/22/1507564.html

目录
相关文章
|
12天前
|
JavaScript
原生js炫酷随机抽奖中奖效果代码
原生js随机抽奖是一个炫酷的根据数据随机抽奖的代码,该网页可进行随机抽取一个数据,页面动画高科技、炫酷感觉的随机抽奖效果,简单好用,欢迎下载!
29 3
原生js炫酷随机抽奖中奖效果代码
|
17天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
174 4
|
15天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
45 1
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
95 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
122 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
81 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
73 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
92 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
84 3