---
# System prepended metadata

title: VS Code - 想加速到更快的世界？快捷功能都放在這裡了！
tags: [DX]

---

# VS Code - 想加速到更快的世界？快捷功能都放在這裡了！
- [快捷鍵設定](#快捷鍵設定)
  * [key](###key)
  * [command](###command)
  * [when](###when)
- [擴充功能與快捷鍵](#擴充功能與快捷鍵)
  * [Text Marker](###Text-Marker)
  * [Partial Diff](###Partial-Diff)
  * [Multi-command](###Multi-command)
- [自訂 snippets](#自訂-snippets)
- [結語](#結語)

--- 
## 快捷鍵設定

先瞧瞧 VS Code 內建的預設快捷設定(片段)

```javascript
// Keybindings that are active when the focus is in the editor
{ "key": "home",            "command": "cursorHome",                  "when": "editorTextFocus" },
{ "key": "shift+home",      "command": "cursorHomeSelect",            "when": "editorTextFocus" },

// Keybindings that are complementary
{ "key": "f5",              "command": "workbench.action.debug.continue", "when": "inDebugMode" },
{ "key": "f5",              "command": "workbench.action.debug.start",    "when": "!inDebugMode" },

// Global keybindings
{ "key": "ctrl+f",          "command": "actions.find" },
{ "key": "alt+left",        "command": "workbench.action.navigateBack" },
{ "key": "alt+right",       "command": "workbench.action.navigateForward" },

// Global keybindings using chords (two separate keypress actions)
{ "key": "ctrl+k enter",    "command": "workbench.action.keepEditor" },
{ "key": "ctrl+k ctrl+w",   "command": "workbench.action.closeAllEditors" },
```

可以發現每一快捷鍵設定格式大約是
```javascript
{
  "key": "shift+home",
  "command": "cursorHomeSelect",
  "when": "editorTextFocus"
}
```

### `key`
快捷鍵按法，可使用雙層 => e.g. ctrl+alt+k ctrl+d
能使用的起始鍵有其限制，詳列如下：


![](https://i.imgur.com/EXf2xOo.png)

p.s. **Cmd** / **Win** / **Meta** 會因應不同 OS 自己轉換
<br>
### `command`
欲執行之 VS Command（使用 Command ID）

#### 如何找 Command ID？

> 預設功能 => VS Code 文件
> 擴充功能 => 擴充功能 文件

**範例:**
1. [Text Marker](https://marketplace.visualstudio.com/items?itemName=ryu1kn.text-marker)
2. [Partial Diff](https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff)
<br>
### `when`
可執行條件，常用的就 editorTextFocus 



### 開始自定義設定
![](https://i.imgur.com/bW4vh0t.png)

先打開 json 格式的自定義區

> ctrl+shift+p > preferences > keybindings.json

然後可能會看到一片空白

![](https://i.imgur.com/HlYb9z6.png)

先加個可以 focus 現在開啟檔案的快捷鍵吧

```javascript=
[
  {
    "key": "shift+alt+l",
    "command": "workbench.files.action.focusFilesExplorer",
    "when": "editorTextFocus"
  }
]
```

---

## 擴充功能與快捷鍵

### [`Text Marker`](https://marketplace.visualstudio.com/items?itemName=ryu1kn.text-marker)

> 幫你把特定字串永久的 highlight，而且支援同時多組，也可自訂 highlight color
> 
> 如果是 VS Code 原生的只能 highlight 一組，且 focus 轉換後即消失
> 
> 變數重命名時的好物，讓你不會漏掉還沒更名的舊變數

![](https://raw.githubusercontent.com/ryu1kn/vscode-text-marker/master/images/animations/public.gif)

**參考設定：**
```javascript
// keybindings.json
[
  // ...other key bindings,
  {
    "key": "f1",
    "command": "textmarker.toggleHighlight",
    "when": "editorTextFocus"
  },
  {
    "key": "shift-f1",
    "command": "textmarker.clearAllHighlight",
    "when": "editorTextFocus"
  }
]

```

**使用：**

*見 demo*

----

### [`Partial Diff`](https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff)

> 可任選兩段文字（或是剪貼簿中的內容）進行 diff compare

**參考設定：**
```javascript
// keybindings.json
[
  // ...other key bindings,
  {
    "key": "ctrl+alt+d 1",
    "command": "extension.partialDiff.markSection1",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+alt+d 2",
    "command": "extension.partialDiff.markSection2AndTakeDiff",
    "when": "editorTextFocus"
  },
]
```

**使用：**

*見 demo*


----

### [`Multi-command`](https://marketplace.visualstudio.com/items?itemName=ryuta46.multi-command)

> 巨集功能，可組合一連串的 command，其設定是在 **settings.json** 而非 keybindings.json
> 
> 欲呼叫巨集的快捷鍵則設定在 keybindings.json
> 原本是用 Macros 這 extension，但是發現他的寫法彈性欠佳，才找到這套類似的

**參考設定：**
```javascript
// settings.json
{
  // ...other settings,
  "multiCommand.commands": {
    "multiCommand.commentDown": {
      "sequence": [
        "editor.action.copyLinesDownAction",
        "cursorUp",
        "editor.action.addCommentLine",
        "cursorDown"
      ],
    },
    .
    .
    .
  }
}

/**
 * 此巨集名為 commentDown
 * 功能為
 *   1. 把所選行複製到下一行
 *   2. 游標回到上一行
 *   3. 註解該行
 *   4. 游標回到下一行（step 1 複製出來的那一行）
 */
```

```javascript
// keybindings.json
[
  // ...other key bindings,
  {
    "key": "ctrl+alt+/",
    "command": "multiCommand.commentDown"
  },
]
```

**使用：**

*詳情見 demo*

----

#### 常用的 macros for console
```json
// settings.json
// $CLIPBOARD: 剪貼簿；$0: 做完指令後的游標位置
{
  // ...other settings,
  "multiCommand.commands": {
    "multiCommand.commentDown": {
      "sequence": [
        "editor.action.copyLinesDownAction",
        "cursorUp",
        "editor.action.addCommentLine",
        "cursorDown"
      ],
    },
    "multiCommand.logWithDescription": {
      "sequence": [
        "editor.action.clipboardCopyAction",
        "editor.action.insertLineAfter",
        {
          "command": "editor.action.insertSnippet",
          "when": "editorTextFocus",
          "args": {
            "snippet": "console.log('$CLIPBOARD: ', $CLIPBOARD)$0"
          }
        }
      ],
    },
    "multiCommand.logWithDescriptionNoCopy": {
      "sequence": [
        "editor.action.insertLineAfter",
        {
          "command": "editor.action.insertSnippet",
          "when": "editorTextFocus",
          "args": {
            "snippet": "console.log('$CLIPBOARD: ', $CLIPBOARD)$0"
          }
        }
      ],
    },
    "multiCommand.logWithoutDescription": {
      "sequence": [
        "editor.action.clipboardCopyAction",
        "editor.action.insertLineAfter",
        {
          "command": "editor.action.insertSnippet",
          "when": "editorTextFocus",
          "args": {
            "snippet": "console.log($CLIPBOARD)$0"
          }
        }
      ],
    },
    "multiCommand.logDir": {
      "sequence": [
        "editor.action.clipboardCopyAction",
        "editor.action.insertLineAfter",
        {
          "command": "editor.action.insertSnippet",
          "when": "editorTextFocus",
          "args": {
            "snippet": "console.dir($CLIPBOARD)$0"
          }
        }
      ],
    },
    "multiCommand.fastDestruct": {
      "sequence": [
        "editor.action.clipboardCopyAction",
        {
          "command": "editor.action.insertSnippet",
          "args": {
            "snippet": "const { $0 } = $CLIPBOARD"
          }
        },
        "editor.action.triggerSuggest"
      ]
    },
  }
}
```

```javascript
// keybindings.json
[
  // ...other key bindings,
  {
    "key": "ctrl+alt+c c",
    "command": "multiCommand.logWithDescription"
  },
  {
    "key": "ctrl+alt+c w",
    "command": "multiCommand.logWithoutDescription"
  },
  {
    "key": "ctrl+alt+c r",
    "command": "multiCommand.logDir"
  }
]
```

---

## 自訂 snippets

*Code Snippets*，意即程式碼片段，
我們可能每天都會重複打一段重複的 code，看著 eslint, precommit 報重複的錯，
然後進行重複地除錯，那不是我們想要的。
透過 **insert snippets** 的預先設定可以事半功倍，減少那些被偷走的時光

### 進入點
![](https://i.imgur.com/MV8wGXL.png)

### 決定 snippets 相依於哪一種 lang
![](https://i.imgur.com/uBfUloU.png)

### 開始編輯
![](https://i.imgur.com/PCTKOOZ.png)



但是預先設定的東西也是 json 類的東西，要手打也很麻煩，懶還要更懶，來個產生器！

**Snippet 產生器**： [請點我](https://snippet-generator.app/)

詳細介紹請參考： [VS Code 中自訂程式碼片段的功能](https://pjchender.blogspot.com/2017/04/vs-code-snippet.html)


## 結語

![image](https://hackmd.io/_uploads/HJgJoFSpT.png)
![image](https://truth.bahamut.com.tw/s01/202402/forum/75218/b0316f7219f06c78e2cd4375f03f026a.JPG)



看完這篇的你，應該已經知道如何去設定 keybindings, snippets，
搭配 VS Code 之擴充功能並相結合，並將重複或複雜的操作寫成 multi-commmand，不再浪費時間，同時，在現場 demo 時可以很~~帥~~。

以上參考設定之內容，皆可依個人喜好做更改。