🙆♀️
Visual Studio CodeでMarkdownのユーザースニペットを作る
スニペットとは、Visual Studio Code上で特定の文言を入力しようとしているときに出てくる、コードのひとかたまりです。
このスニペット、プロジェクトごとやユーザーごとに、任意のユーザースニペットを作ることができます。
例えば自分が頻繁に使うコードブロックや、プロジェクトで決まったコメント文などを定義しておくと、入力が簡単になって便利です。
そんなスニペットですが、Markdownではデフォルトでユーザースニペット機能がオフになっているので、それをオンにする操作が必要になります。
settings.jsonの設定を行なう
この書き方はVisual Studio Codeのバージョンによって若干異なる（？）ようで、2022/10/14現在のバージョン 1.72.1では、設定に以下のような記述を追加する必要があります。
{
// 中略
"[markdown]": {
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": true
},
},
// 後略
}
今回の場合はプロジェクトに設定をする必要があったため、プロジェクトルートの.vscodeフォルダ配下のsettings.jsonに、上記設定を追記（無い場合はファイルを作成）します。
ユーザースニペットを作成する
また、Visual Studio Codeには言語ごとにスニペットファイルを作る方法と、**(好きな名前).code-snippetsというファイルを作り様々な言語のユーザースニペットを作る方法の二種類あるようですが、プロジェクトごとのユーザースニペットでは後者しか使えないようですので、.vscodeフォルダ配下に**.code-snippetsを作ります。
今回はsnippet.code-snippetsという名前にしました。
snippet.code-snippets
{
"name": { // スニペットの名前。日本語OK
"scope": "markdown", // スニペットを使うファイルタイプ
"prefix": "figure", // スニペットの短縮名。キーボード入力するのはこの文言
"body": [
"value", // スニペットを展開すると入力される文字列。複数行になる場合は一個ずつ要素を分けて書く
"value line 2",
// ・・・
],
"description": "description" // 説明文。省略可能。
},
なお、ファイル＞ユーザー設定＞ユーザースニペットの構成からこのファイルを生成することもできます。
Discussion