用好 VS Code 快捷键

配图源自 Freepik

工欲善其事必先利其器，用好快捷键一定程度上可提高编码效率。

本文以 macOS 为例，部分快捷键组合方式与 Windows、Linux 平台可能略有差异。

快捷键有很多很多，但每个人常用的也就那些，无需强迫自己一次性记住，多用就会形成肌肉记忆。

展开/收起目录：

- 开始之前 - 管理窗口 - 切换面板 - 切换侧栏 - 搜索与替换 - 搜索内容 - 替换内容 - 搜索文件 - 编辑区 - 移动光标 - 选择文本 - 移动行 - 插入行 - 操作行 - 删除 - 注释 - 格式化 - 折叠与展开代码 - 保存 - 撤销与恢复 - 命令面板 - 常用命令 - 配置命令 - 查看插件命令 - 高阶用法 - 场景一 - 场景二 - References

开始之前

在此之前，先弄清楚快捷键的增删改查，从左下角的「管理 - 键盘快捷方式」打开面板。

将鼠标移至对应命令，然后右键可对增加、修改、删除、重置对应的键绑定。点击左侧 ICON 也可以增加或修改。查询则有以下方式任君选择：

按关键词：输入关键词可以搜索命令、键绑定、当的内容，比如 查找、find、cmd f 等（中文查找需安装中文语言包）。
按源分类：分为用户 @source:user、系统 @source:system、插件 @source:extension、默认 @source:default 四类。
按录制键盘：先点击输入框右侧类似键盘的 ICON，再按下快捷键，可快速检索对应绑定键。

除了修改键绑定之外，还可以修改 When 条件。

部分控制键与符号映射如下：

Keys	Symbols
Commad	⌘
Control	⌃
Shift	⇧
Option	⌥

一些会采用两组键组合的方式：先用「⌘ + K」记录第一组组合键，然后再按下其他键或组合键以记录第二组。这种习惯似乎源自 Emacs。比如「⌘ + K」和「⌘ + S」两组组合键来打开快捷键面板。

管理窗口

绑定键	描述	使用场景/说明
⌘ + ,	打开设置	在 macOS 里几乎所有软件都是使用该快捷键打开偏好设置的。
⌘ + R	打开最近的文件	用于快速切换项目。
⌘ + ⇧ + N	新建窗口	使用 ⌘ + R 会覆盖当前窗口，如果不希望覆盖可用这个。
⌘ + ⇧ + P	显示命令面板	所有的命令在这里都能找到。
⌘ + K 和 ⌘ + W	关闭所有编辑器

对于在新窗口打开项目，也可以用 code /path/to/project 来替代「⌘ + ⇧ + N」和「⌘ + R」的组合操作。但还是有点麻烦，为此特地做了一个 Alfred 插件（alfred-open-with-vscode），支持在指定目录范围内检索并打开项目，还能展示 VS Code 最近打开过的项目。

对于重新加载窗口，可以先「⌘ + ⇧ + P」唤起命令面板，然后输入关键词「Reload Window」，再「Return」确认即可。类似插件更新、Lint 规则调整后没生效等场景，可通过重新加载解决。

切换面板

主要用于控制侧边面板、底部面板的显示与隐藏。

绑定键	描述	使用场景/说明
⌘ + B	显示/隐藏侧栏
⌘ + J	显示/隐藏底部面板	可快速打开内置终端、调试控制台等。
⌃ + `	显示/隐藏内置终端	与「⌘+ J」类似，它会定位至终端选项卡。

如果是 108 键键盘，个人更多用「⌃ + `」。而 87 键的还要额外组合「fn」键才能唤起内置终端，此时更多用「⌘ + J」。

切换侧栏

默认情况下，侧栏有资源管理器、搜索、源代码管理、运行和调试、扩展。

绑定键	描述	使用场景/说明
⌘ + ⇧ + F	切换至搜索	用于全局搜索。
⌘ + ⇧ + X	切换至插件	查看插件。
⌘ + ⇧ + E	切换至资源管理器
⌘ + ⇧ + D	切换至运行和调试
⌃ + ⇧ + G	切换至源代码管理

