vscode使用介绍

Shift 键能用于控制文本选择的，Ctrl 或者 Cmd 键能当做辅助键的，Tab 是用于 在控件之间跳转的

VS Code 的做法是搭配组合辅助键 Ctrl、Alt 和 Meta 键，然后根据当前用户正在使用的组件来决定是 什么功能;
Vim 则是运用了“模态”的概念，把输入文本信息，和光标移动、文本操作等分开为不同的模态，不同模态各有一套自己的快捷键。大家都说 Vim 的学习曲线比较陡峭，一个很重要的原因就是“模态”的概念实在是另辟蹊径。

命令行的使用

如果你是 Windows用户，安装并重启系统后，你就可以在命令行中使用 code 或者 code- insiders了，如果你希望立刻而不是等待重启后使用，可以将 VSCode 的安装目录添加到系统环境变量 PATH中，Windows 64位下的 VS Code 安装路径是 C:\Program FIles\Microsoft VS Code下。

如果你是在 macOS 上使用，安装后打开命令面板(command+shift+p)，键入shell，然后搜索 Shell 命令:在 PATH 中安装 “Code” 命令 并执行，然后重启终端模拟就可以了。

code --help	#  打印code的相关命令
code demo.html #vscode打开某文件
code -r demo2.html  #当前窗口打开
code -g demo.html:123 #打开demo文件，并跳转到123行
code -d demo.html demo2.html #比较两个文件的差异

VS Code 命令行除了支持打开磁盘上的文件以外，也接受来自管道中的数据。这样你就可以将原本在 命令行中展示的内容，实时地展示在 VS Code 里，然后在编辑器中搜索和修改。比如，你可以把当前 目录下所有的文件名都展示在编辑器里，此时只需使用ls | code -命令。

chapter 4

2016年的时候，我同时在开发维护 VS Code 中的编辑器以及 Vim 插件，经常在这两套完全 不同的快捷键之间切换。我的切实感受是，熟记 VS Code 的这套快捷键后，很多核心操作的 效率是可以和 Vim 匹敌的，而且很多 VS Code 不支持的 Vim 快捷键也可以通过插件的方式 来实现。

双手不离键盘

关于快捷键插件的开发，我在后面会讲，今天先来谈一谈核心的键盘操作:光标的移动、文本的选择、文本的删除，以及如何为编辑器命令绑定快捷键。

1. 光标移动

虽然 VS Code 是基于 Web 技术开发的非原生应用，但是它支持针对单 词、行、代码块、整个文档等多种光标移动方式。

今天，我会借助一段非常简单的 5 行 JavaScript 代码来讲解这些操作。

function foo() {
  bar();
}

foo();

首先是针对单词的光标移动

option 左右键 #移动到单词的头尾

第二种方式是把光标移动到行首或者行末。

command 左右键 #移动到行首或行尾

接下来一种是对于代码块的光标移动。

command shift \

最后一种基础的光标操作就是移动到文档的第一行或者最后一行，你只需按下 Cmd 和上下方向键即可(Windows 上是 Ctrl + Home/End 键)。

command 上下键

2. 文本选择

掌握了上面的快捷键之后，你还可以非常轻松地掌握文本选择的操作。因为对于基于单词、行 和整个文档的光标操作，你只需要多按一个 Shift 键，就可以在移动光标的同时选中其中的文 本。

比如说，你把光标放在第一行代码第四个字符 c 的后面，按下 Option 加左方向键，你就可以把光标跳转到 function 这个单词的开头，这个在前面我有讲过。如果你同时按下 Option + Shift + 左方向键，那么你就能把光标到 function 单词开头之间的所有字符全部选中，也 就是选中 func 这四个字符。

option shift 左右键  #选择单词的前后部分
option shift 上下键 	#复制当前行

同时按住 Option + Shift + 左方向键，选中当前单词开头到光标之间的所有字符 同理，假设说光标放在第二行，然后你按下 Cmd、Shift 和上下方向键，就能把第二行光标到 第一行，或者最后一行之间的字符选中。是不是很简单呢?

command shift 上下键 #选择光标前后的所有行内容

3. 删除操作

比如你想把当前行中光标之前的文本全部删除，就可以先选中这段文本(Windows/Linux: Home + Shift，macOS: Cmd + Shift + Left)，然后再按删除键。不过对于频繁使用的删除操作，你肯定希望单次操作就可以完成任务，而不是重复地选择文本然后删除，那么你需要记 住下面几个命令。

