# 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
能使用的起始鍵有其限制，詳列如下：
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
### 開始自定義設定
先打開 json 格式的自定義區
> ctrl+shift+p > preferences > keybindings.json
然後可能會看到一片空白
先加個可以 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 轉換後即消失
>
> 變數重命名時的好物，讓你不會漏掉還沒更名的舊變數
**參考設定：**
```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** 的預先設定可以事半功倍，減少那些被偷走的時光
### 進入點
### 決定 snippets 相依於哪一種 lang
### 開始編輯
但是預先設定的東西也是 json 類的東西，要手打也很麻煩，懶還要更懶，來個產生器！
**Snippet 產生器**： [請點我](https://snippet-generator.app/)
詳細介紹請參考： [VS Code 中自訂程式碼片段的功能](https://pjchender.blogspot.com/2017/04/vs-code-snippet.html)
## 結語
看完這篇的你，應該已經知道如何去設定 keybindings, snippets，
搭配 VS Code 之擴充功能並相結合，並將重複或複雜的操作寫成 multi-commmand，不再浪費時間，同時，在現場 demo 時可以很~~帥~~。
以上參考設定之內容，皆可依個人喜好做更改。
Sign in with Wallet
Connect another wallet