[开发工具]聊聊vscode几个常用的自定义快捷键（shortcut/keybindings）

前言

有关 vscode 的话题一般都会很冗长，因为涉及的内容比较多，且配置千人千面。

这一次聊的主要是 vscode 的几个自定义快捷键，什么是 “自定义” ？就是不在默认 vscode 预设内的。

之前我也有幸见到过：全触控板 + vscode 全默认预设的开发者，所有操作全部使用快捷键，所以这是一个千人千面的事情。

正文

快开终端

假如我们打开了某个文件，想在该文件的目录下快速打开一个终端该怎么做？配置的角度有两个解法：

1. 一个是早期到现在一直通用的 code runner 解法，可参见：

   《 vscode 快捷键快速打开终端到当前目录打开的文件位置 》

2. 一个是 vscode 后期迭代默认支持配置终端打开到当前目录的行为

这里我比较推荐第一种，因为后者有一些缺陷，搭配快捷键不如第一种顺畅。

快捷键配置

// keybindings.json
[
  // 用 code runner 打开终端
  {
    "key": "ctrl+`",
    "command": "openInTerminal"
  },
  // 取消原来的快捷键
  {
    "key": "ctrl+`",
    "command": "-workbench.action.terminal.toggleTerminal",
    "when": "terminal.active"
  },
]

注意，使用 code runner 作为终端，不光要配置打开到当前 cwd 的选项，还要通过改快捷键默认打开 code runner ，却其一不可，详见上文中的 第一种 解法后的文章。

另一种解法

随着手指的变懒，现在也不再喜欢去按 ctrl + ` 了，直接右键对应的文件夹，打开终端到此文件夹也是很快的一种解法：

快删代码

这里要解的问题是默认删除一行的快捷键是 cmd + shift + k ，由于 k 的位置在右手位，不能单手完成，所以这里把 k 切到 d ，也符合 Delete (d) 的语义。

快捷键配置

// keybindings.json
[
  // 使用 cmd + shift + d 来删除一行
  {
    "key": "shift+cmd+d",
    "command": "editor.action.deleteLines",
    "when": "textInputFocus && !editorReadonly"
  },
  // 去除原来 cmd + shift + k 删除一行的快捷键
  {
    "key": "shift+cmd+k",
    "command": "-editor.action.deleteLines",
    "when": "textInputFocus && !editorReadonly"
  },
  // 去除原来 cmd + shift + d 的键位
  {
    "key": "shift+cmd+d",
    "command": "-workbench.view.debug",
    "when": "viewContainer.workbench.view.debug.enabled"
  },
  // ...你可能还要去除一些拓展的快捷键占用
]

这里损的是打开 debug 面板的快捷键，大部分情况我们不需要 debug 面板，所以这里弃掉合理。

恢复关闭窗口

默认 vscode 的恢复上次关闭窗口快捷键和 chrome 保持一致，是 cmd + shift + t ，一个问题是 t 被 Translate 类拓展使用的比较多，会冲突，所以我们切到 ctrl + cmd + d 。

关于 cmd + shift + t 占位，这里会有一个深入的思考：

1. 首先翻译类插件我们不可能不使用，背景是：

   《 vscode 翻译插件最佳搭配、翻译变量、划词翻译、中译英（提高生产效率）》

2. var-translation 的中文快转嘤文，很方便变量命名，这里要保留（extension.varTranslation），他的占位是 cmd + shift + t 。

3. Google Translate 的 extension.translate 不重要，不是重点功能，所以弃掉，他的占位也是 cmd + shift + t 。

最终我们的配置如下。

快捷键配置

// keybindings.json
[
  // 打开上次关闭的窗口
  {
    "key": "ctrl+cmd+t",
    "command": "workbench.action.reopenClosedEditor"
  },
  // 去掉原来 '打开上次关闭窗口' 的快捷键位
  {
    "key": "shift+cmd+t",
    "command": "-workbench.action.reopenClosedEditor"
  },
  // 弃掉 Google Translate 插件的占位冲突
  {
    "key": "ctrl+shift+t",
    "command": "-extension.translate"
  },
]

在这个过程我们是 workaround 。

快跳编辑位置

大多数情况下，我们需要 追溯源码 或 追踪调用关系，所以需要在 上次 / 下次 编辑焦点处快速来回跳。

这里我们优化下：

使用 cmd 搭配方向键快跳明显更舒服符合人性。

快捷键配置

// keybindings.json
[
  // 新前跳
  {
    "key": "cmd+left",
    "command": "workbench.action.navigateBack"
  },
  // 去除 原前跳 快捷键位
  {
    "key": "ctrl+-",
    "command": "-workbench.action.navigateBack"
  },
  // 新后跳
  {
    "key": "cmd+right",
    "command": "workbench.action.navigateForward"
  },
  // 去除 原后跳 快捷键位
  {
    "key": "ctrl+shift+-",
    "command": "-workbench.action.navigateForward"
  },
]

格式化文档

这个键位默认是 option + shift + f ，由于快删是 cmd + shift + d ，翻译是 cmd + shift + t ，我们更偏向把格式化也放到 cmd 上做成 cmd + shift + f 。

快捷键配置

这一段代码会比较长，因为调一个快捷键需要有 删 和 增 两个配置对象，另外格式化文档有：editor.action.formatDocument 和 editor.action.formatDocument.none 两个 command 。

加上要去掉原来 cmd + shift + f 的占位冲突，所以一共有 7 个配置对象才能实现 😅

配置如下：

// keybindings.json
[
  {
    "key": "shift+cmd+f",
    "command": "editor.action.formatDocument",
    "when": "editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly && !inCompositeEditor"
  },
  {
    "key": "shift+alt+f",
    "command": "-editor.action.formatDocument",
    "when": "editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly && !inCompositeEditor"
  },
  {
    "key": "shift+cmd+f",
    "command": "editor.action.formatDocument.none",
    "when": "editorTextFocus && !editorHasDocumentFormattingProvider && !editorReadonly"
  },
  {
    "key": "shift+alt+f",
    "command": "-editor.action.formatDocument.none",
    "when": "editorTextFocus && !editorHasDocumentFormattingProvider && !editorReadonly"
  },
  {
    "key": "shift+cmd+f",
    "command": "-workbench.view.search",
    "when": "workbench.view.search.active && neverMatch =~ /doesNotMatch/"
  },
  {
    "key": "shift+cmd+f",
    "command": "-workbench.action.findInFiles"
  },
  {
    "key": "shift+cmd+f",
    "command": "-workbench.action.terminal.searchWorkspace",
    "when": "terminalFocus && terminalProcessSupported && terminalTextSelected"
  },
]

总结

正如本文前言所描述的，vscode 的话题都是需要多方面思考、兼容、并且冗长的。

这里特别需要注意的是，配置完后一定要做 容灾方案 ，如 Settings Sync 插件，vscode 自带 github 账号登录云同步，自助上传 oss 或 gist 等。

单点是不安全的，我在这里也做了配置的多点容灾，确保配置安全性。

另外，也看到一些开发者慢慢走向了 webstorm 的怀抱，也正证实了 vscode 要很费工夫的去大量配置才能玩好，但无论是哪种手法，不断拥抱变化才是高效率编码的真理。