07讲如何快速在文件、符号、代码之间跳转

今天的内容，跟之前略有些不一样。在前面的几讲里，我们的侧重点一直是 VS Code 的“编辑器”特性。编辑器命令、快捷键、多光标，无一例外都是想要提高编辑文本的效率。

但相信你还记得，在专栏的第二讲 “VS Code的Why、How 和What”里我提到过，VS Code 是想在传统编辑器和 IDE 之间找到一个平衡点，让你在编辑器上也一样能体验到 IDE 那些出色的语言支持。

今天，我们就会一起探讨， VS Code 是如何借力于编程语言支持，让代码的跳转更智能的。

文件跳转

当你在开发一个新功能或者修复一个 Bug的时候，你同时在阅读和修改的文件可能就有几个或者十几个。从资源管理器里打开文件固然方便，但是如果这个项目里的文件非常多，并且经常需要在资源管理器里寻找文件，那“眼花缭乱”的，肯定要浪费你不少宝贵的时间。

在VS Code中，解决这个问题的第一个方法，就是按下 “Ctrl+Tab”，然后继续按着 “Ctrl”键但是松开 “Tab” 键，这样你就可以打开一个文件列表，这个列表罗列了当前打开的所有文件。接下来，你可以通过按下 “Tab”键在这个列表里跳转，选择你想要打开的文件。最后选到你想打开的文件后，松开 “Ctrl” 键，这个文件就被打开了。

通过“Ctrl+Tab”组合键选择并打开文件

不过，使用这个方式切换文件，最大的问题在于，文件一旦多了，你就得不停地按 “Tab” 键，没完没了地上下跳转和挑选，这会是一个恼人的耗费时间和眼力的操作。

还好，VS Code 在命令面板里提供了一种支持搜索的文件跳转方式。当你按下 “Cmd + P” （Windows 上是 Ctrl + P）时，就会跳出一个最近打开文件的列表，同时在列表的顶部还有一个搜索框。

看到这里想必你应该明白了，你可以使用这个搜索框来快速地找到你想要的文件，然后按下 “Enter” 键直接打开，这整个过程简单而且顺畅。

按下“Cmd + P”打开最近打开的文件列表

在这里，我再分享给你一个小技巧，当你找到目标文件后，可以按下 “Cmd + Enter ” （Windows 上是 Ctrl + Enter）组合键。你会发现与上面不一样的是，这个文件在一个新的编辑器窗口中打开了（关于编辑器窗口的管理，我会在之后的章节里介绍）。

按下 “Cmd + Enter ”组合键在新窗口中打开文件

行跳转

打开某一个文件之后，你的另外一个需求可能就是要快速跳转到这个文件的某一行。你可能会想，VS Code是不是可以像Vim那样，输入“:13”就能跳转到第13行。是的，VS Code也提供了一种极为简单的方式来支持行跳转，你只需要按下 “Ctrl + g”，紧接着编辑器就会出现一个输入框。如下图所示：

按下 “Ctrl + g”，调出行输入框

你会惊喜地发现，这个输入框的第一个字符就是 “:”，在这之后输入数字，你就能够将光标快速地移动到那一行。是不是很便捷？

输入行数3，跳转到第3行

接下来我再给你介绍一个高阶组合技巧。如果你想跳转到某个文件的某一行，你只需要先按下 “Cmd + P”，输入文件名，然后在这之后加上 “:”和指定行号即可。

跳转到指定文件的指定行数

符号 (Symbols) 跳转

文件跳转和行跳转，是代码跳转的基本操作，也是日常编码中的高频操作。不过有的时候，你可能会希望能够立刻跳转到文件里的类定义，或者函数定义的位置。为了支持这种跳转，VS Code 提供了一套 API 给语言服务插件，它们可以分析代码，告诉 VS Code 项目或者文件里有哪些类、哪些函数或者标识符（我们把这些统称为符号）。

如果要在一个文件里的符号之间跳转，你只需按下 “Cmd + Shift + O” （Windows 上是 Ctrl + Shift + O），就能够看到当前文件里的所有符号。

使用 “Cmd + Shift + O”组合键，调出当前文件的符号

使用方向键，或者搜索，找到你想要的符号后，按下回车，就能够立刻跳转到那个符号的位置。如下图所示：

通过符号功能跳转到指定的代码位置

请注意，在按下 “Cmd + Shift +O”后，输入框里有一个 “@”符号，这个符号在这里的意义，我会在后面的章节里去介绍，你可以先留个心眼。这时，如果你输入 “:”，就可以将当前文件的所有符号，进行分类，这样搜索符号也就更加方便。

对当前文件的所有符号进行分类

有些语言除了提供单个文件里的符号，还支持在多个文件里进行符号跳转。比如在 VS Code 里，如果你打开了多个 JavaScript 文件，就可以按下 “Cmd + T” （Windows 上是 Ctrl + T），搜索这些文件里的符号。

通过“Cmd + T”，搜索多个文件的符号

定义 (Definition) 和实现 (implementation) 跳转

符号跳转依托于语言插件对代码的分析，已经算得上具备一定的智能特性，但是它还是不够精确。比如说我们看到某个函数的调用，想要知道这个函数的接口定义是什么样的，它的实现细节是什么样的，光靠符号跳转，还是会不方便。我们需要的是直接跳转到定义和实现的位置，Java程序员看到这里一定会深有感触。

当然，这个功能也需要语言本身的支持。比如说当你在使用 TypeScript 时，按下 F12，就可以跳转到函数的定义处。

F12跳转到函数定义的位置

也可以按下 “Cmd + F12” （Windows 上是 Ctrl + F12），跳转到函数的实现的位置。

Cmd + F12 跳转到函数实现的位置

而在书写 JavaScript 时，因为并没有接口（interface）的概念，定义和实现恰好是相同的。

JavaScript 里 F12 和 Cmd + F12 效果一样

引用 (Reference) 跳转

很多时候，除了要知道一个函数或者类的定义和实现以外，你可能还希望知道它们被谁引用了，以及在哪里被引用了。这时你只需要将光标移动到函数或者类上面，然后按下 “Shift + F12”，VS Code 就会打开一个引用列表和一个内嵌的编辑器。在这个引用列表里，你选中某个引用，VS Code 就会把这个引用附近的代码展示在这个内嵌的编辑器里。

Shift+ F12打开函数引用预览

小结

今天我介绍了如何在文件之间跳转，如何跳转到某个文件的某行代码，以及如何在编程语言插件的帮助下，跳转到符号、定义、实现和引用的位置。对这些命令和快捷键熟练掌握后，你就不用像“无头苍蝇”一样在编辑器里找代码了。

不过这并不是VS Code里代码跳转功能的全部，在之后的学习过程中，我还会给你展示更多的快捷方式，所以尽情感受你灵活的双手随心所欲地在代码之间跳转吧。

08讲玩转鼠标操作

之前我一直说VS Code 非常注重编码中的键盘体验。换句话来说就是，VS Code 非常关心你能不能够使用键盘完成绝大部分操作，从而无需将手从键盘上移动到别的输入设备上。但是这并不意味着 VS Code 只关心键盘的使用体验，毕竟大部分用户都是非常熟悉和喜欢使用鼠标的，更不要说 Mac 上让人无法割舍的触控板体验了。

