vscode 快捷鍵設置

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

setting-13.png

快捷鍵綁定文本界面

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

你是不是會覺得，雖然我們更好地理解了快捷鍵設置都是綁定在 keybindings.json 這個文件里的，格式也是 JSON，但是好像這個文本編輯器完全比不上圖形化的界面?。?/p>

別著急，下一篇就要聊一聊今天文章里技術含量最高的知識點了。

快捷鍵綁定圖形界面

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

setting-9.png

修改某個命令的快捷鍵也很簡單，搜索并找到命令后，雙擊命令項就可以對快捷鍵進行修改了。

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

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

setting-11.png

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

快捷鍵高級定制

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

setting-15.png

這段插入的文本，是一個代碼片段

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

JSON

Command

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

When

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

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

而在書寫 “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 會根據(jù)你的鍵盤布局來自動生成這個文本。你當然也可以自行修改，不過我不建議這么做，因為 VS Code 為了適應各種不同的鍵盤布局，在 key 這個值上還是有很多特殊要求的。

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

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

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

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

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

JSON

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

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

JSON

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

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

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

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

![editor-26.png][5]

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

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