Cmd fn delete #删除当前行中光标后(右侧)所有文本
Cmd Delete #删除当前行中光标前(左侧)所有文本

(3)删除单词内的字符与此类似。假设把光标放在第一行第四个字符 c 的后面。Option 加左方向键把光标移动到 function 这个单词的开头，Option加左方向键再加 Shift 即可选中 func 这四个字符，而Option 加 Delete 则会删除 func 这四个字符。这里你可能看出来了，这些快 捷键共同的是 Option 键，然后通过按下 Shift 或者 Delete 键，来达到不同的效果。

#删除字母左侧字符
option delete 
#删除字母右侧字符
option fn delete

附加：分享一下mac控制光标的快捷键

ctrl + p 上
ctrl + n 下
ctrl + b 左
ctrl + f 右
ctrl + a 将光标移至行首 
ctrl + e 将光标移至行尾

总结一下:

一、行内操作快捷键可以拆分出三个维度来理解

1、操作内容:移动(无)，选择(⇧)，删除(⌫)

2、操作方向:移动和选择都是左右方向键(→、←)，删除的方向键(⌫、 fn⌫)

3、操作范围:单字符(无)，单词(⌥)，行(⌘) 因此，针对行内的操作的快捷键从以上三个维度进行组合即可。

二、跨行操作 操作范围:代码块(⌘⇧)，html标签块(不支持)，文档(⌘) 代码块的移动 ⌘⇧
代码块的选择 ⌘⇧] (需要自定义)
代码块的删除 目前看来只能先选择，在⌫删除

文档的移动 ⌘↑ ⌘↓
文档的选择 ⌘⇧↑ ⌘⇧↓
文档的选择 目前看来只能先选择，在⌫删除

chapter5 vscode进阶

在上一讲中，你知道了要删掉一行代码，你可以选中它，然后再按 Delete 键。不过还有一个快捷键， 那就是直接按下 “ Cmd + Shift + K ” (Windows 上是 “Ctrl + Shift + K”)，当前代码行就可以被删除了。

Cmd + Shift + K   #删除当前代码行

如果你只是想要剪切这行代码，那么你直接按下 “ Cmd + x ” (Windows 上是 “Ctrl + x”) 即可。

Cmd + x   #剪切这行代码

我想你肯定很清楚，“Enter ” 键的基础作用是能在编辑器里光标所在的位置添加一个换行符。但是很多 时候你可能并不是单纯地要将一行分成两段，而是希望在这行的下面或者上面开始一段新的代码。

这个功能对应的快捷键非常好记，它跟 “Enter”键十分接近。当你想在当前行的下面新开始一行时，你只需按下 “Cmd + Enter ” (Windows 上是 “Ctrl + Enter ”);而当你想在当前行的上面新开始一行时， 你只要按下 “Cmd + Shift + Enter”(Windows 上是 “Ctrl + Shift + Enter”)就行了。

cmd enter  #移动并新建下一行
cmd shift enter #移动并新建上一行

当你想移动一段代码时，一般你可能会分三步走:先选中，再剪切，最后粘贴。不过我更喜欢的是按住 “Option + 上下方向键”(Windows中就是“Alt + 上下方向键”) ，将当前行，或者当前选中的几行代 码，在编辑器里上下移动。

option 上下键 #移动当前行

如果你同时按住 “Shift” 键的话，也就是 “Option + Shift + 上下方向键”(Windows中就是“Alt + shift + 上下方向键”)，那就可以复制这几行，然后粘贴到当前行的上面或者下面。

option shift 上下键 #复制粘贴当前行

另外，你在尝试“Option + 上下方向键”这个快捷键“上下移动”时，可能也发现了，当你把一段代码移动 到花括号里面或者外面时，代码前的制表符或者空格的数量会自动发生改变，这样你就不需要移动完代 码后再调整了。

编程语言相关的命令：

1. 添加注释

cmd / #添加注释

2. 代码格式化 （需要安装对应语言的插件）当然，前提条件是你已经安装了相关插件。

#格式化所有代码
option shift F 

#选中一段代码 格式化
command K
command F

3. 代码缩进