那今天我们就一起来聊一聊，如何在 VS Code 中通过鼠标或者触控设备来完成代码阅读和编辑操作。在今天的内容中，我们使用鼠标来代表各种类似鼠标的触控设备。

文本选择

首先我们来看一下如何使用鼠标快速地选择文本。最简单的方式，也是我们每个人最熟悉的方式，就是按住鼠标左键，然后拖动鼠标，直到选中所有我们想要选择的文字为止，再松开鼠标即可。

我们在前面的章节学习过，如何通过键盘快捷键快速选中单词行和全文，这在很大程度上提高了我们的编码效率。那是不是说鼠标用户要完成类似的操作，就只能“一点、二拖、三松手”呢？当然不是，VS Code 其实给鼠标也配备了类似的快捷键。

我们继续使用一段 JavaScript 代码来举例，如下：

function foo() {
 bar("Hello World");
}

foo()

function bar() {
 
}

这段代码还是很简单的，你可以把他复制到你的编辑器中和我一起练习。

在VS Code中，你单击鼠标左键就可以把光标移动到相应的位置。而双击鼠标左键，则会将当前光标下的单词选中。连续三次按下鼠标左键，则会选中当前这一行代码。最后是连续四次按下鼠标左键，则会选中整个文档。

通过鼠标左键完成选中操作

到这里你可能会问，如果我想要使用鼠标，选中其中的多行代码该怎么办？VS Code也考虑到了这个情况，在编辑器的最左边，显示的是每一行的行号。如果你单击行号，就能够直接选中这一行。如果你在某个行号上按下鼠标，然后上下移动，则能够选中多行代码。

拖动行号栏，选中指定代码行

文本编辑

在 VS Code中，我们除了能够使用鼠标来选择文本以外，还能够使用鼠标对文本进行一定程度的修改，我们把它称为拖放功能（drag and drop） 。

比如在今天的示例代码中，我们选中 bar 这个函数，然后将鼠标移到这段选中的代码之上，按下鼠标左键不松开。这时你可以看到，鼠标指针已经从一条竖线，变成了一个箭头。这时候我们移动鼠标的话，就可以把这段文本拖拽到我们想要的位置。

在移动的过程当中，我们能够在编辑器中看到一个由虚线构成的光标，当我们松开鼠标左键的时候，这段文本就会被移动到这个虚拟的光标所在的位置。

通过鼠标左键移动代码位置

在上面的动图里，我们把 bar这个函数，从文档的末尾移动到了第四行。这个功能就相当于使用键盘进行的“剪切+粘贴”。

那么能不能使用鼠标进行“复制+粘贴”呢？别担心，VS Code 肯定也会考虑到这个情况的，所以答案是：必须能。

如果我们在拖拽这段文本的同时，按下 Option 键（Windows 上是 Ctrl 键），鼠标指针上会多一个加号，这时候我们再移动鼠标或虚拟光标至我们想要的位置，然后当我们松开鼠标左键的时候，这段文本将会被复制粘贴到虚拟光标所在的位置，也就是我们既定的目标位置。

你看，在移动鼠标的过程中，多按了个 Option 键（Windows 上是 Ctrl 键），操作结果就由原来的“剪切+粘贴”变为“复制+粘贴”了。

鼠标左键拖拽+Option键，复制粘贴代码块

多光标

在前面第6篇文章中，我们已经学习了如何使用鼠标添加多光标。不得不承认，在鼠标的帮助下，多光标的创建显得格外便捷。我们只需按下 Option 键，然后在需要创建新光标的地方，按下鼠标左键即可。简言之，就是按住 Option 键，然后哪里需要点哪里。

不过，VS Code 中还有一个更加便捷的鼠标创建多光标的方式。当然，这首先要求你的鼠标拥有中键。你只需按下鼠标中键，然后对着一段文档拖出一个框，在这个框中的代码就都被选中了，而且每一行被选中的代码，都拥有一个独立的光标。

利用鼠标中键添加多光标

在第6篇文章中，我们已经尝试了用多种方法去创建光标然后修改代码，现在我们又为鼠标用户多提供了一种更为便捷的操作方式。尝试掌握它们吧，我相信这些便捷操作肯定能为你的高效编程之路尽一份力的。

悬停提示窗口

相信你在 VS Code 的编辑器里使用鼠标的过程中，早就发现了，当你的鼠标移动到某些文本上之后，稍待片刻就能看到一个悬停提示窗口。这个窗口里会显示跟鼠标下文本相关的信息。

比如，在我们的示例代码中，当我们把鼠标移动到第五行 foo 上后，悬停提示窗口里展示了 foo的类型信息，它告诉我们 foo是一个函数，不需要任何的参数，返回值是 void。

了解函数的类型信息

如果我们把鼠标移动到 foo 上面时，按下 Cmd 键（Windows 上是 Ctrl），则能够在悬停提示窗口里直接看到 foo的实现。

按下Cmd键，辅助以鼠标，查看函数实现

我们能看到这样的信息，是因为这个功能也被包含在了 VS Code 的语言接口之中。VS Code 会告诉语言服务，当前鼠标所在位置的信息，语言服务会根据当前的项目情况和代码提供有用的信息。

在 JavaScript 或者 Java 这样的编程语言中，当我们把鼠标移动到某个变量上时，我们能够看到这个变量的定义信息。而在 CSS 中，当我们把鼠标移动到一个 CSS 规则上时，我们能看到的则是一段能够让这个 CSS 规则生效的 HTML 的样例代码。

了解CSS对应的HTML代码样例

当然，除了语言服务，任何 VS Code 上的插件都能够控制悬浮窗口里的内容。

代码跳转和链接

除了能够使用鼠标进行代码选择、编辑、预览之外，我们还可以借助鼠标来完成跳转操作。不知道你还记得我们之前讲的文件、代码跳转相关的快捷键吗？如果不记得，一定要回去再复习哦。如果记得，今天在这里我再教你如何使用鼠标来完成跳转操作。

我们还是把鼠标移动到示例代码的第五行 foo 上，然后按下 Cmd 键，这时候 foo下面出现了一个下划线。然后当我们按下鼠标左键，就跳转到了 foo函数的定义处。

通过Cmd键和鼠标左键，跳转到函数定义处

当我们在编写 Markdown 这样的非编程语言的文档时，也可以通过 Cmd + 鼠标左键（Windows 上是 Ctrl + 鼠标左键）来打开超级链接。

通过Cmd键和鼠标左键，打开超级链接

小结

以上就是 VS Code 编辑器中常用的鼠标操作，相对比较简单，当然这并不是全部。之后的章节中，在介绍 VS Code 的其他 UI 组件时，我也还会介绍相应的鼠标快捷操作。

这一节的内容你还是需要多加练习，然后希望它们能成为你的肌肉记忆。这样，不管你使用任何编辑器，在有鼠标操作的时候，你都可以试试上面的小技巧是否生效。

最后，欢迎在评论区给我留言，你可以分享对于鼠标操作，你自己珍藏的小技能。当然，有疑问同样可以写到留言区，我会第一时间给你反馈。

09讲代码自动补全、快速修复和重构的二三事

专栏的第一部分“基础入门”，至今已经进行了接近三个礼拜。现在我们终于要进入 VS Code 语言支持功能的核心地带，也就是，代码自动补全和重构。

