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 キーでテンプレートを挿入できるようになりました。

参考記事

qiita.com