让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,如需转载请自行联系原作者

相关文章
|
1月前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
10天前
|
JavaScript 前端开发 开发工具
【JavaScript 与 TypeScript 技术专栏】TypeScript 如何提升 JavaScript 代码的可读性与可维护性
【4月更文挑战第30天】TypeScript 提升 JavaScript 代码的可读性和可维护性,主要通过静态类型系统、增强代码组织、智能提示与错误检测、文档化和在大型项目中的优势。静态类型减少误解,类和接口提供结构,智能提示提高编码效率,类型注解充当内置文档。在大型项目中,TypeScript 降低理解差异,平滑迁移现有 JavaScript 项目,助力提高开发效率和项目质量。
|
17天前
|
JavaScript 前端开发 算法
< JavaScript小技巧:如何优雅的用【一行代码 】实现Js中的常用功能 >
在开发中,采用简洁的语法和结构,遵循一致的命名规范,具有良好的代码组织和注释,能很好的提高代码的质量。可读性:易于阅读和理解。清晰的命名、简洁的语法和良好的代码结构可以使代码的意图更加明确,降低理解代码的难度,提高代码的可读性。可维护性:易于维护。当代码逻辑清晰、结构简洁时,开发者可以更快速地定位和修复bug,进行功能扩展或修改。同时,可读性高的代码也有助于后续的代码重构和优化。可扩展性:更具有扩展性和灵活性。清晰的代码结构和简洁的代码风格使得添加新功能、修改现有功能或扩展代码更加容易。
< JavaScript小技巧:如何优雅的用【一行代码 】实现Js中的常用功能 >
|
17天前
|
前端开发 JavaScript 容器
JavaScript、CSS像素动画特效代码
此示例创建一个带有像素粒子的容器,每隔300毫秒就会动态添加一个新的像素粒子,然后通过CSS的关键帧动画(`@keyframes`)使它们产生上升和逐渐消失的动画效果。你可以根据需要修改像素粒子的颜色、大小、动画效果和创建速度。
14 0
|
24天前
|
JavaScript
js校验统一社会信用代码
js校验统一社会信用代码
27 0
|
27天前
|
监控 前端开发 JavaScript
如何在浏览器中使用javaScript进行代码调试
【4月更文挑战第11天】在浏览器中调试JavaScript是前端开发的关键技能。使用开发者工具(可通过F12、右键检查或菜单栏访问),遵循以下步骤:1) 打开Sources标签页查看所有脚本;2) 设置断点在需要暂停的代码行;3) 刷新页面触发断点;4) 利用调试工具如Scopes、Watch、Call Stack等检查代码状态;5) 使用Console辅助调试;6) 利用其他工具如Network、Performance和Memory进行性能分析。确保使用最新工具,保持代码清晰,以提升调试效率。
49 4
|
1月前
|
小程序 开发者
微信小程序“Error: xxx.js 已被代码依赖分析忽略,无法被其他模块引用”报错?
微信小程序“Error: xxx.js 已被代码依赖分析忽略,无法被其他模块引用”报错?
|
11天前
|
存储 移动开发 JavaScript
学习javascript,前端知识精讲,助力你轻松掌握
学习javascript,前端知识精讲,助力你轻松掌握
|
17天前
|
JavaScript 前端开发 测试技术
学习JavaScript
【4月更文挑战第23天】学习JavaScript
13 1
|
25天前
|
JavaScript 前端开发 应用服务中间件
node.js之第一天学习
node.js之第一天学习