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

简介:

正文

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


本文转自over140 51CTO博客,原文链接:http://blog.51cto.com/over140/584856,如需转载请自行联系原作者

相关文章
|
17天前
|
JavaScript 前端开发 测试技术
在 golang 中执行 javascript 代码的方案详解
本文介绍了在 Golang 中执行 JavaScript 代码的四种方法:使用 `otto` 和 `goja` 嵌入式 JavaScript 引擎、通过 `os/exec` 调用 Node.js 外部进程以及使用 WebView 嵌入浏览器。每种方法都有其适用场景,如嵌入简单脚本、运行复杂 Node.js 脚本或在桌面应用中显示 Web 内容。
51 15
在 golang 中执行 javascript 代码的方案详解
|
1月前
|
JavaScript
原生js炫酷随机抽奖中奖效果代码
原生js随机抽奖是一个炫酷的根据数据随机抽奖的代码,该网页可进行随机抽取一个数据,页面动画高科技、炫酷感觉的随机抽奖效果,简单好用,欢迎下载!
46 3
原生js炫酷随机抽奖中奖效果代码
|
21天前
|
JSON JavaScript 关系型数据库
node.js连接GBase 8a 数据库 并进行查询代码示例
node.js连接GBase 8a 数据库 并进行查询代码示例
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
449 4
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
135 1
|
JavaScript 前端开发
JavaScript原生折叠扩展收缩菜单带缓冲动画
JavaScript原生折叠扩展收缩菜单带缓冲动画 @落雨 机房介绍 上海三门路数据中心 位于上海市杨浦区三门路561号1楼C1室,一期机架数量200个,总规划机架数量500个,主要服务于华东地区的IDC应用及全国范围内的企业云计算需求。
1033 0
|
Web App开发 前端开发 JavaScript
javascript:折叠菜单
  最近做网页用到了折叠菜单,在网上搜索了一番后还不错,现在放到自己的博客中。   参考网页:http://www.blueidea.com/tech/web/2006/3824.asp   具体demo下载:http://www.blueidea.com/articleimg/2006/07/3824/demo.zip   下面是自己改的一个折叠菜单,导入三个js文件就可以执行啦。
995 0
|
28天前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
25 1
JavaScript中的原型 保姆级文章一文搞懂
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
103 2