vscode 快捷鍵設(shè)置

雖然一直都是介紹使用圖形化的快捷鍵修改界面，但是 VS Code 快捷鍵修改，在最開始的時(shí)候，跟編輯器設(shè)置界面是一樣的，也是基于文本編輯器的。你可以在快捷鍵界面的搜索框下，看到一行提示“高級自定義請打開和編輯器 keybindings.json”。你不妨點(diǎn)擊這個(gè)鏈接，效果如下圖：

setting-13.png

快捷鍵綁定文本界面

如果你要搜索某個(gè)命令或者快捷鍵，可以在左側(cè)編輯器喚出搜索框；而添加快捷鍵，則是使用右下角的 “定義按鍵綁定” 按鈕。

你是不是會(huì)覺得，雖然我們更好地理解了快捷鍵設(shè)置都是綁定在 keybindings.json 這個(gè)文件里的，格式也是 JSON，但是好像這個(gè)文本編輯器完全比不上圖形化的界面啊？

別著急，下一篇就要聊一聊今天文章里技術(shù)含量最高的知識點(diǎn)了。

快捷鍵綁定圖形界面

VSCode 圖形界面綁定快捷鍵，我們再來說說快捷鍵綁定，之前介紹了如何使用快捷鍵界面去搜索和修改界面——在命令面板里“打開鍵盤快捷方式”（Open Keyboard Shortcuts）并執(zhí)行。

setting-9.png

修改某個(gè)命令的快捷鍵也很簡單，搜索并找到命令后，雙擊命令項(xiàng)就可以對快捷鍵進(jìn)行修改了。

不過，這里我要介紹一個(gè) VS Code 新增的功能（注意你需要更新到最新版本的 VS Code）。我們有的時(shí)候發(fā)現(xiàn)某個(gè)快捷鍵執(zhí)行的命令不是我們想要的，這說明可能某個(gè)插件或者我們自己的配置有問題。要想看看某個(gè)快捷鍵究竟綁定在哪個(gè)命令上，我們可以在快捷鍵界面的搜索框里輸入這個(gè)快捷鍵對應(yīng)的字符。比如我可以在搜索框里輸入 cmd+s 來看看它是不是綁定到了文本保存這個(gè)命令上。

不過要手動(dòng)輸入 cmd+s 還是很麻煩的，更不要說如果我們要輸入的是 cmd+option+shift+s 之類的復(fù)雜快捷鍵了。在最新版本里，這個(gè)搜索框的最右側(cè)，多出一個(gè)小按鈕。

setting-11.png

這個(gè)按鈕的作用是鍵盤錄制。如果我們點(diǎn)擊這個(gè)按鈕，激活鍵盤錄制模式，此時(shí)，當(dāng)我們在這個(gè)搜索框里按下鍵盤，鍵盤按鈕所對應(yīng)的快捷鍵文本就會(huì)被輸入到搜索框中。所以有了這個(gè)按鈕，即便搜索再復(fù)雜的快捷鍵，也不怕麻煩了。（第二個(gè)按鈕則是對結(jié)果進(jìn)行排序，老版本也有。）

快捷鍵高級定制

VSCode 快捷鍵高級定制，點(diǎn)擊了 “定義按鍵綁定” 的藍(lán)色按鈕的話，你會(huì)看到右側(cè)的文本編輯器中，插入了一段文本。

setting-15.png

這段插入的文本，是一個(gè)代碼片段

{
  "key": "cmd+enter",
  "command": "command",
  "when": "editorTextFocus"
}

JSON

Command

這段代碼片段，有兩個(gè) Tab Stop。第一個(gè) Tab Stop 停留在 ”command” 這個(gè)屬性的值中，它的意思是，我們想要為哪個(gè)命令指定特殊的快捷鍵。這個(gè) command 在左側(cè)的編輯器中也可以查詢得到。

When

而第二個(gè) Tab Stop，則是在 “when” 這個(gè)屬性的值中。這個(gè) “when” 是什么意思呢？顧名思義，它說的是在什么情況下這個(gè)快捷鍵綁定能夠生效。此時(shí) “when” 的值已經(jīng)有一個(gè)占位符 （placeholder）了，叫做“editorTextFocus”，它代表著光標(biāo)聚焦在代碼編輯器的文本上。如果光標(biāo)在編輯器的文本上時(shí)，那么 “editorTextFocus” 就是 true，那么這個(gè)“when”的條件就生效了，這則快捷鍵綁定就會(huì)生效。而假如光標(biāo)處在集成終端里，此時(shí) “editorTextFocus”就是 false 了，這個(gè) “when” 就不生效了，同樣也就不會(huì)綁定這個(gè)快捷鍵了。

在 “when” 條件里，除了editorTextFocus外，我們還有非常多的值可以使用，并且加以組合。比如集成終端對應(yīng)的是 terminalFocus，資源管理器對應(yīng)的是 filesExplorerFocus 。除此之外，你也可以利用VS Code的文檔去查詢?nèi)靠梢允褂玫闹?/a>。