这又是一个非常容易引起口水战的话题。很多 IDE 的拥趸非常喜爱或者离不开 IDE 的一个重要原因就是，代码自动补全和重构。通常 IDE 对特定的编程语言和框架理解非常好，当你书写代码的时候，往往不用打完全部字符，IDE 就能够提示你有哪些可以使用的 API，你要使用哪个函数，还有帮助你更好地进行代码的重构。甚至在这样人人都提人工智能的时代，大家已经开始尝试使用 AI 来做智能提示，他们号称通过大数据分析其他人遇到类似问题的时候使用什么样的 API 或者算法，然后给你推荐现成的代码片段。听起来就有点可怕，是不是？

智能提示，就像是一把双刃剑。我们肯定不能写每一行代码都依赖开发工具给我们的提示或建议，然后没了智能提示就手足无措。往近了说，如果我们过分依赖开发工具的话，那么换工作遇到白板面试的时候可能就会抓瞎了。

但是软件开发的模式本来就在发展，我们也很难说永远只对着终端、像编辑文本一样完成所有工作，还是需要看看，怎么借助开发工具，去把查文档、查接口、代码检查和重构等工作自动化，从而把时间和思考留给更重要的事情。

二者本身就需要平衡，就像开车一样，自动挡和手动挡并不是非黑即白的关系。自动挡或者说自动驾驶是未来趋势，但会手动挡你也总不会吃亏，所谓技不压身吧。

好了，今天让我们来一起看一下 VS Code 里的代码自动补全、快速修复和重构相关的功能。

自动补全

VS Code 当中的自动补全内容，其实是由语言服务来提供的。我们在 “VS Code 的Why、How 和 What”文章里介绍过，VS Code 为编程语言工作者提供了统一的 API ，即 Language Server Protocol，每种语言都能够通过实现这个 API 在 VS Code 上得到类似 IDE 的开发体验，而各个语言根据这个 API 实现的服务，就被称为语言服务。

语言服务会根据当前的项目、当前的文件，以及光标所在的位置，为我们提供一个建议列表。这个列表包含了在当前光标位置下我们可能会输入的代码。当我们不断地输入字符，VS Code 就会根据当前输入的字符，在这个列表进行过滤。

function foo() {
 bar("Hello World");
}

foo()

function bar(a) {
 
}

今天我们继续使用一段 JavaScript 代码来做例子。当我们在编辑器里输入 console.之后，VS Code 里的 JavaScript 语言服务，会给我们建议与 console相关的 API。

VS Code提示的与console相关的API

当我们找到了合适的函数后，按下 Tab 键或者回车键就可以将其补全。

补全选中的函数

如果我们偶尔觉得这个自动补全窗口是多余的，希望暂时不看到它，可以按下 Escape 键将其隐藏。后续如果希望再次看到这个窗口，除了通过打字来将其调出以外，我们还可以按下 “Ctrl + 空格键”来手动地调出建议列表。

通过“Ctrl + 空格键”手动调出建议列表

刚才我们提到，VS Code 会根据我们输入的字符在这个建议列表里进行过滤。同时，这个过滤是允许我们犯一点小错误的，比如打字特别快的时候少打一个字母，VS Code 也能处理这个情况。比如在下面的动图里，我想使用 console 里的 debug 函数，但是我只打了 db 两个字母，建议列表依然为我提供了 debug 这个选项。

输入 db ，建议窗口提示 debug

快速预览

有的时候，当我们看到一个建议列表里的某个函数名，我们可能并不能够立刻想起它的作用是什么，它的参数定义是什么样的。这时候我们可以单击当前这一项建议的最右侧的蓝色图标。

log函数的蓝色图标（最右侧）

点击这个图标后，建议列表旁边就有出现一个快速预览的窗口，而这个窗口里面呈现的就是这个函数的定义。具体如下图：

编辑器提示log函数相关的函数定义

除了使用鼠标键外，我们还可以使用 “Ctrl+空格键”组合键来快速调出这个快速预览窗口。

参数预览

最后，当我们从建议列表选择了一个函数，然后输入括号，准备开始输入参数时，我们会看到一个参数预览的悬浮框。通过这个参数预览的窗口，我们可以知道这个函数可以传入哪些参数，它们的参数类型又是什么样的。如下图所示：

函数参数预览的悬浮框

同样的，隐藏这个窗口的快捷键也是 Escape。如果你想再次将其调出的话，需要按下 “Cmd + Shift + Space” （Windows 上是 Ctrl + Shift + Space）。

自动补全设置

上面的这几个窗口，它们都是通过我们输入的内容自动触发的，也就是说，编程语言决定了我们什么时候看到什么内容。虽然我们可以通过快捷键将其快速地关闭和唤出，但是有的时候自动补全窗口出现得过于频繁，也是会影响我们的编程体验的，毕竟悬浮窗口会遮盖一部分代码，影响我们的阅读。

不过，我们可以通过几个设置，控制自动补全窗口出现的频率和方式，甚至这个窗口的大小。

首先我们可以通过设置 “editor.quickSuggestions” 来决定在什么语境下自动补全窗口会被唤出。默认设置如下：

  "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": false
  }

这个配置有三个选项：other、comments和strings。其中，comments 就是代码注释，strings 就是指字符串。默认情况下，当光标在代码注释或者字符串里，自动补全窗口就不会被自动唤出了。但如果你希望这个窗口永远不被自动唤出，那么你就需要将“other” 也改为 “false”。

这时你可能会问了，如果关闭了这个设置，我想看到自动补全该怎么办呢？不用担心，当你按下 “Ctrl + 空格键” 之后，这个窗口依然会被打开，不管设置是关闭还是开启的状态。看到这个设置，你肯定也就明白了，为什么默认情况下你在写注释的时候没有代码自动补全的提示了吧。

参数预览窗口也是一样的，你可以通过参数 “editor.parameterHints.enabled” 将其关闭。当你觉得自己需要看一看参数预览时，按下快捷键或者通过命令面板就能够将其打开了。

上面的这个设置决定“是与否”的问题，但你也可以控制自动补全窗口出现的时间。自动补全窗口监听文件内容的变化，当你停止输入时，它就会试着给你提供建议。但是有的时候你打字稍微快一些，自动补全窗口才刚刚出现，你就输入了更多的内容，紧接着代码服务就要重新计算并提供建议了。如果你希望减少这种不必要的提示，可以增大设置 “editor.quickSuggestionsDelay” 的值，这样在你输入完代码后，自动补全窗口就会多等一会儿，然后再跳出来。

其他几个自动补全的设置，你可以在设置里搜一搜 “editor.suggest”，自己修改玩一玩。

快速修复

语言服务除了在书写代码的时候提供提示以外，还能够帮我们分析当前的代码，检测出他们潜在的问题，然后提供快速修复的方案。比如在下面的 CSS 代码中，我们拼错了 padding 这个属性。

.foo {
 font-size: 5px;
 margin: 5px;
 pading: 1;
}

编辑器中，我们能在 pading下看到了绿色的波浪线，并且在这行的行首，看到一个灯泡的图标。

代码提示的灯泡图标

点击这个灯泡的图标，我们就能看到一个新的列表，列表里就是语言服务提供的修复这个错误的操作建议。

修复错误相关的建议

在这个例子里，我们要做的就是选择第一个操作建议，把pading换成 padding。除了点击这个黄色的灯泡图标，我们也可以按下 “Cmd+.” （Windows 上是 Ctrl + . ）来调出这个快速修复的建议列表。

