Visual Studio Code で markdown のスニペットを登録する
移転しました。
Visual Studio Code で markdown を使用して plantuml を書くことが多いのですが、
```plantuml
@startuml
skinparam backgroundColor #FEFEFE
~
@enduml
```
というようなのを毎回手入力するのが面倒です。
何かいい方法はないかなぁと思ってたら、スニペットを使用したら解決することがわかったので、その備忘録です。
Visual Studio Code に markdown のスニペットを登録する
スニペット利用準備
私の環境では、デフォルトで markdown のスニペットが無効になっていたので、有効にします。
基本設定を開き、以下の項目をユーザー設定に追加します。
"[markdown]": { "editor.wordWrap": "on", "editor.quickSuggestions": true, "editor.snippetSuggestions": "top" }
スニペットの登録
上記のように、ユーザースニペットを選択します。
markdown
と入力します。
すると、 markdown.json
が開きます。
デフォルトでは以下のような内容になっていました。
{ // Place your snippets for markdown here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are: // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the // same ids are connected. // Example: // "Print to console": { // "prefix": "log", // "body": [ // "console.log('$1');", // "$2" // ], // "description": "Log output to console" // } }
これを、以下のように変更します。
{ "Plantuml": { "prefix": "plantuml", "body": [ "```plantuml", "@startuml", "skinparam backgroundColor #FEFEFE", "skinparam componentBorderColor #000000", "hide footbox", "", "@enduml", "```", ], "description": "Using PlantUML" } }
これで、markdown 編集中に p と打てば、スニペット候補が表示されるようになり、tab キーでテンプレートを挿入できるようになりました。