而在書寫 “when” 條件時(shí)，VS Code 還支持幾個(gè)基礎(chǔ)的操作符。這樣我們就能夠書寫相對復(fù)雜的條件語句了。

• !取反。比如我們希望當(dāng)光標(biāo)不在編輯器里時(shí)，綁定一個(gè)快捷鍵，那么我們可以使用

!editorFocus

，使用 ！進(jìn)行取反。

- `==` 等于。when 條件值除了是 boolean 以外，也可以是字符串。比如 resourceExtname 對應(yīng)的是打開的文件的后綴名，如果我們想給 js 文件綁定一個(gè)快捷鍵，我們可以用 `resourceExtname == .js`。

- `&&` And 操作符。我們可以將多個(gè)條件值組合使用，比如我希望當(dāng)光標(biāo)在編輯器里且編輯器里正在編輯的是 js 文件，那么我可以用 `editorFocus && resourceExtname == .js`。

- `=~` 正則表達(dá)式。還是使用上面的例子，如果我要檢測文件后綴是不是 js，我也可以寫成 `resourceExtname =~ /js/`，通過正則表達(dá)式來進(jìn)行判斷。

你可以試著從簡單的`&&`和`==`等操作符開始，然后再使用正則表達(dá)式，進(jìn)行更復(fù)雜的條件判斷。

### Key

我們回過頭來再看下這段快捷鍵綁定的代碼：

{"key": "cmd+enter","command": "command","when": "editorTextFocus"}

JSON

在這個(gè) JSON 對象里第一個(gè)鍵是 key，也就是你將要使用的快捷鍵。如果你是使用“定義按鍵綁定”按鈕來生成的，那么 VS Code 會(huì)根據(jù)你的鍵盤布局來自動(dòng)生成這個(gè)文本。你當(dāng)然也可以自行修改，不過我不建議這么做，因?yàn)?VS Code 為了適應(yīng)各種不同的鍵盤布局，在 key 這個(gè)值上還是有很多特殊要求的。

比如說，你想給某個(gè)快捷鍵綁定上`cmd+\`這個(gè)鍵，VS Code 會(huì)自動(dòng)為你輸入 `cmd+[Backslash]`。因?yàn)椴煌I盤上的 `\` 鍵的布局可能會(huì)不同，VS Code 使用統(tǒng)一的 `[Backslash]`來進(jìn)行指代。你當(dāng)然也可以輸入 `cmd+\`（請注意，這里我使用了兩個(gè) \，因?yàn)槲覀冊?JSON 里需要進(jìn)行轉(zhuǎn)義 escape），但是如果你把 `keybindings.json` 分享給其他人的話，是不一定能夠保證生效的。

如果你對如何手動(dòng)輸入 key 很感興趣，可以參考[VS Code 中相關(guān)的文檔](https://code.visualstudio.com/docs/getstarted/keybindings#_keyboard-layouts)，該文檔里介紹了 VS Code 針對不同鍵盤布局 （keyboard layout）所做的特殊處理。

## VSCode 快捷鍵高級定制 – 刪除快捷鍵

我們在快捷鍵的圖形界面里也介紹過，可以使用上下文菜單刪除某個(gè)快捷鍵綁定。不過，刪除操作在 `keybindings.json` 里是如何體現(xiàn)的呢？其實(shí)非常簡單，假如說我們不想使用 `cmd+s` 來保存文本，首先我們找到 `cmd+s` 對應(yīng)的快捷鍵綁定設(shè)置

{"key": "cmd+s","command": "workbench.action.files.save"}

JSON

然后我們只需在右側(cè)的 keybinding.json 里，添加一條新的快捷鍵綁定，如下：

{"key": "cmd+s","command": "-workbench.action.files.save"}

JSON

在這條新的快捷鍵綁定里，“command” 的值在開頭添加了一個(gè) – 減號。這個(gè)減號就告訴 VS Code 我們希望給這個(gè)命令解除快捷鍵綁定。

對了，在解綁快捷鍵時(shí)，我們也可以使用 “when” 條件。這樣的話，我們就能夠做到只在特定情況下解除某個(gè)快捷鍵的綁定。

## 工作區(qū)常用快捷鍵匯總

**工作區(qū)常用快捷鍵匯總**，關(guān)于工作區(qū)的常用的快捷鍵了（可參考下面的匯總表），通過它們我們能夠更好地管理我們的工作臺(tái)界面，以滿足我們不同工作場景下的需求，從而也讓 “工作臺(tái)” 這個(gè)名字，更名副其實(shí)。

![editor-26.png][5]

如果你想搜索某個(gè)組件相關(guān)的命令，你可以打開命令面板，搜索名字，然后就能夠看到跟這個(gè)組件相關(guān)的命令了。

![](http://img.javatiku.cn/javatuku/editor-27.gif)