通过快捷键调出建议列表

在之前的学习过程中，就有同学留言问过，不确定什么时候能够看到这个黄色的灯泡图标。编辑器在你把光标移动到这个错误或者警告所在的代码上时才会展示这个图标。

重构

重构这个功能，相信你已经在频繁地使用了。

当我们想修改一个函数或者变量的名字时候，我们只需把光标放到函数或者变量名上，然后按下 F2，这样这个函数或者变量出现的地方就都会被修改。

整体修改bar函数的函数名

这个操作并不是一个粗暴的搜索关键词并替换，在上面的动图中你可以看到，最后一行代码里有个 bar3函数调用，但当我们去重命名 bar这个函数时，bar3并没有受到影响。

除了重命名外，另一个常用的重构的操作就是把一段长代码抽取出来转成一个单独的函数。在VS Code中，我们只需选中那段代码，点击黄色的灯泡图标，然后选择对应的重构操作即可。

通过智能提示操作提取新函数

要注意的是，并不是每个语言服务都支持重构的操作。如果你选中一段代码后，但没有看到那个黄色的灯泡图标，那么也就是说你使用的这门语言可能还没有支持快速重构。

基于单词的自动补全

上面提到的几个功能，它们都依托于语言服务来提供内容。但是有的时候，语言服务并不完美。编辑器于是提供了一种相对 “笨” 一些的提示，那就是基于单词的提示。编辑器通过分析当前的文件里的内容，进行简单的正则表达式匹配，给我们建议已经出现过的单词。

当然，如果你觉得语言服务的提示已经足够好了，不需要这么暴力、这么笨的文本提示，那你也可以通过设置 “editor.wordBasedSuggestions” 将其关闭。

小结

今天我们聊到了VS Code相关的代码自动补全、快速修复和重构相关的操作，这里我再强调下，这些操作在VS Code里，都是需要特定的语言服务来支持的。目前来看，Java、JavaScript、Python、PHP、Golang等主流语言在VS Code中都已经得到了很不错的支持，你可以尽情尝试。

代码补全相关的操作我相信对于大部分人都不陌生，这里面也没有很多的技巧，如果你之前已经知道，那全当本节内容是复习。如果你之前不清楚，那一定要记得课后练习，这些智能操作可真是能帮你省不少力气呢。

10讲拒绝重复，你的代码百宝箱：如何书写codesnippet

在上一讲中，我们提到了编程语言服务能给我们提供智能的自动补全，帮助我们减少重复代码的输入。这些补全，都是由编程语言提供的，它会分析当前代码的上下文，并给出合适的建议。

但是有的时候，我们经常输入的代码是业务强相关的，语言服务没法做出优化；或者是一些我们经常使用的定式，比如循环语句、创建一个新的类或者一个 UI 控件，我们经常写类似的代码，只不过每次都要做细微的修改。对于这些代码，我们可以将它们抽象成模板，保存起来，等下次要使用的时候直接调用即可。

这就是我们今天要讲的主题：代码片段（code snippet） 。

代码片段是对常用代码的一个抽象，它保留了大部分不变的代码，然后把需要经常变动的部分，换成变量，这样等下次调用它的时候，只需要把这些变量换成我们需要的就可以了。

上面的这段描述，可能还是太抽象了，下面我们通过一个例子来看看代码片段究竟长什么样，以及是怎么来使用的。

首先，我们打开命令面板，搜索“配置用户代码片段”（Configure User Snippets）并且执行。这时候我们会看到一个列表，让我们选择语言。这里我们依然选择 JavaScript 作为我们的示例语言，不用担心，代码都是非常简单和易于理解的。

命令面板，搜索“配置用户代码片段”并且执行

选择完语言后，我们就能看到一个 JSON 文件被打开了，这个文件里的内容，现在都是被注释掉的。我们可以选中第七行到第十四行，按下 “Cmd+ /”取消注释。

JavaScript 代码片段模版

此时，呈现在我们面前的这个 JSON 文件，就是我们今天要讲的主角：代码片段。

{
    "Print to console": {
        "prefix": "log",
        "body": [
            "console.log('$1');",
            "$2"
        ],
        "description": "Log output to console"
    }
}

你已经看到了，这个代码片段文件，是一个 JSON 文件，它的根对象下面的所有子节点都是一个单独的代码片段，并能够被我们调用和插入编辑器。这个代码片段对象的键（key）是这个代码片段的名字，我们在书写时只要保证这个名字跟当前文件里的其他代码片段不冲突就可以了。

在上面的例子里，这个代码片段的名字叫做 “Print to console”。这个代码片段对象的值，也就是花括号里的代码，必须要包含 “prefix” 前缀和 “body” 内容这两个属性。同时，这个值还可以包含 “description” 描述这个属性，但这个属性不是必须的。

“prefix” 的作用是，当我们在编辑器里打出跟 “prefix” 一样的字符时，我们就能在建议列表里看到这个代码片段的选项，然后我们按下 Tab 键，就能够将这个代码片段的 “body” 里面的内容插入到编辑器里。如果这个代码片段有 “description” 这个属性的话，那么我们还能够在建议列表的快速查看窗口里看到这段 “description”。

比如现在我们可以打开一个 JavaScript 文件（还以之前的一段代码为例），然后输入 log，你就能够在建议列表里看到 “Print to console”这个建议。

输入 log 即可看到 Print to console 代码片段

然后再按下回车或者 Tab 键，就能够将这个代码片段插入编辑器了。

Tab Stop

“body” 里的内容，并不只是一个纯文本，它其实是一个模板。要让它像模板一样工作，我们就需要先理解一个概念，叫做 Tab Stop。

像我们现在研究的这个代码片段里，当 “body” 内容被插入到编辑器后，你会发现，内容里 的$1和 $2不见了，取而代之的是两个竖线。这$1和 $2就是 Tab Stop，意思是，当我们按下 Tab 键之后，光标移动到的位置。当这段代码片段被插入到编辑器后，编辑器会把光标移动到$1所在的位置，然后如果你再按一次 Tab 键，光标则会立刻移动到 $2的位置。

如果没有这个功能，我们输入 log 后，只能自动地把 console.log() 插入到编辑器里，接下来我们需要手动地把光标移动到括号里面，然后填入我们想要打印的参数。这之后，当我们需要新起一行写代码时，还得按下 “Cmd + Enter”创建新的一行并将光标移动到下一行。但有了 Tab Stop后，上面的这些繁琐的操作就可以简化为一次 “Tab” 键了。

在下面的动图里，我们可以看到，代码片段被插入编辑器中后，光标就被自动地放到了引号的中间；我们输入 “bar” 后，按下了 Tab 键，光标就又自动地移动到了下一行的开头，然后我们就可以继续输入代码了。

代码片段被插入编辑器中后，光标被自动地放到了引号的中间

将光标移动到上一个 Tab Stop 的位置的快捷键也很好记，我们只要按下 “Shift + Tab” 就可以了。

但要注意的是，Tab Stop 的作用，并不只是简单地减少重复操作，它还能够真正发挥模板的功效。

当我们插入一段常用的代码，或循环语句，或Switch 语句，虽然大部分代码都是一样，但是也有很多地方需要根据当前的上下文修改，比如说参数的名字。在这样的代码片段中，我们可以在所有需要修改的地方插入 Tab Stop，当代码片段被插入编辑器后，我们只需要通过按下 “Tab”键，就可以快速地跳到这些位置，将它们修改成我们需要的值。