你可以打开命 令面板(快捷键“Cmd + Shift + P”)，搜索 “缩进”，然后使用 “重新缩进行” 将整个文档的缩进进行调 整，但更多时候，你只需要运行 “重新缩进选中行” 来调整部分选中代码行的缩进。

cmd shift P

其他:

第一个是调换字符的位置。

Ctrl + t   #调换字符位置

第三个是合并代码行。

Ctrl + j    #合并代码行

第五个是撤销光标的移动和选择。

Cmd + U    #撤销光标的移动和选择

ctrl + - 返回上一个窗口及光标的移动轨迹

Cmd + - 放大缩小窗口

cmd W 关闭窗口

chapter6 多光标特性

1. 使用鼠标
第一种添加多光标的方式，就是使用鼠标。在键盘上按住 “Option”(Windows 上是 Alt)，然后鼠标点在第二个“5”之前，那么第二个光标就创建好了

2. 使用键盘
第二种方式是使用键盘，但是比第一种方式要多两个步骤，我们来一起看看是为什么。

首先你还是先移动光标到第一个“5”的前面。然后按下 “Cmd + Option + 下方向键”(Windows 上是 “Ctrl + Alt + 下方向键”)，在当前光标的下面创建一个光标。

cmd option down

创建多光标的两个特别命令:

1. “Cmd + D”

首先讲第一种，还是上面的代码，你把光标移动到数字“5”之前，按下 “Cmd + D”，这样第一个“5”就被 选中了;然后再按一次 “Cmd + D”(Windows 上是 Ctrl + D)，你可以看到，第二个“5”也被选中了。

“Cmd + D” 这个命令的作用是，第一次按下时，它会选中光标附近的单词;第二次按下时，它会找到 这个单词第二次出现的位置，创建一个新的光标，并且选中它。这样只需要按下三次，你就选中了所有的“5”。这个时候你再按下 “右方向键”，输入“px”，即可完成任务。

之所以说这个方法特别，是因为它的适用情况比较特别:处理多次出现的“相同”单词。如果你要处理的 文本并不是相同的，那么这个方法就不适用了。

2. Option + Shift + i

接下来讲讲第二种，是跟代码行批量处理有关，也还是用的前面的代码。首先你选择多行代码，然后按 下 “Option + Shift + i” (Windows 上是 Alt + Shift + i)，这样操作的结果是:每一行的最后都会创建 一个新的光标。

同样的，这种方法是基于代码行的，如果你的需求是在同一行添加多个光标，那么就不适用了。

就上面的例子，我个人第一反应是使用“Cmd + D”这种方式来处理。也许你会问，是不是学习一种方式 就够了呢?毕竟这些方式也不那么容易记忆。我的回答也很简单，你应该都学，然后熟能生巧，融会贯 通。我前段时间读《鞋狗》这本书，里面有一段论述相当精彩:

在剑道中，只有在心中不再被我和你，不再被对手和他的剑，不再被自己的剑和使剑的方 法所困扰时，才能达到最完美的状态…一切都是虚空:你自己、挥舞的剑和舞剑的胳 膊，即便是空虚的想法都不再存在。

舞剑、做企业是这样，我们写代码用编辑器何尝又不是这个道理呢?

其他：

cmd-k cmd-d 跳过当前的选择

chapter 7 文件、符号、代码之间的跳转

文件跳转

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

ctrl tab #显示当前打开的所有文件

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

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

cmd P

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

Cmd + Enter #组合键在新窗口中打开文件

行跳转

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

Ctrl + g    #调出行输入框

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

符号 (Symbols) 跳转

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

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

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

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

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

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

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

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

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

引用 (Reference) 跳转

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

chapter 8 鼠标操作

文本选择

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

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

文本编辑

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

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

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

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

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

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

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

多光标

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

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

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

悬停提示窗口

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

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

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

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

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

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

代码跳转和链接

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

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

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

chapter 9 代码自动补全、快速修复和重构

自动补全

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

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

foo()

function bar(a) {

}

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

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

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

快速预览

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

log函数的蓝色图标(最右侧)，点击这个图标后，建议列表旁边就有出现一个快速预览的窗口，而这个窗口里面呈现的就是这个函数的 定义

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

参数预览

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

Cmd + Shift + Space  #函数参数预览

自动补全设置

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

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

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

