QiitaのスラッシュコマンドをVSCode上でも再現する

概要

10/18の更新において、Qiitaのmarkdownエディタ上で、スラッシュコマンド (スニペット) がサポートされました。

下記のように、いくつかの便利なスニペットが追加され、特にdetailsについては毎回コピペしていた私は感動しています。

機能	説明
Code block	コードブロックを挿入します
Alert	警告の補足説明を挿入します
Warn	注意の補足説明を挿入します
Info	補足説明を挿入します
Comment out	警告の補足説明を挿入します
Details	折りたたみを挿入します
Reference	脚注へのリンクを挿入します
Footnote	脚注への注釈内容を挿入します

このスニペットを、VSCodeでも同じ使用感で使えるようにしたいと思ったので作りました。

スニペット本体

cmd+shift+Pでコマンドパレットを呼び出し、Snipepts: Configure User Snippets -> markdonw.jsonを選択してください。
その後、開いたファイルに次の内容をコピペしてください。

markdown.json

{
	"Qiita::Code block": {
		"description": "Qiita-style slash commands `/Code block`",
		"prefix": "/Code block",
		"body": [
			"```",
			"$0",
			"```"
		]
	},
	"Qiita::Alert": {
		"description": "Qiita-style slash commands `/Alert`",
		"prefix": "/Alert",
		"body": [
			":::note alert",
			"$0",
			":::"
		]
	},
	"Qiita::Warn": {
		"description": "Qiita-style slash commands `/Warn`",
		"prefix": "/Warn",
		"body": [
			":::note warn",
			"$0",
			":::"
		]
	},
	"Qiita::Info": {
		"description": "Qiita-style slash commands `/Info`",
		"prefix": "/Info",
		"body": [
			":::note info",
			"$0",
			":::"
		]
	},
	"Qiita::Comment out": {
		"description": "Qiita-style slash commands `/Comment out`",
		"prefix": "/Comment out",
		"body": [
			"<!--",
			"$0",
			"-->"
		]
	},
	"Qiita::Details": {
		"description": "Qiita-style slash commands `/Details`",
		"prefix": "/Details",
		"body": [
			"<details><summary>${1:details}</summary>",
			""
			"$0",
			""
			"</details>"
		]
	},
	"Qiita::Reference": {
		"description": "Qiita-style slash commands `/Reference`",
		"prefix": "/Reference",
		"body": [
			"[^KEY]"
		]
	},
	"Qiita::Footnote": {
		"description": "Qiita-style slash commands `/Footnote`",
		"prefix": "/Footnote",
		"body": [
			"[^KEY]: "
		]
	},
    // ...
}

結果

markdonwを開いて、/を入力するとサジェストが出るよ。

QiitaエディタではCode Blockが最優先でサジェストされますが、流石に優先度の順番まではこれではコピーできません。気が向いたらより細かいこともできる拡張機能を開発します。