占位符

在我们插入 Tab Stop 的时候，除了 $1、 $2 这样的语法，我们还可以填入 ${1:label}，在这个格式下，代码片段被插入编辑器里时，$1 的位置处，会预先填入 label这个值，并且 label 会被选中。

对于这个值我们称之为占位符，顾名思义，这个值是我们在代码片段中预先设置好的。如果我们觉得这个值可以用，那就不需要修改了，直接按 Tab 键跳到下一个 Tab Stop 继续编辑。如果觉得要换成一个新的值，那么也只需直接打字就可以将其替换，因为这个占位符已经被光标选中了。

这里我们对上面的代码片段进行一点修改：

    "Print to console": {
        "prefix": "log",
        "body": [
            "console.log(${1:i});",
            "$2"
        ],
        "description": "Log output to console"
    }

我们将 $1 改成了 ${1:i}，那么当log 这个代码片段被插入时，我们将看到console.log(i);，同时 i 被选中。比如在下面的循环语句里，我们就不用更改i了。

for (var i = 0; i < 5; i++) {
    
}

插入代码片段后，无需更改占位符

而在接下来这个循环语句里，循环的 index 是 j，所以我们就需要将i换成 j。

for (var j = 0; j < 5; j++) {
    
}

插入代码片段后，将占位符改为 j

上面我们提到了，有的时候如果占位符刚好是我们想要的，我们就不需要再做任何的修改了，我们可以按住 Tab 键，不断地跳过各个 Tab Stop，也可以直接按下 Escape 键，跳出代码片段的编辑模式，之后继续我们的其他编辑操作。

多光标

在前面的文章中，我们已经知道多光标能够大幅度减少重复劳动，而在代码片段里，我们也可以使用多光标的特性。

上面提到我们可以用 ${1:label} 来指定 Tab Stop 和占位符，但其实我们也可以在代码片段的多个位置使用同样的 Tab Stop 。

举个例子，我们可以在代码片段中三个不同的位置插入 $1，这样编辑器就会为这三个不同的位置，分别创建一个光标，然后当我们打字的时候，他们就会被一起修改。

下面，我们就一起来给上面的代码片段加上多光标的特性。

    "Print to console": {
        "prefix": "log",
        "body": [
            "console.log(${1:i});",
            "console.log(${1:i} + 1); // ${1:i} + 1",
            "$2"
        ],
        "description": "Log output to console"
    }

for (var j = 0; j < 5; j++) {
    
}

插入了 log 这个代码片段，然后将循环的 index 换成了 j

预设变量

上面我们提到了，在每个 Tab Stop 的位置，我们可以提供占位符，也就是提前预设好一些值。但这些占位符是我们提前写在代码片段里的，跟当前代码的上下文往往没什么关系。不过，VS Code 的代码片段支持里，还提供了一种模板，叫做预设变量。

比如说，我们想在代码片段里的某个位置使用剪切板的内容，那么我们在那个位置写上 $CLIPBOARD 就好了，如果我们希望插入代码片段后自己可以修改这个值，也可以将它放在一个 Tab Stop 里面，语法则是 ${1:$CLIPBOARD}。

除了剪切板，VS Code 还支持其他数十个预设值，大家可以按需自行查看文档，自己尝试。

小结

今天我们一起研究了代码片段这个功能，这可能是迄今为止内容最长一篇文章了，但是我依然只是介绍了代码片段的基本概念和使用。

要想真正掌握它，你就需要练习上面的内容，并且自己多尝试，根据文档里介绍的各个知识点组合使用。对了，VS Code 的代码片段语法是基于 TextMate 的，不仅 VS Code，Atom 和 Sublime 也都支持这个语法，你可以在网上找些其他人分享的代码片段，通过阅读这些他人书写的代码片段来学习和精进，相信这也会是你一个不错的学习途径。

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

在前面的章节里，我们已经学习了如何利用悬停窗口、建议列表等特性快速了解函数、变量的定义，同时也知道了怎么能够利用快捷键或者鼠标便捷地进行代码跳转。换句话说，我们学习的是如何能够在编辑器里轻松地看到“更多”内容，以及如何能够更快速或高效率地跳转。

今天，我们再一起重新换个角度，看看怎么能在编辑器里看到“更少”的内容，或者尽可能地只看自己想看的内容。

这里我们要介绍的功能，就是代码折叠、小地图和面包屑。

代码折叠

首先，我们一起来看一下编辑器中最基础的代码折叠方式。

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

比如在下面的这段 JavaScript 代码中：

function foo() {
 bar("Hello World");
}

foo()

function bar(a) {
 
}

前三行里是一个foo的函数，并且这个函数当中只有一行内容。

当我们把鼠标移动到行号的附近时，就能够看到一个类似于减号的标记，同时鼠标指针变成了手的形状。

鼠标移动到行号附近

此时若我们单击这个图标，就能够看到 foo函数内部的这行代码消失了，取而代之的则是三个点的缩略图。

代码被折叠

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

折叠代码被展开

以上内容就是代码折叠最基本的概念，相信对此大家早就已经非常熟悉了。下面我们再来一起看一下有哪些折叠和展开代码的快捷键。

快捷键

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

当我们按下 “Cmd + Option + 左方括号”（Windows 上是 Ctrl + Shift + 左方括号），当前光标所处的最内层的、可以被折叠的代码就会被折叠起来。请注意，我们在这里加了两个限制条件，“最内层”和“可以被折叠”。我们可以先用下面一个小例子来理解这两个条件。

for (var i = 0; i < 5; i++) {
 if (true) {
    console.log(false);
  }
}

在这段代码里，最外层是一个循环语句，内层则是一个条件语句。当我们把光标放在第三行，所对应的这个条件语句就是最内层且可以被折叠的代码。

相对应的，展开最内层的、可以被展开的代码块的快捷键则是 “Cmd + Option + 右方括号”（Windows 上是 Ctrl + Shift + 右方括号）。当然，若能记住前面那个快捷键，那这个也就不难被记住了。

如果我们想把从当前光标位置开始，一直到最外层的，所有可以被折叠的部分递归地折叠起来，该使用什么快捷键呢？这时我们需要依次按下 “Cmd + K ”“Cmd + 左方括号”（Windows 上是 Ctrl + K、Ctrl + 左方括号）。而至于如何递归地展开，不用问你肯定也知道，是：依次按下“Cmd + K ”“Cmd + 右方括号”。

那如果我们想把当前编辑器里的所有可以被折叠的代码一次性全部折叠起来，该怎么操作呢？这时我们只需依次按下 “Cmd + K”“Cmd + 0”（Windows 上是 Ctrl + K，Ctrl + 0）即可。而全部展开它们则是依次按下 “Cmd + K”“Cmd + J” （Windows 上是 Ctrl + K，Ctrl + J）。不过，平心而论，我觉得这两个快捷键的设置并不是很友好，若你也觉得这样，那你也可以摒弃它们，然后在命令面板中绑定自己喜欢的快捷键。

上面我们介绍了可折叠代码的层级关系，以及如何折叠最内层的代码。当你在命令面板里搜索“折叠” （Fold）时，相信你也看到了“折叠级别 1” “折叠级别2” 等等，你可以想一想，它们的作用是什么？又可以用于哪些场景呢？