有一些个人用得不算多。比如，切换至资源管理器查找文件场景，我更多用的是「⌘ + P」更快地切换文件。

关于「⌘ + ⇧ + E」有可能会与搜狗输入法冲突，后者优先级更高，可在「搜狗输入法 - 偏好设置 - 按键 - 快捷功能 - 英文输入法」处禁用。

搜索与替换

包括搜索文件（内容）、替换内容等。

搜索内容

绑定键	描述	使用场景/说明
⌘ + ⇧ + F	切换至搜索	全局搜索。
⌘ + F	文件内搜索

替换内容

绑定键	描述	使用场景/说明
⌘ + ⇧ + H	切换至搜索栏并展开替换	全局替换。相比「⌘ + ⇧ + F」，它会自动展示替换输入框。
⌘ + ⇧ + L	选择所有匹配项	当前文件范围。是「⌘ + F」加上区分大小写和全字匹配，然后替换的一种更快的方案。
F2	重命名符合	可以对定义处、引用处的属性/方法进行同步修改，贼方便。

假设当前文件有 setStorage、 setStorageSync两个方法，但不小心把 setStorage 错写为 setStroage 了，此时可以将光标移至 setStroage 中间，按下「⌘ + ⇧ + L」快速选中当前文件所有匹配的文本，可以进行批量修正。

假设上述文件 setStroage 是引用自其他文件，更好的操作可能是右键选择「重命名符号 F2」的方式进行修正，它可以对定义处的方法名称进行同步修改。

请注意，重命名符合与作用域有关，这点与「⌘ + ⇧ + L」是有区别的。假设函数内外各定义了一个 setStroage 方法，如果对函数内的进行重命名，它只会修改函数内的，而函数外的则不会修改。

搜索文件

对于文件数多、目录层级深的项目，如果一个一个地在资源管理器面板中展开查找，显得有点慢。

绑定键	描述	使用场景/说明
⌘ + P	转到文件	用于快速打开某文件。

编辑区

平常开发中，主要都聚焦在文件编辑区中，掌握一些常用的快捷键很有必要。

移动光标

列举一些常见的移动光标场景：

以单词为单位进行左移、右移
移动至行首、行尾
移动至文件开头、末尾
移动至代码块起始、结束
移动至指定行、列
返回至上一个位置、前进至下一个位置
......

常规

如果用方向键一个一个地移动，对于一些较长的变量名、属性、方法等，显然很不友好。如果用鼠标，要经历离开键盘 → 滑动鼠标 → 回到键盘的过程，也烦。仅用「左/右方向键」来移动光标，是以「单个字符」为颗粒度进行移动的。如果以「Option + 左/右方向键」组合的话，其颗粒度变为「单词」，以实现快速移动的目的。

绑定键	描述	使用场景/说明
⌥ + ←	以「单词」为颗粒度向左移动	对于变量、属性、方法名称过长的情况，特方便。
⌥ + →	以「单词」为颗粒度向右移动	同上。
⌘ + ←	移动至行首
⌘ + →	移动至行尾
⌘ + ↑	移动至文件开头
⌘ + ↓	移动至文件末尾
PageUp	向上翻页	一次移动约 25 行。
PageDown	向下翻页	同上。

如果跳到行首/行尾，然后 Return 以在上方/下方插入空行，那么用「⌘ + Return」和「⌘ + ⇧ + Return」或许更快哦！

对于移动至行首/行尾，还可以使用「Home」或「End」键。

如果有些键盘没有 PageUp/PageDown，可以尝试用「fn + ↑」和「fn + ↓」进行翻页。

代码块相关

有时，我们需要快速切换至代码块的起始、结束位置。

绑定键	描述	使用场景/说明
⌘ + ⇧ + \	转到括号	支持 `{}`、`()` 两类括号，可快速切换至就近括号的开头/结尾位置。

