工欲善其事必先利其器，用好快捷键一定程度上可提高编码效率。
本文以 macOS 为例，部分快捷键组合方式与 Windows、Linux 平台可能略有差异。
快捷键有很多很多，但每个人常用的也就那些，无需强迫自己一次性记住，多用就会形成肌肉记忆。
由于 CSDN 不支持上传 GIF 图片，可移步掘金阅读本文。
开始之前
在此之前，先弄清楚快捷键的增删改查，从左下角的「管理 - 键盘快捷方式」打开面板。
将鼠标移至对应命令，然后右键可对增加、修改、删除、重置对应的键绑定。点击左侧 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 | 块注释 |
块注释个人用得不多。
格式化
| 绑定键 | 描述 | 使用场景/说明 |
|---|---|---|
| ⌥ + ⇧ + F | 格式化文档 | |
| ⌘ + K 和 ⌘ + F | 格式化选中内容 | |
| ⌘ + K 和 S | 保存但不格式化 |
本人几乎不用，会开启
"editor.formatOnSave": true以在保存时自动格式化。
「保存但不格式化」有时倒是有点用处。
折叠与展开代码
| 绑定键 | 描述 | 使用场景/说明 |
|---|---|---|
| ⌘ + ⌥ + [ | 折叠所在区域的代码块 | 多次可向上一级折叠。 |
| ⌘ + ⌥ + ] | 展开所在区域的代码块 | |
| ⌘ + K 和 ⌘ + - | 折叠除所在区域之外的所有区域 | |
| ⌘ + K 和 ⌘ + J | 全部展开 | |
| ⌘ + K 和 ⌘ + 0 | 全部折叠 |
全部折叠其实不太好用。
保存
至于「⌘ + S」就不说了。
| 绑定键 | 描述 | 使用场景/说明 |
|---|---|---|
| ⌘ + ⌥ + S | 保存所有 | 有时候做小程序开发时，减少重新编译次数。 |
撤销与恢复
其实这个也不用说的。
| 绑定键 | 描述 | 使用场景/说明 |
|---|---|---|
| ⌘ + Z | 撤销 | 也支持全局替换操作的撤销。 |
| ⌘ + ⇧ + Z | 恢复 |
以上就是编辑区中常见的快捷键，它们之间是可以自由组合的，可实现很多快捷操作。
命令面板
这一章节主要介绍一些本人常用的插件及命令。
使用「⌘ + ⇧ + P」或「⌘ + P」可唤起命令面板。后者在输入框内键入
>就能切换至命令模式。同理，前者在输入框去掉前导的>可切换至文件搜索模式。
常用命令
| Command Title | Description | System/Extension |
|---|---|---|
| Reload Window | 重新加载窗口 | 内置 |
| Close All Editors | 关闭所有编辑器 | 内置 |
| Toggle Screencast Mode | 切换屏幕模式 | 内置 |
| Configure Display Language | 配置显示语言 | 内置 |
| Install/Uninstall ‘code’ command in PATH | 安装/卸载 code 命令 | 内置 |
| Format Document… | 使用…格式化文档 | 内置 |
| Change Case upper/low/camel/snake/… | 更改命名方式 | change-case |
| Open/Config Github Blogger | 写博客 | Github Blogger |
| … |
配置命令
我们可以给这些命令添加、修改、移除或重置快捷键，方式如下：
查看插件命令
第三方插件所定义的插件，可在插件页面中查看。
高阶用法
我们从实际场景出发。
场景一
假设我们要在本地调试，想在 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。
以上仅仅是抛砖引玉，只讲了很少一部分，大家自由发挥想象力吧。
9314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