基于语言定义的代码折叠

上面讲述的代码折叠的判断方式，是通过花括号或者代码缩进的检测来实现的。但若遇到不使用花括号或者缩进不正确的代码时，可能就不能实现这样的操作了。为此，VS Code 给语言服务提供了一个接口，语言服务可以动态地检测代码，然后告诉 VS Code 哪段代码是可以被折叠的。

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

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

举例子可能要比解释定义要来的容易一些，所以我们一起看下面的这段 Java 代码：

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

其中，// region Main 申明了一个可折叠代码块的开始，而// endregion则申明了这段可折叠代码的结束。当我们把鼠标指针移动到行号附近时，我们能够看到三个加号，说明这段代码包含了三个可折叠的代码块，两个是由花括号控制的，一个则是基于特殊的语言的定义。

通过对应的关键词来控制Java 代码的折叠

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

小地图

今天要介绍的第二个功能，叫做小地图。细心的你可能已经发现了，在之前所有的截图里，我都把小地图关掉了。这是因为图片小，而小地图又比较占地方。

但是如果你是在一个比较大的屏幕上工作，需要快速了解整个文件的全貌，并且还能靠鼠标快速地移动，那么这时小地图就很有用了。这个功能默认是打开的，所以你无需特别设置。这个使用起来比较简单，你可以像我在图中展示的那样试着打开一个较大的文件，感受一下它的妙处。

使用小地图上下滚动代码

很多游戏中也有类似的小地图功能，不知道你有没有似曾相识的感觉。

除了控制小地图是否打开，编辑器还为我们提供了几个渲染的配置项。比如说，默认情况下，小地图会将每个字符都渲染出来。但是我们并不能真正地通过小地图来看代码，我们只是要看个大概结构罢了，那么我们可以打开命令面板，搜索“打开设置”（Open Settings），进入设置界面后，搜索 “editor.minimap.renderCharacters”，找到后将其关闭，这样一来，所有的字符，都会被渲染成一个个小色块。

将小地图里的文字渲染成小色块

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

面包屑

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

不过，VS Code 在最近几个月才添加了面包屑这个功能，并且默认是关闭的。要打开这个功能，我们需要“打开设置”（Open Settings），搜索 “breadcrumbs.enabled”，找到后将它打开。

打开面包屑功能

在上图中，从左到右，我们能够看到一层一层文件夹的名字，然后是当前文件名，最后则是光标所在的函数的名字。我们可以通过点击这个工具栏上的文字，然后进行文件夹、文件或者是函数的跳转。

进行文件夹、文件或者是函数的跳转

这里我还可以分享一点这个功能的技术细节，面包屑这个功能除了 UI 部分，它底层的服务其实都是早就存在的。就比如说在上面的截图中，面包屑左侧的文件结构，跟我们在资源管理器看到的是一样的；右侧的函数名之类的，则是来自语言服务提供的符号；至于在这些文件和符号之间的快速跳转，更没有超出我们在第七讲 “如何快速在文件、符号、代码之间跳转？”里介绍的内容。

换句话说，面包屑的功能，可以当作一种新的文件、内容预览和快速跳转的方式。

小结

今天介绍的几个功能里，我最常用的就是代码折叠了。所以在这一讲的最后，我跟大家分享一下我使用代码折叠的心得。

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

12讲极速搜索有时候比Intellisense还重要

在前面的几个章节中，我们介绍了 VS Code 如何在语言服务的支持下提供了代码检查和修复、智能跳转、自动补全等功能。

但是，语言支持并不总是完美的。像 Rust、TypeScript 等语言的支持，是由语言实现者们直接操刀的，所以它们做得就相对完整些；而第三方开发者提供的语言服务，可能就不一定尽善尽美了。那这是不是就意味着想要快速查询代码并且跳转就没有办法呢？

所以今天我们重新回到原点，来看一下如何使用编辑器自带的文本搜索功能，快速地穿梭于海量的代码之中。在我看来，一个功能丰富且快速的搜索，在很多情况下甚至会比语言服务还要来得有用。

单文件搜索

我们把光标放在编辑器当中，然后按下 “Cmd + F” （Windows 上是 Ctrl + F），就能够快速地调出搜索窗口（可能这个命令你早就发现了或者经常使用了）。当我们调出搜索窗口的时候，编辑器就会把当前光标所在位置的单词自动填充到搜索框中。与此同时，当前文件里和搜索关键词相同的单词都会被高亮出来。

自动填充搜索关键词的好处在于，当我们按下 “Cmd +F” 搜索这个单词之后，我们还能够立刻通过回车键或者 “shift+回车键” 在所有搜索结果当中快速跳转。

“Cmd +F”搜索，按下 Enter 键在搜索结果当中快速跳转

这里需要注意的事情是，当我们开始搜索的时候，光标已经被移动到了搜索框当中，如果在这时候我们继续打字的话，那原有的搜索关键词将会被修改。

按下“Cmd +F”调出搜索框，修改搜索关键词

如果我们希望找到搜索结果后，接下来就直接修改编辑器中的内容，那么就得将光标重新移动到编辑器当中，听起来就挺不方便的，是不是？

这种情况下，我们不妨换一个快捷键。首先我们将光标移动到我们想要搜索的单词处，然后按下 “Cmd + G”（Windows 上是 F3），此时我们同样调出了搜索框，但与前面 “Cmd +F ”这个快捷键不同的是，这时光标依然是在编辑器当中，而不是在搜索框中。

然后我们通过不断按下“Cmd + G”就能够在搜索结果之间自上而下地循环跳转，这时我们只需直接打字就能对代码进行修改了。

“Cmd + G”直接搜索关键字并在编辑器内跳转，可以直接修改编辑器中的内容

当然如果我们想要在搜索结果里自下而上地跳转，也是可以通过快捷键实现的，只需多增加一个 shift 键即可，也就是按下 “Cmd + Shift + G” （Windows 上是 Shift + F3）来实现自下而上的跳转。

如果你的键盘上有功能键的话，那这个快捷键实现起来就更方便了。你可以通过 F3 和 “Shift + F3” 实现 “Cmd + G” 和 “Cmd + Shift + G” 一样的功能。

下面我们再一起来看下这个搜索框中都有哪些功能。

当我们在搜索框中打字的时候，搜索操作是自动触发的，而无需我们再按下回车键去手动地执行搜索这个操作。

除了搜索纯文本以外，搜索框还支持多种不同的搜索方式。比如，在搜索框的最右侧，就有三个配置按钮。

搜索框最右侧的三个配置按钮

第一个是大小写敏感。这个很好理解，就是在文档中搜索关键词的时候，搜索的结果是否要跟关键词大小写完全一致。默认情况下，VS Code 的搜索是不区分大小写的，也就是说哪怕大小写不一样，也会算到搜索结果里去。但如果我们不想要这个特性，就可以点击这个按钮，或者按下 “Cmd+Option+C” （Windows 上是 Alt + C）来关闭它。

打开大小写敏感设置

第二个是全单词匹配。有的时候我们搜索的单词恰好是别的某个单词中间的一部分，如果我们不希望这样的结果出现在搜索结果中，那么就可以点击这个按钮或按下 “Cmd+Option+W”（Windows 上是 Alt + W）来关闭它。

