vscodeでMarkdownのスニペット登録でハマった

５年程前に構築したvscode使っていたのだが、ある理由より今年から新しい環境でvscodeを使用することになりました。
以前の環境ではMarkdown記述時はスニペットを使用していたので、新しい環境でもスニペット使えるようにしようとしたのですが、やり方を忘れて（というか2023年3月現在でやり方が変わった？）ハマったので、またハマらないように備忘録しときます。

結論

スニペットを登録するためには、以下の２つの設定をする必要があります。

1. 基本設定を変更してユーザースニペットを有効にする
2. ユーザスニペットの登録

特に１つ目がハマりました。ググって上位に出てくる情報にこれが書かれていなかったりします。

以下、方法を述べます。

基本設定を変更してユーザースニペットを有効にする

1. vscodeにて、Ctrl+Shift+P を押して画面中央上側にコマンド入力の領域を表示させる
2. settings.json と入力し、以下のように「ユーザー設定を開く」を選択
   • 
3. 下記の記載を追加し、保存する
   • もし既に [markdown] が定義されていたら、json記法に従い、既存の markdown ブロックの中に記載します。

"[markdown]" : {
    "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
    },
},

ユーザースニペットの登録方法

1. vscode 上部メニューより、「ファイル」-「ユーザー設定」-「ユーザースニペットの構成」を選択
   • 
2. 画面中央上部に入力するようになるので、markdown と入力し、markdown.json を選択
   • 
3. 下記のように markdown.json が開くので、ここにスニペット内容を記載
   • 

スニペットの記載ルールは、下記が参考になります。

VS Codeのユーザースニペット機能の使い方メモ - Qiita

スニペットとはスニペットは定形のテキストをあらかじめ登録しておいてそれを…

qiita.com

なお、自分はこんな感じです。

{
    "赤文字": {
        "prefix": "red",
        "body": "<font color=\"red\">$1</font>",
        "description": "text font red"
    },
    "文字に任意の色付け": {
        "prefix": "color",
        "body": "<font color=\"$1\">$2</font>",
        "description": "text font color"
    },
    "テーブル": {
        "prefix": "table",
        "body": [
            "<table>",
            "  <colgroup>",
            "    <col width=\"20%\">",
            "    <col width=\"80%\">",
            "  </colgroup>",
            "  <tr>",
            "    <th></th>",
            "    <th></th>",
            "  </tr>",
            "  <tr>",
            "    <td></td>",
            "    <td></td>",
            "  </tr>",
            "</table>",
        ],
        "description": "table"
    },
    "画像":{
        "prefix": "img",
        "body": "<img src=\"${1:./images/}\" width=\"${2:800}\">",
        "description": "image"
    }
}