vscode学习笔记(二):代码折叠,小地图和面包屑

有时在我们编码时,想要看到更少的内容,或者只想看到想看的内容

今天就来看看这三个功能:代码折叠、小地图、面包屑

代码折叠

首先是代码折叠,很多语言都是用花括号来包括代码块,比如说类的定义、函数的定义、条件判断语句或者循环语句,它们都是用花括号作为一个代码块的开始和结尾

而VS Code 就是通过对花括号的匹配来决定哪些代码块是能够被折叠的

我们以Java语言为例,在下面的这段代码中

public class App {
    public static void main(String[] args) throws Exception {
        sayHello();
    }

    private static void sayHello() {
        System.out.println("Hello Java");
    }
}

当我们把鼠标移动到第8行行号的附近时,就能够看到一个向下箭头的标记,同时鼠标指针变成了手的形状,此时单击这个图标,就能够看到 App类内部的这行代码消失了,取而代之的则是三个点的缩略图

在代码被折叠后,行号附近的这个图标就变成了一个向右箭头的形状,若再点击这个箭头就能把这段代码展开

如下图所示

想必大家对这再熟悉不过了,下面就介绍一下快捷键

快捷键

首先是折叠和展开代码的两个快捷键

当我们按下 Ctrl + Shift + 左方括号,当前光标所处的最内层的、可以被折叠的代码就会被折叠起来

请注意,我们在这里加了两个限制条件,“最内层”和“可以被折叠”,举个例子

下面有一段代码

这段代码里,最外面是一个静态方法,第二层是一个循环语句,内层则是一个条件语句

 private static void sayHello() {
        for (int i = 0; i < 5; i++) {
            if (true) {
                System.out.println("Hello Java");
             }
        }
    }

当我们把光标放在15-17行之间,所对应的这个条件语句就是最内层且可以被折叠的代码


相对应的,展开最内层的、可以被展开的代码块的快捷键则是 Ctrl + Shift + 右方括号

当然,若能记住前面那个快捷键,那这个也就不难被记住

递归展开与关闭

目前,VS Code仅有递归方式展开快捷键,有需要的请自行设置


如果想把从当前光标位置开始,一直到最外层的,所有可以被折叠的部分递归地折叠起来,该使用什么快捷键呢?

这时需要依次按下  Ctrl + K,Ctrl + 左方括号,而至于如何递归地展开,你肯定也知道,是:依次按下Ctrl + K,Ctrl + 右方括号

全部展开与关闭

那如果想把当前编辑器里的所有可以被折叠的代码一次性全部折叠起来,该怎么操作呢

这时我们只需依次按 Ctrl + K,Ctrl + 0

而全部展开它们则是依次按下Ctrl + K,Ctrl + J


上面介绍了可折叠代码的层级关系,以及如何折叠最内层的代码

当你在命令面板里搜索 “折叠” (Fold)时,相信你也看到了折叠级别 1,折叠级别2等


基于语言定义的代码折叠

上面讲述的代码折叠的判断方式,是通过花括号或者代码缩进的检测来实现,但若遇到不使用花括号或者缩进不正确的代码时,可能就不能实现这样的操作了

为此,VS Code 给语言服务提供了一个接口,语言服务可以动态地检测代码,然后告诉 VS Code 哪段代码是可以被折叠的

这样一来,VS Code 就不用傻傻地检查花括号的匹配了,并且写代码的时候也不用为了折叠而更改代码风格了

除了让语言服务参与到代码折叠的定义当中来,VS Code 还给了用户一定的控制权,也就是说,可以通过在代码注释里书写特殊的关键词来申明,哪一行是可折叠代码的开始,哪一段则是这个可折叠代码块的结束

举个例子:


// region Main 申明了一个可折叠代码块的开始

// endregion 则申明了这段可折叠代码的结束

当我们动态调整 // region Main位置时,折叠部分也是生效的

小地图

今天要介绍的第二个功能,叫做小地图

如果你是在一个比较大的屏幕上工作,需要快速了解整个文件的全貌,并且还能靠鼠标快速地移动,那么这时小地图就很有用了

这个功能默认是打开的,所以你无需特别设置

尝试试着打开一个较大的文件,一起来感受一下它的妙处


很多游戏中也有类似的小地图功能,有没有似曾相识的感觉?

除了控制小地图是否打开,编辑器还为我们提供了几个渲染的配置项

比如说,默认情况下,小地图会将每个字符都渲染出来

但是我们并不能真正地通过小地图来看代码,我们只是要看个大概结构罢了,那么我们可以打开命令面板,搜索“打开设置”(Open Settings),进入设置界面后,搜索 “editor.minimap.renderCharacters”,找到后将其关闭,这样一来,所有的字符,都会被渲染成一个个小色块


改好了就这样


同样的,我们还可以通过 “editor.minimap.maxColumn” 来控制小地图里每一行渲染多少个字符。很多时候我们只需看下每行代码前的缩进和前面的代码高亮,就能看出个大概来了。

面包屑

最后一个要介绍的功能,叫做 Breadcrumb,翻译过来就是面包屑导航,主要是展示目前的代码在整个工程里的路径,同时你还能够看出这个代码所在位置的结构层级并且可以快速跳转。这个功能相信你在浏览文档类的网站时经常能看到,而在 VS Code 中你能够看到则是当前的光标、在哪个符号或者函数里,然后是哪个文件中、在哪个文件夹下,等等

要打开这个功能,我们需要“打开设置”(Open Settings),搜索 “breadcrumbs.enabled”,找到后将它打开


在下图中,从左到右,我们能够看到一层一层文件夹的名字,然后是当前文件名,最后则是光标所在的函数的名字

我们可以通过点击这个工具栏上的文字,然后进行文件夹、文件或者是函数的跳转



面包屑这个功能除了 UI 部分,它底层的服务其实都是早就存在的

就比如说在上面的截图中,面包屑左侧的文件结构,跟我们在资源管理器看到的是一样的;右侧的函数名之类的,则是来自语言服务提供的符号;

至此,三个功能都介绍完了,我们下篇文章见

赫墨拉

我是一个喜爱大数据的小菜鸡,这里是我分享我的成长和经历的博客

You may also like...

1 Response

  1. redbuck说道:

    折叠代码那个,测试了需要加一个#才能生效
    // #region main

    // #endregion

    直接region是如何设置的呢?

发表评论

电子邮件地址不会被公开。