"editor.quickSuggesions": { 
  "other": true, 
  "comments": false, 
  "srings": 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， 这样这个函数或者变量出现的地方就都会被修改。

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

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

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

**基于单词的自动补全

“editor.wordBasedSuggestions” #关闭 编辑器提供的提示

chapter11 折叠、小地图、面包屑

代码折叠

Cmd + Option + 左花括号  #折叠
cmd + option + 右花括号    #展开

#光标处递归折叠
cmd k
cmd + 左花括号
#光标处递归展开
cmd k
cmd + 右花括号

#编辑器里所有折叠
cmd k
cmd 0
#展开
cmd k
cmd j

#chapter12 极速搜索

单文件搜索

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

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

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 的正则引擎。

搜索配置

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

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

单文件替换

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

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

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

多文件搜索和替换

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

cmd + option + F    #调出多文件搜索视图

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

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

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

多文件搜索配置

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

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

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

chapter13 编辑器优化设置

editor.lineNumbers。

editor.renderWhitespace: all #渲染空格符、制表符 等

editor.renderIndentGuides #缩进参考线

editor.rulers: [120] #垂直标尺

editor.minimap.enabled #小地图 Minimap

editor.cursorBlinking #光标闪烁样式

editor.cursorStyle #光标样式

editor.cursorWidth #光标粗细

editor.renderLineHighlight: “all” #当前光标所在的位置高亮

editor.detectIndentation #使用空格还是制表符

editor.detectIndentation #自动检测来控制制表符或者空格键

editor.insertSpaces #空格或者制表符的使用

editor.tabSize #制表符所对应的空格符的长度。这两个设置往往是需要搭配在一起使用的。

editor.formatOnSave: true #代码写完，然后保存代码，再统一进行格式化的修改

editor.formatOnType: true #编辑器在你打字的时候就自动帮你校正代码格式

“fles.autoSave #文件进行自动保存

fles.defaultLanguage

小结

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

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

editor cursor， 是跟光标渲染和多光标相关的设置; editor fnd， 是与编辑器内搜索相关的设置;
editor font， 是与字体有关的设置;
editor format， 是代码格式化;

editor suggest， 是和自动补全、建议窗口等相关的配置。

chapter14 工作台和控制面板

命令面板

但是没有任何提示的话，你可能很长时间都不会发现命令面板。虽然它的可发现性(discoverability) 不太好，但也是 VS Code 最重要的组件之一。在我看来，它是一个基于文本的交互界面。怎么理解这 句话呢?你可以先通过快捷键 F1 或者 Cmd + Shift + P 打开命令面板，打开之后，命令面板的输入框 里已经有一个字符:>(大于号) 。

你可能会好奇，这个大于号是干嘛用的呢?你可以回想一下在前面“编辑器 —> 快速代码跳转”文章里介 绍的快速访问文件中的符号 ，当你按下 Cmd + Shift + O (Windows 上是 Ctrl + Shift + O)打开了命 令面板，控制面板显示了当前文件里的所有符号，此时输入框里的第一个字符是 @。

看到这里你应该猜到了，命令面板是根据输入框里的第一个字符来决定提供什么功能的。你甚至不难猜 出 VS Code 是怎么实现命令面板的，VS Code 会先处理输入框里的文本，然后根据第一个字符来选择 不同的处理方案。

如果第一个符号是>(大于号)，那么就提供所有的命令。当你继续输入字符时，VS Code 就会在所有 命令里进行搜索;如果第一个字符是@，那么就扫描当前文件，提供所有的符号。

那么命令面板里一共支持多少不同的功能呢?这里你可以把输入框里的所有字符全部删掉，看看 VS Code 给你的提示。

当输入框里没有任何的字符时，命令面板提供的功能是访问最近使用的文件。同时你会在输入框内看到 一段提示文字:键入 “?”从此处获取有关可进行的操作的帮助。接下来，你就依照这个提示，输入问 号。

紧接着你就可以看到十几条选项，分别代表着你能在命令面板里使用的不同的功能。虽然有十几条选 项，但是记住它们并不是太难。

首先是几个符号:

1. >(大于号) ，用于显示所有的命令。

2. @ ，用于显示和跳转文件中的“符号”(Symbols)，在@符号后添加冒号:则可以把符号们按类别

   归类。

3. #号，用于显示和跳转工作区中的“符号”(Symbols)。

4. :(冒号)， 用于跳转到当前文件中的某一行。

这几个符号所对应的命令我们在之前的文章中已经研究过，比较好记。输入这些符号后，继续输入相应 内容就可以对结果进行搜索了。

chapter15 文件管理，multi-rootworkspace

VS Code 则选择了一种相对轻量，而且大家都易于理解的方式，那就是所有的操作都基于文件和文件 夹。当你打开一个文件夹，VS Code 的核心功能就会对这个文件夹进行分析，并提供对应的功能。比 如，在打开的文件夹下检测到有 .git 文件，就加载 Git 插件来提供版本管理的功能;或者发现文件夹下 有 tsconfg.json ，就会激活 TypeScript 插件提供语言服务。

当你第一次打开 VS Code 的时候，工作台中还没有打开任何文件夹。这时候在欢迎界面的左上方，你 能够看到:“新建文件”和“打开文件夹”等这样的快捷键。

这时候请注意工作台最下方的状态栏，当 VS Code 没有打开任何文件夹的时候，它的颜色是紫色的。 而如果在工作台中打开了某个文件夹，状态栏的颜色就会变成蓝色。

资源管理器

当你打开一个文件夹之后，你就能在工作台的最左侧看到资源管理器。资源管理器将当前文件夹下的文 件和子文件夹，以树形结构的形式呈现出来。每一个文件的前面还会有一个小图标，用于反映文件的类 型。

设置

资源管理器你应该比较容易熟悉，也许不用介绍你也可以很快就能琢磨出来，不过这里还有几个设置需 要我分享给你，以后在使用编辑器的过程中可能会用得着。

第一个是 “explorer.autoReveal” ，默认是打开的。当你在编辑器里打开一个文件时，资源管理器里的列 表会自动将选中这个文件，并且滚动列表，将这个文件项滚动到屏幕的中间，保证你能够看到。如果你不喜欢这个功能，可以将其关闭。

第二个是 “explorer.confrmDelete” ，默认也是打开的。当你在一个文件项上右键选择删除时，VS Code 会跳出一个确认窗口，询问你是否确实要删除此文件。这个询问的目的是防止你误操作，想必这 个功能你已经很熟悉了，当然，如果你觉得它多此一举的话，也可以将其关闭。

.vscode

看到这里你可能会问，VS Code 是基于文件夹来进行管理的，各个插件也会分析当前打开的文件夹， 但这是不是也意味着 VS Code 其实对项目没有任何管理和配置的能力呢?

其实不然，VS Code 是允许你创建几个跟当前文件夹或者跟项目有关的配置保存在这个文件夹中。这 跟 IDE 的工程文件的思路是一致的，把设置放在这个文件夹中，便于团队内部进行共享。但二者区别在 于，VS Code 的绝大部分功能，不需要这些配置文件也能工作，同时，这些文件都尽可能保证易于阅 读和修改。

为了和其他工具添加的配置文件区分开，VS Code 的配置文件都会放在一个子文件夹 .vscode 中，下 面我们一起来看这个特殊的文件夹。

这个文件夹中可以包含以下几种文件。

第一个是配置文件(settings.json)。这个文件的作用和格式，跟我们之前修改的用户设置几乎是完全 一样的。唯一的区别就在于这个文件的设置，只有当前这个文件夹在VS Code 中被打开时才会生效。

这个文件的存在，很好地解决了个人喜好和项目规范之间的冲突。比如说我写代码的时候喜欢用空格， 而不是制表符，这样的话，在我的个人设置里面就可以设置为永远使用空格。但是在VS Code的这个项 目中，团队要求一定要都使用制表符，那我们就可以在 settings.json 中将这个配置写进去，而不是粗暴 地要求每一位成员都去修改他们各自的配置文件。

另外常用的两个文件:一个是调试设置(launch.json)，它是用于说明如何调试当前文件夹下的代码; 一个则是任务设置(tasks.json)，它是关于 VS Code 任务系统的配置文件。把它们放在文件夹中甚至 一并放入到代码仓库中，这样任何使用这个项目的工程师，都不用学习如何配置调试和配置任务系统就 能运行代码了。

当然肯定也会有人不喜欢在代码仓库中出现编辑器相关的各种配置文件，不过也不用担心，你可以使用 版本管理的忽略配置，将 .vscode 这个文件夹剔除在版本管理之外。那么，你就可以自己去控制跟这个 项目相关的配置文件了。