VSCodeのスニペットファイルの作成方法

作成方法

まず、右下にある歯車アイコンからユーザースニペットを選択する。

新しいグローバルスニペットファイル...を選択する。

名前を決定する。

すると以下のようなファイルが作成される。

スニペットに最低限必要な要素は、prefixとbodyである。
bodyにはテキストを記述する。prefixには、そのテキストを呼び出す際に使用するテキストを入力する。

設定するとこのように予測変換にスニペットが出現するようになる。

以下に例を示す。

"sample":{
	"prefix": "test",
	"body" : "これはテストサンプルです。"
}

$記号を使用することでスニペット使用後に$1にカーソルが移動する。
複数に同じ番号を使用すると、同期して変化する。
Tabを押すと$2へ移動する。

"sample":{
	"prefix": "test",
	"body": [
		"console.log(\"$1\");",
		"//コンソールログ:$1",
		"$2"
	]
}

${1:デフォルトの値をここに記述}を使用することでデフォルト値を設定することができる。

"sample":{
	"prefix": "test",
	"body": [
		"console.log(\"${1:コンソールデバッグ出力用テキスト}\")",
		"$2"
	]
}

${1:|選択肢１,選択肢２,選択肢３|}$ のように、||で囲むと選択肢の提示が可能である。

"sample":{
	"prefix": "test",
	"body": [
		"console.log(\"${1:|デバッグ,テスト|}\")",
		"$2"
	]
}