配图源自 Freepik

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

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

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

开始之前

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

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

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

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

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

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

管理窗口

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

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

切换面板

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

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

切换侧栏

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

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

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

搜索与替换

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

搜索内容

替换内容

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

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

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

搜索文件

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

编辑区

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

移动光标

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

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

常规

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

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

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

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

代码块相关

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

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

跳转相关

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

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

多光标相关

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

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

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

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

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

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

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

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

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

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

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

选择文本

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

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

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

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

方法很多，比如：

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

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

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

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

移动行

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

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

插入行

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

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

操作行

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

删除

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

注释

其实这个应该不用多说。

块注释个人用得不多。

格式化

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

「保存但不格式化」有时倒是有点用处。

折叠与展开代码

全部折叠其实不太好用。

保存

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

撤销与恢复

其实这个也不用说的。

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

命令面板

这一章节主要介绍一些本人常用的插件及命令。

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

常用命令

配置命令

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

查看插件命令

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

高阶用法

我们从实际场景出发。

场景一

假设我们要在本地调试，想在 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
}

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

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

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

{
  "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 呢？

1. 使用「⌃ + ⇧ + L」展开选择两次，以选中 URL。
2. 进行粘贴（剪贴板中已拷贝将要替换的 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。

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

References

• Key Bindings for Visual Studio Code
• User Guide for Visual Studio Code
• [VS Code 教程](https://geek-docs.com/vscode/vscode-tutorials/vscode-keyboard.html