让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

目录
相关文章
|
2月前
|
JavaScript 前端开发 算法
流量分发代码实战|学会用JS控制用户访问路径
流量分发工具(Traffic Distributor),又称跳转器或负载均衡器,可通过JavaScript按预设规则将用户随机引导至不同网站,适用于SEO优化、广告投放、A/B测试等场景。本文分享一段不到百行的JS代码,实现智能、隐蔽的流量控制,并附完整示例与算法解析。
78 1
|
3月前
|
JavaScript 前端开发
怀孕b超单子在线制作,p图一键生成怀孕,JS代码装逼娱乐
模拟B超单的视觉效果,包含随机生成的胎儿图像、医疗文本信息和医院标志。请注意这仅用于前端开发学习
|
3月前
|
JavaScript
JS代码的一些常用优化写法
JS代码的一些常用优化写法
65 0
|
5月前
|
存储 JavaScript 前端开发
在NodeJS中使用npm包进行JS代码的混淆加密
总的来说,使用“javascript-obfuscator”包可以帮助我们在Node.js中轻松地混淆JavaScript代码。通过合理的配置,我们可以使混淆后的代码更难以理解,从而提高代码的保密性。
397 9
|
6月前
|
前端开发 JavaScript
【Javascript系列】Terser除了压缩代码之外,还有优化代码的功能
Terser 是一款广泛应用于前端开发的 JavaScript 解析器和压缩工具,常被视为 Uglify-es 的替代品。它不仅能高效压缩代码体积,还能优化代码逻辑,提升可靠性。例如,在调试中发现,Terser 压缩后的代码对删除功能确认框逻辑进行了优化。常用参数包括 `compress`(启用压缩)、`mangle`(变量名混淆)和 `output`(输出配置)。更多高级用法可参考官方文档。
396 11
|
6月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
8月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
320 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
6月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
8月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
181 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
7月前
|
人工智能 数据可视化 机器人
【通义灵码】三句话生成P5.js粒子特效代码,人人都可以做交互式数字艺术
我发掘出的通义灵码AI程序员新玩法:三句话生成P5.js粒子特效代码,人人都可以做交互式数字艺术
270 6