虽然一直都是介绍使用图形化的快捷键修改界面,但是 VS Code 快捷键修改,在最开始的时候,跟编辑器设置界面是一样的,也是基于文本编辑器的。你可以在快捷键界面的搜索框下,看到一行提示“高级自定义请打开和编辑器 keybindings.json”。你不妨点击这个链接,效果如下图:
setting-13.png
快捷键绑定文本界面
如果你要搜索某个命令或者快捷键,可以在左侧编辑器唤出搜索框;而添加快捷键,则是使用右下角的 “定义按键绑定” 按钮。
你是不是会觉得,虽然我们更好地理解了快捷键设置都是绑定在 keybindings.json 这个文件里的,格式也是 JSON,但是好像这个文本编辑器完全比不上图形化的界面啊?
别着急,下一篇就要聊一聊今天文章里技术含量最高的知识点了。
快捷键绑定图形界面
VSCode 图形界面绑定快捷键,我们再来说说快捷键绑定,之前介绍了如何使用快捷键界面去搜索和修改界面——在命令面板里“打开键盘快捷方式”(Open Keyboard Shortcuts)并执行。
setting-9.png
修改某个命令的快捷键也很简单,搜索并找到命令后,双击命令项就可以对快捷键进行修改了。
不过,这里我要介绍一个 VS Code 新增的功能(注意你需要更新到最新版本的 VS Code)。我们有的时候发现某个快捷键执行的命令不是我们想要的,这说明可能某个插件或者我们自己的配置有问题。要想看看某个快捷键究竟绑定在哪个命令上,我们可以在快捷键界面的搜索框里输入这个快捷键对应的字符。比如我可以在搜索框里输入 cmd+s 来看看它是不是绑定到了文本保存这个命令上。
不过要手动输入 cmd+s 还是很麻烦的,更不要说如果我们要输入的是 cmd+option+shift+s 之类的复杂快捷键了。在最新版本里,这个搜索框的最右侧,多出一个小按钮。
setting-11.png
这个按钮的作用是键盘录制。如果我们点击这个按钮,激活键盘录制模式,此时,当我们在这个搜索框里按下键盘,键盘按钮所对应的快捷键文本就会被输入到搜索框中。所以有了这个按钮,即便搜索再复杂的快捷键,也不怕麻烦了。(第二个按钮则是对结果进行排序,老版本也有。)
快捷键高级定制
VSCode 快捷键高级定制,点击了 “定义按键绑定” 的蓝色按钮的话,你会看到右侧的文本编辑器中,插入了一段文本。
这段插入的文本,是一个代码片段
{
"key": "cmd+enter",
"command": "command",
"when": "editorTextFocus"
}
JSON
Command
这段代码片段,有两个 Tab Stop。第一个 Tab Stop 停留在 ”command” 这个属性的值中,它的意思是,我们想要为哪个命令指定特殊的快捷键。这个 command 在左侧的编辑器中也可以查询得到。
When
而第二个 Tab Stop,则是在 “when” 这个属性的值中。这个 “when” 是什么意思呢?顾名思义,它说的是在什么情况下这个快捷键绑定能够生效。此时 “when” 的值已经有一个占位符 (placeholder)了,叫做“editorTextFocus”,它代表着光标聚焦在代码编辑器的文本上。如果光标在编辑器的文本上时,那么 “editorTextFocus” 就是 true,那么这个“when”的条件就生效了,这则快捷键绑定就会生效。而假如光标处在集成终端里,此时 “editorTextFocus”就是 false 了,这个 “when” 就不生效了,同样也就不会绑定这个快捷键了。
在 “when” 条件里,除了editorTextFocus外,我们还有非常多的值可以使用,并且加以组合。比如集成终端对应的是 terminalFocus,资源管理器对应的是 filesExplorerFocus 。除此之外,你也可以利用VS Code的文档去查询全部可以使用的值。
而在书写 “when” 条件时,VS Code 还支持几个基础的操作符。这样我们就能够书写相对复杂的条件语句了。
!editorFocus
,使用 !进行取反。
- `==` 等于。when 条件值除了是 boolean 以外,也可以是字符串。比如 resourceExtname 对应的是打开的文件的后缀名,如果我们想给 js 文件绑定一个快捷键,我们可以用 `resourceExtname == .js`。
- `&&` And 操作符。我们可以将多个条件值组合使用,比如我希望当光标在编辑器里且编辑器里正在编辑的是 js 文件,那么我可以用 `editorFocus && resourceExtname == .js`。
- `=~` 正则表达式。还是使用上面的例子,如果我要检测文件后缀是不是 js,我也可以写成 `resourceExtname =~ /js/`,通过正则表达式来进行判断。
你可以试着从简单的`&&`和`==`等操作符开始,然后再使用正则表达式,进行更复杂的条件判断。
### Key
我们回过头来再看下这段快捷键绑定的代码:
{"key": "cmd+enter","command": "command","when": "editorTextFocus"}
JSON
在这个 JSON 对象里第一个键是 key,也就是你将要使用的快捷键。如果你是使用“定义按键绑定”按钮来生成的,那么 VS Code 会根据你的键盘布局来自动生成这个文本。你当然也可以自行修改,不过我不建议这么做,因为 VS Code 为了适应各种不同的键盘布局,在 key 这个值上还是有很多特殊要求的。
比如说,你想给某个快捷键绑定上`cmd+\`这个键,VS Code 会自动为你输入 `cmd+[Backslash]`。因为不同键盘上的 `\` 键的布局可能会不同,VS Code 使用统一的 `[Backslash]`来进行指代。你当然也可以输入 `cmd+\`(请注意,这里我使用了两个 \,因为我们在 JSON 里需要进行转义 escape),但是如果你把 `keybindings.json` 分享给其他人的话,是不一定能够保证生效的。
如果你对如何手动输入 key 很感兴趣,可以参考[VS Code 中相关的文档](https://code.visualstudio.com/docs/getstarted/keybindings#_keyboard-layouts),该文档里介绍了 VS Code 针对不同键盘布局 (keyboard layout)所做的特殊处理。
## VSCode 快捷键高级定制 – 删除快捷键
我们在快捷键的图形界面里也介绍过,可以使用上下文菜单删除某个快捷键绑定。不过,删除操作在 `keybindings.json` 里是如何体现的呢?其实非常简单,假如说我们不想使用 `cmd+s` 来保存文本,首先我们找到 `cmd+s` 对应的快捷键绑定设置
{"key": "cmd+s","command": "workbench.action.files.save"}
然后我们只需在右侧的 keybinding.json 里,添加一条新的快捷键绑定,如下:
{"key": "cmd+s","command": "-workbench.action.files.save"}
JSON
在这条新的快捷键绑定里,“command” 的值在开头添加了一个 – 减号。这个减号就告诉 VS Code 我们希望给这个命令解除快捷键绑定。
对了,在解绑快捷键时,我们也可以使用 “when” 条件。这样的话,我们就能够做到只在特定情况下解除某个快捷键的绑定。
## 工作区常用快捷键汇总
**工作区常用快捷键汇总**,关于工作区的常用的快捷键了(可参考下面的汇总表),通过它们我们能够更好地管理我们的工作台界面,以满足我们不同工作场景下的需求,从而也让 “工作台” 这个名字,更名副其实。
![editor-26.png][5]
如果你想搜索某个组件相关的命令,你可以打开命令面板,搜索名字,然后就能够看到跟这个组件相关的命令了。
![](http://img.javatiku.cn/javatuku/editor-27.gif)