支持多种语言，比如，JavaScript 的函数、条件语句，CSS 的选择器等。

跳转相关

绑定键	描述	使用场景/说明
⌃ + G	转到行、列	用于调试排错等场景，可以根据 Error 堆栈信息中的行列快速锁定源文件位置。
⌃ + -	返回	比如，使用「⌘ + Click」或「F12」跳转至某个函数定义的地方，再返回时就特别方便。
⌃ + ⇧ + -	前进

跳转至指定行列，其形式如 137:15，表示跳转至第 137 行、第 15 列。若不需要指定列，可省略列。

返回/前进支持跨文件之间切换。比如，JavaScript 中 A.js 使用了 B.js 文件中的 updateUserInfo() 方法，假设要看该函数具体实现过程，我们可以按住 ⌘ 键点击跳转至函数定义的位置，看完后要原路返回的话，只需要「⌃ + -」就能返回 A.js 引用的位置。

多光标相关

创建多光标的方式有以下两种：

按住「⌥」键，然后鼠标在对应位置点击。
使用快捷键。

绑定键	描述	使用场景/说明
⌘ + ⌥ + ↑	在上方添加光标
⌘ + ⌥ + ↓	在下方添加光标
⌥ + ⇧ + I	在行尾添加光标	前提是要选中多行。

撤销光标，可以使用「⌘ + U」，也可按住「⌥」在对应位置点击以取消。

其实多光标最终目的是批量操作，应优先考虑批量选择文本的快捷方式。若不满足，再使用多光标。

我是觉得「⌥ + ⇧ + I」稍微有点鸡肋的。就是选中多行时，最后一行选中的文本一定要是行尾，否则产生的多光标中的最后一个不会在行尾。但一般用鼠标拖动以选中多行时，会从末尾处开始或结束，也问题不大。

举个例子，假设要将 data 批量修改为 prize。

使用鼠标是这样子的 👇，还要小心翼翼地，生怕点错位置。

如果列对齐，使用「⌘ + ⌥ + ↓」会好一些。但不对齐也能用，比如先「⌘ + ⌥ + ↓」创建 4 个光标，然后使用「⌘ + →」将所有光标批量移至行尾，再操作。这些都是可以自由组合的，按需使用即可。

在录屏或屏幕共享时，可以切换至「屏幕模式」以展示当前按下的快捷键，方法是：先「⌘ + ⇧ + P」，再输入「Toggle Screencast Mode」，关闭同理。

利用「⌘ + D」是这样的 👇，对于示例中，列不对齐的场景更加方便。

利用「⌘ + ⇧ + L」是这样的 👇，更快。

关于「⌘ + D」的介绍在选择文本章节，也可先跳过再回来看。

选择文本

前面介绍了光标移动，通常是「⌘/⌥ + 方向键」的形式。只要再加上「Shift」键就能快速选择「光标起始位置到下一个位置的文本」。

绑定键	描述	使用场景/说明
⌥ + ⇧ + ←	选择起始位置至左侧单词边界之间的文本
⌥ + ⇧ + →	选择起始位置至右侧单词边界之间的文本
⌘ + ⇧ + ←	选择起始位置至行首之间的文本
⌘ + ⇧ + →	选择起始位置至行首之间的文本
⌘ + ⇧ + ↑	选择起始位置至文件开头之间的文本
⌘ + ⇧ + ↓	选择起始位置至文件开头之间的文本
⌘ + D	将下一个查找匹配项添加到选择	多次点击可以选择多个匹配项。

对于「⌥ + ⇧ + ←」或「⌥ + ⇧ + →」，可连续多次以选择更多的文本。

假设光标停在 updateUserInfo 的 eU 中间，如何快速选择 updateUserInfo 文本？

async function doSomething() {
  await updateUserInfo(data)
  // ...
}

方法很多，比如：

