owned this note
owned this note
Published
Linked with GitHub
VS Code - Macros巨集套件教學
===
這份文件會告訴你如何在VS Code中使用Macros,首先你要先安裝[Macros套件](https://marketplace.visualstudio.com/items?itemName=geddski.macros),然後設定2~3個json檔即能使用Macros。
* 參考資料:[macros on github](https://github.com/geddski/macros)
## 設定 `settings.json`
```json=
{
"macros": {
"makeAction": [
"editor.action.addSelectionToNextFindMatch",
"editor.action.clipboardCopyAction",
"cursorEnd",
{
"command": "type",
"args": {
"text": ":wrapper.instance()."
}
},
"editor.action.clipboardPasteAction",
{
"command": "type",
"args": {
"text": ","
}
}
],
"makeFunctionTest": [
"editor.action.addSelectionToNextFindMatch",
{
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"name": "functionName2testCase"
}
}
]
}
}
```
安裝完macros套件後,就能在`setting.json`中加入macros這個屬性,這次實作了makeAction與makeFunctionTest兩個macros command。
### makeAction
makeAction功用:將任意一個單字`word`變成`word: wrapper.instance().word,`
* `editor.action.addSelectionToNextFindMatch`:選取離游標最近的一個單字,預設快捷鍵是command+D
* `editor.action.clipboardCopyAction`:複製
* `cursorEnd`:將游標移至行末,也就是最右邊
* `type`:輸入文字,輸入的內容填在`args`中的`text`
* `editor.action.clipboardPasteAction`:貼上,也就是貼上剛剛複製的內容
* 最後用剛剛學到的`type`補上一個逗號
### makeFunctionTest
makeFunctionTest功用:將任意一個單字`word`變成下方程式碼
```javascript=
it('word()', () => {
const { actions } = setup();
// if you want to mock word(), then use actions.mock('word');
//actions.word();
// TODO: check the result correct or not
});
```
* `editor.action.addSelectionToNextFindMatch`:選取離游標最近的一個單字,預設快捷鍵是command+D
* `editor.action.insertSnippet`:插入程式碼片段(Snippet),在本次範例中我使用自己撰寫的snippet`functionName2testCase
`,請參考下方的`javascript.json`
## 鍵盤快速鍵 `keybindings.json`
```json=
[
{
"key": "ctrl+a",
"command": "macros.makeAction"
},
{
"key": "ctrl+s",
"command": "macros.makeFunctionTest",
}
]
```
把剛剛在`setting.json`中設定好的macros command配上對應的快捷鍵。
## 使用者程式碼片段 `javascript.json`
```json=
{
"functionName2testCase": {
"prefix": "f2t",
"body": [
"it('$TM_SELECTED_TEXT($0)', () => {",
" const { actions } = setup();",
" // if you want to mock $TM_SELECTED_TEXT($0), then use actions.mock('$TM_SELECTED_TEXT');",
" // actions.$TM_SELECTED_TEXT($0);",
" // TODO: check the result correct or not",
"});"
],
"description": "description of functionName2testCase"
}
}
```
如果還沒使用過自訂snippet功能的可以看[這邊](https://softnshare.wordpress.com/2017/09/16/snippet-generator/)。
剛剛使用`editor.action.insertSnippet`要插入的snippet如上,body就是實際會被插入的程式碼,其中要注意的是`$TM_SELECTED_TEXT`與`$0`。
* `$TM_SELECTED_TEXT`:這是一個保留字,代表正被游標選取的文字,假如說我剛剛選取了一段程式片段`word`,接著插入snippet,此時的`$TM_SELECTED_TEXT`就是`word`
* `$0`:在插入sinppet後,游標會停留在`$0`的位置,如果有多個`$0`,就會有多個游標,可以讓你輸入客製化的內容,除了`$0`之外還有`$1`,`$2`,`$3`以此類推,輸入完`$0`後就會跳到`$1`讓你繼續輸入。
---
## 補充
為了讓console.log()更加方便使用,我製作了speedConsoleLog,將任意一個單字`word`變成下方程式碼
```javascript=
console.log('word');
console.log(word);
```
settings.json
```json=
{
"macros":
"speedConsoleLog": [
"editor.action.copyLinesUpAction",
"cursorHome",
{
"command": "type",
"args": {
"text": "console.log('"
}
},
"cursorEnd",
{
"command": "type",
"args": {
"text": "');"
}
},
"cursorDown",
"cursorHome",
{
"command": "type",
"args": {
"text": "console.log("
}
},
"cursorEnd",
{
"command": "type",
"args": {
"text": ");"
}
},
]
}
```