VSCode的一些小操作(四)——自定义折叠代码区域

当我们的代码量很多
我们会把一块一块的代码折叠起来

就像这样:

VSCode的一些小操作(四)——自定义折叠代码区域_第1张图片

我们只需要点击父盒子那一行左边的折叠按钮,就可以将整个父盒子这一块的代码进行折叠:

VSCode的一些小操作(四)——自定义折叠代码区域_第2张图片
然后当我们想在折叠的这段代码里做一些修改的时候,再把它打开就行了
平时这段代码不经常改动的时候就可以将这段代码折叠起来,这样每次上下滚动就不用再经过这一大块代码了。

html的代码可以按照他的结构层次进行折叠
但是CSS折叠的时候并不是这么理想

VSCode的一些小操作(四)——自定义折叠代码区域_第3张图片

它顶多就能这样:

VSCode的一些小操作(四)——自定义折叠代码区域_第4张图片
如果它不能向我们希望的那样按照html的结构层次进行折叠的话,那这个折叠就没有什么意义了

如果我们可以自定义折叠代码的区域那就好了
当然VSCode是不会让我们失望的

好了废话说的差不多了开始本文的正题

自定义折叠代码区域的方法:

既然是一个区域,那就有开头结尾
我们只需要在
区域的开头写上:

/* #region */

区域的末尾写上:

/* #endregion */
然后就会发现这个位置

VSCode的一些小操作(四)——自定义折叠代码区域_第5张图片

出现了一个折叠代码的按钮,点它

VSCode的一些小操作(四)——自定义折叠代码区域_第6张图片
就可以将region和endregion中间的所有代码折叠起来了
这样就可以达到和html一样的折叠效果了

js代码也一样

VSCode的一些小操作(四)——自定义折叠代码区域_第7张图片
VSCode的一些小操作(四)——自定义折叠代码区域_第8张图片

C,C++,Java 这些也同理

VSCode的一些小操作(四)——自定义折叠代码区域_第9张图片

至于每个语言要怎么写这个东西,可以参考这张表↓

VSCode的一些小操作(四)——自定义折叠代码区域_第10张图片

VSCode官网的传送门


ヾ(≧∪≦*)ノ〃

你可能感兴趣的:(VSCode的一些小操作(四)——自定义折叠代码区域)