先「⌥ + →」移动至文本右侧，然后「⌥ + ⇧ + ←」选中整个文本。
先「⌥ + ⇧ + →」选中光标右侧文本，然后「⌥ + ⇧ + ←」选中整个文本。
直接「⌘ + D」选中。
直接「⌃ + ⇧ + →」选中。
......

绑定键	描述	使用场景/说明
⌃ + ⇧ + ←	收起选择
⌃ + ⇧ + →	展开选择	用来选择 URL 特方便。

可用来快速收缩/扩展选中文本，也是以单词为颗粒度的，看图感受一下。

如果单纯想要拷贝当前行，无需选中，直接「⌘ + C」即可。但不爽的是，拷贝的文本中包含前导缩进空格和尾随换行符。

移动行

移动行还是很常见的，比如用来对调两行之间的位置。

绑定键	描述	使用场景/说明
⌥ + ↑	向上移动行	除了单行，还支持选中多行进行移动。
⌥ + ↓	向上移动行
⌘ + [	向左行缩进	当光标不在行首时，好用。
⌘ + ]	向右行缩进

对于向左/向右行缩进，实际中更多的是开启 "editor.formatOnSave": true 在保存时自动格式化。

插入行

你添加新行的方式，还是先移动光标至行尾吗？

绑定键	描述	使用场景/说明
⌘ + Return	在下方插入行
⌘ + ⇧ + Return	在上方插入行

部分键盘又称为「Enter」键。

操作行

绑定键	描述	使用场景/说明
⌃ + J	合并行	比如链式调用时，可以选中多行然后快捷键合并为一行
⌥ + ⇧ + ↓	向下复制行
⌥ + ⇧ + ↑	向上复制行

向上/下复制行，看起来是一样的，区别在于最终光标停留在哪而已。

删除

绑定键	描述	使用场景/说明
⌘ + ⇧ + K	删除所在行	支持选中多行删除。
⌘ + Delete	删除光标左侧内容
⌘ + fn + Delete	删除光标右侧内容

其中「⌘ + fn + Delete」实质上是「⌘ + Backspace」。

注释

其实这个应该不用多说。

绑定键	描述	使用场景/说明
⌘ + /	行注释	支持选中多行操作。
⌥ + ⇧ + A	块注释

块注释个人用得不多。

折叠与展开代码

绑定键	描述	使用场景/说明
⌘ + ⌥ + [	折叠所在区域的代码块	多次可向上一级折叠。
⌘ + ⌥ + ]	展开所在区域的代码块
⌘ + K 和 ⌘ + -	折叠除所在区域之外的所有区域
⌘ + K 和 ⌘ + J	全部展开
⌘ + K 和 ⌘ + 0	全部折叠

全部折叠其实不太好用。

格式化

绑定键	描述	使用场景/说明
⌥ + ⇧ + F	格式化文档
⌘ + K 和 ⌘ + F	格式化选中内容

本人几乎不用，会开启 "editor.formatOnSave": true 在保存时自动格式化。

保存

至于「⌘ + S」就不说了。

绑定键	描述	使用场景/说明
⌘ + ⌥ + S	保存所有	有时候做小程序开发时，减少重新编译次数。
⌘ + K 和 S	保存但不格式化	有时候修改某些文件，但又不希望在保存时自动格式化，特别好用。

对于「保存但不格式化」，个人更喜欢在命令面板键入「Save without Formatting」来处理，因为命令面板会记录最近使用的命令。

撤销与恢复

其实这个也不用说的。

绑定键	描述	使用场景/说明
⌘ + Z	撤销	也支持全局替换操作的撤销。
⌘ + ⇧ + Z	恢复

以上就是编辑区中常见的快捷键，它们之间是可以自由组合的，可实现很多快捷操作。

命令面板

其实命令面板是非常好用的，除了键入时自动联想外，它会记录最近使用的命令，使用效率很高。

使用「⌘ + ⇧ + P」或「⌘ + P」可唤起命令面板。后者在输入框内键入 > 就能切换至命令模式。同理，前者在输入框去掉前导的 > 可切换至文件搜索模式。

