time-geekbang

11 | 一定要用好代码折叠、小地图和面包屑特性

★前言

之前学习了如何利用悬停窗口、建议列表等特性……

其实我们学习的是如何能够在编辑器里轻松地看到“更多”内容，以及如何能够更快速或高效率地跳转。

现在就重新换个角度，看看怎么能在编辑器里看到“更少”的内容，或者尽可能地只看自己想看的内容。

★代码折叠

◇花括号是用来打酱油的吗？

• 花括号是用来干嘛的？——很多编程语言都用它来包裹代码块，如类的定义、函数的定义、条件判断 or 循环语句，它们都是用花括号作为一个代码块的开始和结尾。而 VS Code 就是通过对花括号的匹配来决定哪些代码块是能够被折叠的。

◇有哪些姿势可以折叠代码？

• 常见的鼠标姿势，可以控制折叠和展开

• 快捷键姿势：

  • C+S+[：折叠一层代码
  • C+S+]：展开一层代码
  • C+k C+[：递归折叠，子孙后代也要被折叠
  • C+k C+]：递归展开，子孙后代也要被展开
  • C+k C+0：把当前编辑器里的所有可以被折叠的代码一次性全部折叠起来。注意这个0是 )下的0，而不是数字键盘上的0。
  • C+k C+j：展开所有被折叠的代码

  以上就是可折叠代码的层级关系（就是代码直接的被折叠），以及如何折叠最内层的代码（递归折叠）

• 忘记了快捷键？

  • 使用 C+S+p打开命令面板搜索「折叠」（Fold）呀！

• “折叠级别 1” “折叠级别 2” 等等表示啥？——整个文件里边，你只能看到一层花括号、两层花括号……

  关于这个有比较多的应用场景，如不想看过嵌套过深的代码，想先看两层的……

  饿……我测试发现HTML代码有些无效，有些有效……而递归折叠是绝对可行的

  我自定义了 C+k 1、C+k 2…… C+k 7

◇基于语言定义的代码折叠

上边的代码折叠的判断方式，是通过花括号或者代码缩进的检测来实现的

HTML代码的折叠就是通过对代码缩进的检测来实现的

所以，假如遇到不使用花括号或者缩进不正确的代码时，可能就不能实现这样的操作了。（Why）

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

How：

public class Main {
  // region Main
  public static void main(String[] args) {
  }
  // endregion
}

// region Main 申明了一个可折叠代码块的开始，而// endregion则申明了这段可折叠代码的结束。

总之，这种姿势是基于特殊的语言所定义的

至于哪个语言可以使用哪些关键词来控制代码的折叠，还请参考 VS Code 的官方文档。

如：

1. TypeScript/JavaScript: //#region and //#endregion and //region and //endregion
2. Markdown: <!-- #region --> and <!-- #endregion -->

★小地图

• 该功能默认打开，它的效果呈现可以类比游戏里边的小地图，如LOL、王者荣耀、和平精英……
• 缺点：一个文件的里边的代码过少，它就有点占地方了
• 何时用？——如果你是在一个比较大的屏幕上工作，需要快速了解整个文件的全貌，并且还能靠鼠标快速地移动，那么这时小地图就很有用了。
• 配置小地图（打开设置> 搜索“editor.minimap.renderCharacters”）：
  • 可控制它是否打开
  • 默认是每个字符都渲染，可以设置渲染字符为一个个小色块（只想看代码一个大概结构）
  • 控制小地图里每一行渲染多少个字符（editor.minimap.maxColumn）。适用于很多时候我们只需看下每行代码前的缩进和前面的代码高亮，就能看出个大概结构来了。

我默认不要缩略图了，因为我的屏幕并不大——15.6英寸。

★面包屑

• Breadcrumb，翻译过来就是面包屑导航，该功能默认打开。（打开设置》搜索 “breadcrumbs.enabled”）

• 作用：主要是展示目前的代码在整个工程里的路径，同时你还能够看出这个代码所在位置的结构层级并且可以快速跳转。

• 该功能的现实映射？——在浏览文档类的网站时经常能看到（如阮一峰的网站）。

• 该功能的效果？——在 VS Code 中你能够看到则是当前的光标、在哪个符号或者函数里，然后是哪个文件中、在哪个文件夹下，等等。

• 该功能的技术实现细节？——面包屑这个功能除了 UI 部分，它底层的服务其实都是早就存在的。那么这是怎么个存在法呢？

  • 面包屑左侧的文件结构 <=> 资源管理器
  • 右侧的函数名之类的 <=> 语言服务提供的符号
  • 文件和符号之间的快速跳转 <=> 第七讲 “如何快速在文件、符号、代码之间跳转？”里介绍的内容。

  简而言之，面包屑的功能，可以当作一种新的文件、内容预览和快速跳转的方式

如果我不想记忆那么多快捷键的话，那么我会直接使用面包屑功能

★小结

• 最常用的是代码折叠

• 吕鹏大佬使用代码折叠的心得：

  VS Code 的代码量非常大，现在大约有 40 万行代码，我自己肯定无法一下子了解熟悉所有的功能。所以，每次当我需要去了解一个新功能时，我都会先把所有类和函数全部折叠起来，了解一下它的大致“形状”，然后再依次展开我感兴趣的函数，仔细斟酌。我觉得很多时候，这个方法比代码调试还来得有效

  1. 了解xxx功能

  2. 把涉及xx功能的所有类和函数全部给折叠起来？然后看看该xx功能的大致结构？

  3. 折叠整个文件，可能是一级折叠，可以知道整个文件的大致结构（侧面了解代码书写的思路，好的代码，命名就是注释）

     然后开始仔细斟酌一些感兴趣的功能（函数）。

  2、3步的解释，我更倾向于第3步

  或者一个文件就是一个模块，就是一个功能呢？而一个功能肯定会有许多函数构成的呀！

  所以我对大佬这个心得的理解是：

  1. 看一个文件，即是在了解一个新功能（总不能一个文件里边有40万行代码吧！像是 nodejs 划分的代码功能粒度就很小了）
  2. 折叠该文件。可以是1级，2级，总之，你能通过看到代码的大致结构，然后分析出该功能的代码运行顺序即可
  3. 找自己感兴趣的函数看看，一般这些函数都是纯函数吧！一个输入，得到一个想要的输出，所以函数之间的耦合度并不是很高。

★Q&A

①请问下老师vscode的user版本和普通版本有什么区别？

User 版是只有当前用户使用，而普通版本是给系统所有用户使用的，后者要的权限更多

那就选择用户版吧！

②如何恢复默认快捷键？

可以打开快捷键设置界面，找到这个命令，右键，然后选择重置按键绑定

③今天发现在vscode里，java和groovy没法一起工作。可以有办法解决吗？

你说的是这个情况不 https://github.com/redhat-developer/vscode-java/issues/205