打开全单词匹配设置

第三个，就是正则表达式匹配了。当我们点击这个按钮或按下 “Cmd + Option + R”（Windows 上是 Alt + R），就能够打开正则表达式的支持，然后在搜索框中输入正则表达式来搜索。要注意的是，编辑器中的这个搜索框，它里面的正则表达式使用的是 JavaScript 的正则引擎。

打开正则表达式匹配

这三个功能的快捷键的配置，相信你已经看出其中的诀窍了，它们分别使用了 Case、Word 和 Regular Expression 的第一个字母作为快捷键的一部分，若你知道是这几个单词，那相信对应的快捷键你就不会容易忘了。

除了这三个搜索设置以外，在搜索窗口关闭按钮的左侧，相信你还能看到一个特别的图标。那这个按钮的功能是什么呢？

我们可以先选中一段文本，然后按下 “Cmd + F” 调出搜索框，这之后点击这个按钮，就可以将这段文本的范围设置为接下来的搜索区域。然后当我们在输入框里输入关键字后，编辑器就只会在这个区域里进行搜索。

在文本选择范围内进行搜索

搜索配置

上面我们提到的功能，都是 VS Code 的默认行为。但也有部分用户不喜欢搜索框的一部分行为，比如说自动填充搜索关键词。那你可以打开设置，搜索 “editor.find.seedSearchStringFromSelection”来关闭它。

也有个别用户觉得，如果选中了多行文本，那么当开始搜索时，应该自动地只在这几行代码里进行搜索。要达成这样的目的，你则需要打开设置“editor.find.autoFindInSelection” 。

单文件替换

在搜索到我们想要的结果之后，我们可以直接在文件中进行修改，也可以使用替换窗口进行批量替换。如果你在使用鼠标或者是触控板的话，只需按一下搜索窗口最左侧的箭头按钮即可打开替换框。

打开替换框

替换框的后面，一共有两个按钮：第一个能够替换单个搜索结果，第二个则能够替换全部的搜索结果。它们对应的快捷键我就不多加赘述，我们只需把鼠标指针移动到它们上面，就能够看到了。

替换框后面的两个按钮：替换单个和替换全部

我们也可以通过快捷键直接调出替换窗口。最常用的命令就是按下 “Cmd + Option + F”（Windows 上是 Ctrl + H）键，这样当前光标所在的单词就会被用作为搜索关键词，同时编辑器将光标移动到替换窗口中，我们只需直接输入想要替换的关键词就行了，是不是很便捷呢？

“Cmd + Option + F”直接调出替换窗口

当然，如果你在书写完替换文本后，觉得搜索关键词需要修改，那你可以按下“Shift + Tab” 键将光标移动到上面的搜索输入框里。“Tab”和“Shift + Tab”键能够帮助你在这两个输入框直接进行跳转。

多文件搜索和替换

虽然在“基础入门”这个部分中，我们一直都在介绍编辑器的各种功能，但是，为了把搜索这样的一个功能介绍完整，我们今天就再讲一下在 VS Code 当中如何使用多文件搜索。

多文件搜索的运行方法跟单文件搜索非常类似。单文件搜索，我们是通过按下“Cmd+ F”来调出搜索窗口的，而多文件搜索则是通过按下 “Cmd + Shift + F” （Windows 上是 Ctrl + Shift + F）来调出多文件搜索的视图。

“Cmd + Shift + F” ，调出多文件搜索视图

在这样一个视图中，我们看到了熟悉的搜索输入框，以及大小写敏感、全单词匹配和正则表达式三个配置按钮。搜索框的左侧则是下拉按钮，点击即可调出替换框。

默认情况下，当我们调出多文件搜索的视图时，VS Code 会在当前打开的文件夹下进行搜索。不过，要发挥多文件搜索的更大功效，我们可以通过书写配置来决定在哪些子文件夹下进行搜索，以及过滤掉哪些特殊的文件或者文件夹。

要完成这样的配置，我们需要点击搜索框下三个点形状的图标，点开后，我们能看到两个输入框，它们的名字分别是“包含的文件” 和 “排除的文件”。这两个配置的书写格式是 glob，很多编程语言和配置都会使用 glob 来模糊匹配文件名和文件夹，估计你已经有所了解。而如果你不熟悉的话，就当作是课后作业了，这一定不是你最后一次需要书写 glob。

多文件搜索配置

多文件的配置比单文件里的搜索框还要更多一些，你可以打开设置搜索 “search” 看看都有哪些。这里我主要介绍两个被用户修改比较频繁的设置。

第一个是“search.collapseResults” 。它是用来控制是否自动展开搜索结果。默认的配置是 “auto” 自动， 也就是说，VS Code 会根据搜索结果的多少来决定是否要将某个文件下的搜索结果展开，如果某个文件夹下的结果过多的话，就会将其暂时折叠，用户需要展开结果。我自己喜欢将其设置为 “alwaysExpand”，这样我每次都能直接看到结果了。

第二个是 “search.location” ，也就是多文件搜索视图的位置。默认情况下，搜索视图会出现在侧边栏。但是 VS Code 同样允许你把搜索视图放到底部面板中去，你只需将其修改为 “panel” 即可。相信很多用户都跟我一样，使用过非常多把搜索视图放在底部的开发工具，并且很习惯了，那这个设置就能够帮助到我们。

最后，我再给 macOS 用户介绍一个 macOS 系统上特有的搜索功能，叫做共享搜索记录。这个功能需要通过设置 “editor.find.globalFindClipboard” 和 “search.globalFindClipboard” 打开。当这个功能被打开之后，我们在 VS Code 中的搜索关键词和搜索记录，都会被共享给系统，然后当我们打开别的支持这个功能的应用时，比如 Safari 或者 Chrome 浏览器，按下 “Cmd + F”键，就会发现同样的搜索关键词已经被自动填充到搜索框中了。

小结

我在今天文章的最开头说，一个功能丰富且快速的搜索，在很多情况下甚至比语言服务还要来得有用。这是因为，VS Code 里的多文件搜索太快了，就拿我自己来说，当我对某个类或者函数的名字有个大概的印象，我都会使用多文件搜索，进行模糊匹配，基本都能找到想要的结果。这比绞尽脑汁想出到底是哪个具体的类、名字是啥，然后使用语言服务来找到它在哪里被使用了，要快捷得多。虽说很暴力，但不得不说也很有效。

好了，总结来说，今天我们一起研究了如何利用搜索这样一个最基础的功能，让我们在代码之间自由穿梭。不过要想掌握好搜索，你还得学好正则表达式，得学习 glob 语法，“课业压力”不小，加油！

13讲优化你的编辑器设置

今天我们终于到了“基础入门”部分的最后一篇：优化你的编辑器设置。在前面的章节中，我们主要介绍了编辑器的功能，并且是尽量介绍编辑器默认推荐的设置。但在实际工作中，我们是需要根据自己的个人喜好以及项目的不同特性来对编辑器进行一定修改的。

这里我们可以先一起来玩一个“大家来找茬”的游戏：图1是使用没有修改过任何编辑器设置的 VS Code 打开的一个 JavaScript 的文件，而图2是使用经过了不少的个性化定制的编辑器打开的同一个文件，请问你能从中看出多少个不同点呢？

图 1

图 2

