🙆‍♀️

Visual Studio CodeでMarkdownのユーザースニペットを作る

2022/10/14に公開約1,600字

スニペットとは、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

ログインするとコメントできます