以下介绍一些本人常用的插件及命令。

常用命令

Command Title	Description	System/Extension
Reload Window	重新加载窗口	内置
Close All Editors	关闭所有编辑器	内置
Save without Formatting...	保存但不格式化	内置
Open User Settings (JSON)	打开用户设置（JSON）	内置
Change Case upper/low/camel/snake/...	更改命名方式	change-case
Open/Config Github Blogger	写博客	Github Blogger
Toggle Screencast Mode	切换屏幕模式	内置
Configure Display Language	配置显示语言	内置
Install/Uninstall 'code' command in PATH	安装/卸载 `code` 命令	内置
Format Document...	使用...格式化文档	内置
......

配置命令

我们可以给这些命令添加、修改、移除或重置快捷键，方式如下：

查看插件命令

第三方插件所定义的插件，可在插件页面中查看。

高阶用法

我们从实际场景出发。

场景一

假设我们要在本地调试，想在 condition1 条件中返回 STATUS_TEST。

// From
function getStatus() {
  if (condition1) return STATUS_FIRST
  if (condition2) return STATUS_SECOND
  if (condition3) return STATUS_THIRD
  return STATUS_DEFAULT
}

// To
function getStatus() {
  // if (condition1) return STATUS_FIRST
  if (condition1) return STATUS_TEST
  if (condition2) return STATUS_SECOND
  if (condition3) return STATUS_THIRD
  return STATUS_DEFAULT
}

可能需要经过以下几步操作：

使用「⌥ + ⇧ + ↓」向下复制行；
移动光标至上一行；
使用「⌘ + /」注释原始行；
移动光标至下一行；
然后进行对应修改。

现在，我们可以针对这种场景定制一个自定义命令：

{
  "key": "ctrl+alt+c",
  "command": "runCommands",
  "args": {
    "commands": [
      "editor.action.copyLinesDownAction",
      "cursorUp",
      "editor.action.addCommentLine",
      "cursorDown"
    ]
  }
}

上面定义了一个「⌃ + ⌥ + C」的快捷键，它执行的命令为 runCommands，该命令接收的参数为 args，在参数中又可以定义一个命令列表，以实现多命令执行。

其中 args 是 command 接收的参数。同理，在 args.commands 的每个命令，都可以定义为类似 {"command": "xxx", "args": {"parm1": "value1"}} 的形式。

对应的 Command ID 可以在快捷键面板找到，右键可复制命令 ID。

现在，我们只要用一个快捷键就能实现上述 1 ~ 4 的步骤。

场景二

不知道你有没有遇到过，如果文件 URL 很长，且超出一屏时，使用拖动鼠标选择 URL 时稍有不慎偏离本行的话，基本上就要重新拖选了。

有人可能会说，给格式化程序设置一个默认的 printWidth 就改善了。但由于某些原因，该项目的 printWidth 很大，往往很容易超出一屏。

举个例子，其中 URL 在靠右一端：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 622" preserveAspectRatio="xMidYMin meet" style="width: 100%; background-size: cover; background-position: top center; background-repeat: no-repeat; background-image: url(https://cloud-minapp-45362.cloud.ifanrusercontent.com/10eb615c88e3709c757f22a50c18f30a.gif)"></svg>

如何快速替换这个 URL 呢？

使用「⌃ + ⇧ + L」展开选择两次，以选中 URL。
进行粘贴（剪贴板中已拷贝将要替换的 URL）。

{
  "key": "ctrl+alt+d",
  "command": "runCommands",
  "args": {
    "commands": [
      "editor.action.smartSelect.expand",
      "editor.action.smartSelect.expand",
      "editor.action.clipboardPasteAction"
    ]
  }
}

现在只要按下「⌃ + ⌥ + D」就可以快速替换了。

上述自定义的命令，添加到 keybindings.json 文件中，入口在这里 👇。

更多细节请看 Runing multiple commands。

以上仅仅是抛砖引玉，只讲了很少一部分，大家自由发挥想象力吧。

toFrankie / blog