好了，这里我就不卖关子了。其实为了达到图2的这个效果，我一共做出了七个设置的修改，形成了“六个变化”。并且这几个设置都是被大家频繁使用的，是用于个性化定制编辑器的设置。

那下面我们一起来看一看这“六个变化”分别是什么。

第一个变化，你可能一下子就注意到了，那就是编辑器最左侧的行号。在图1中，行号代表的是每一行代码所处的位置，也就是在当前文件中处于第几行，是绝对行数。而在图2中，行号则显示的是每一行代码相对于当前光标所在位置的行的距离，是相对行数。经常使用 Vim 的用户一定非常熟悉这个功能。除了改变行号的值以外，你还能够将行号完全隐藏起来，也就是使整体代码不显示行号。这控制整个行号显示与否及如何显示对应的编辑器设置是 editor.lineNumbers。

第二个比较明显的变化是，在图2中你能够在不少代码行前面看到灰色的“点”，这每一个“点”都代表着一个空格符。你可以通过设置 editor.renderWhitespace: all 让编辑器将所有的空格符、制表符等全部都渲染出来。这样你就能够一眼看出这个文件中使用的究竟是制表符还是空格符，以及有没有在哪里不小心多打了一个空格等。

第三个比较明显的变化就是编辑器中间的几个竖线。在图1中，第二行到第六行代码的中间，从内到外你能够依次看到两个竖线。这两个竖线就是缩进参考线。编辑器会根据你指定的制表符的长度，来决定缩进参考线的位置。这样你就可以非常清楚地知道代码有没有正确地缩进，而且也方便你区分出不同代码块之间的层级关系。这个功能是可以通过 “editor.renderIndentGuides” 来控制开关的。

而图2中的竖线则不一样了，它叫做垂直标尺。如果你的项目中有规定说每一行代码不得超过多少个字符，比如说120个字符，那么你就可以将标尺设置为120，即 “editor.rulers: [120]”。这样的话编辑器就会在第120个字符所在的位置处画出这样一条垂直的竖线，所以你一眼就可以看出自己的代码是否达标。

第四个变化是，在编辑器的最右侧，很明显在图 1 中，你能够看到小地图 Minimap；而在图 2 中，这个功能则被关闭了。这是因为我找代码一般更习惯使用搜索功能，所以通常我在笔记本上使用编辑器时，都会将小地图功能关闭，这样的话就能够留出更多的空间给其他 UI 组件。这里我是通过 “editor.minimap.enabled” 来控制它的显示与否。

上面介绍的那些都是比较容易发现的区别，你可能很快就能找出来。但接下来这两个“区别”的发现可能要相较稍微难一些。

仔细对比后，你会发现第五个变化是光标的样式。在图1中，光标是一条竖线，而在图2中光标则相对粗一些。编辑器中的光标样式有非常多种，你可以控制粗细，也可以控制它怎么闪烁。你需要调整的设置是 “editor.cursorBlinking” “editor.cursorStyle” 和 “editor.cursorWidth”。

第六个变化，也就是最后一个配置，则是跟颜色有关。在图 1 中，第五行的代码下有一个绿色的背景色。通过这样一个背景色的改变，你能够清楚地看到哪一行代码是当前光标所在的位置。而在图 2 中，我则是通过更改设置 editor.renderLineHighlight: "all" 把当前代码行的行号下的背景色也修改了，所以你可以看到图 2 的行号 5 的背景色也成为了绿色，整体上看起来更统一。

上面的这些设置决定了编辑器看起来怎么样，而下面我们再一起来看一下有哪些设置能够决定我们在编辑器里的书写体验。

第一个不得不提及的话题就是：空格还是制表符？在 VS Code 的代码里，我们通常使用的是制表符，但是使用空格的同学们也不用紧张，因为编辑器会根据你所打开的文件夹或者项目来决定该使用空格还是制表符。也就是说，如果你的项目中使用的都是空格符的话，那么当你在书写代码的时候，每次按下 Tab 键，编辑器输入的就会是空格。

如果你并不希望 VS Code 的自动检测来控制制表符或者空格键的使用，那你可以通过设置 “editor.detectIndentation” 来禁用它。这之后，你在书写代码时，空格或者制表符的使用，则是由设置 “editor.insertSpaces” 来决定的；而每一个制表符所对应的空格符的长度是由设置 “editor.tabSize” 来控制。这两个设置往往是需要搭配在一起使用的。

另外一个因人而异，或者受项目、团队影响比较大的就是代码风格了。如果一个团队想要保证所有人的代码风格都是一致的，那么可以在编辑器中使用格式化工具。而如果你喜欢的方式是先不管三七二十一，把代码写完，然后保存代码，再统一进行格式化的修改，那么你可以设置 “editor.formatOnSave: true”。而如果你希望编辑器在你打字的时候就自动帮你校正代码格式的话，则可以将设置 “editor.formatOnType: true” 打开。

对了，说到文件保存，默认情况下，你需要按下“Cmd + S”来保存文件，但是其实你也可以修改设置 “files.autoSave” 来对文件进行自动保存。但由于很多自动化的脚本工具是根据文件状态的改变来触发运行的，所以为了避免频繁触发这些脚本，你也可以将 “files.autoSave” 设置为 “delay”，然后使用 “files.autoSaveDelay” 控制在你打完字多久后保存文件。

小 Tip

上面的这些设置可能相对来说中规中矩，如果你问我，哪个编辑器的设置最让我惊喜和意外，我觉得 “files.defaultLanguage”当仁不让。

当你按下 Cmd + N （Windows 上是 Ctrl + N）在编辑器里创建一个新文件的时候，这个新的文件会被识别为普通文本文件，你在里面书写内容时并没有合适的语法高亮和自动补全，所以你可能会经常看到有些用户，创建了新的空文件后，然后再去调整文件的语言类型。

但是，如果通过把 “files.defaultLanguage” 设置为你想要的语言，比如说，把它设置成 “Markdown”，那么创建空文件的时候，VS Code 就会把它当作一个 Markdown 文件，然后你在里面能够得到 Markdown 的所有语言支持。

我在工作的时候，也会拿 VS Code 来写会议记录，当我突然有了一个新的想法，我就会立刻创建新文件，无需任何改动，就能够书写各种 Markdown 的语法，并且得到正确的代码高亮。这就是我心目中的最佳编辑器设置。

小结

以上就是我在日常工作中常用的编辑器设置，当然这只是所有设置中小小的一部分。更多的设置，你可以通过搜索 “editor” 这个词找到，你不妨一个个都过一遍，看看它们都是干什么的，以及它们能不能帮助到你的工作。

除了一个个研究这些设置，你还可以通过功能的名字，进一步搜索。比如说，如果你想看看有哪些小地图的设置可以修改，那你在设置里搜索 “editor minimap” 就可以了。至于其他的功能，也是非常类似的，拿我们在前面的章节里介绍的功能来说，它们分别是：

• editor cursor， 是跟光标渲染和多光标相关的设置；
• editor find， 是与编辑器内搜索相关的设置；
• editor font， 是与字体有关的设置；
• editor format， 是代码格式化；
• editor suggest， 是和自动补全、建议窗口等相关的配置。

了解编辑器的同时，我也建议你顺带熟悉一下这些功能的英文名字，可以有助你更快地定位这些功能的设置。好了，这就是我今天介绍的全部，欢迎你在评论区留言，分享你的编辑器设置的技巧。