VScodeのスニペット 登録方法

ここではコーディングの効率化を図ってスニペットの登録方法を説明してます。

VScodeを開いたら左上の「Code」→「基本設定」→ 「ユーザースニペット」を選択すると下の検索窓が表示されます。

検索窓から各言語.jsonファイルを開き登録していきます。

jsonファイルを開いたらスニペットを登録していきます。
コメントアウトしてる以下のコードをコピペしてもらい新しく登録していきます。
下は例としてphpのスニペットを登録していきます。

	"php tag": {
		"prefix": "php",
		"body": [
			"<?php $1 ?>",
		],
		"description": "phpタグ"
	}

prefixはコードを呼び出すトリガーになります。
“prefix”: “ここに記述”,
bodyの[ “”, ] のダブルコーテーションの記述内容が呼び出されます。
上の場合だとが呼び出され、$1は呼び出した後にカーソルが$1の位置に移動します。
なので呼び出しの単語を記述したら「$1」の場所に移動します。抜ける場合はtabキーを記述すると抜けます。

「”」ダブルコーテーションを呼び出したい時

[“ここに記述”]ダブルコーテーションの中に記述をするので、呼び出したい単語がダブルコーテーションの場合は囲めなくなります。
その場合はダブルコーテーションのまえに「\」を記述すると読み込んでくれます。
以下はhtmlのスニペット での記述例になります。

	"section": {
		"prefix": "sec",
		"body": [
			"<section id=\"$1\" class=\"section\">$2</section>"
		],
		"description": "section"
	}

$1で任意の移動位置に移動できる

	"section": {
		"prefix": "sec",
		"body": [
			"<section id=\"$1\" class=\"section\">$2</section>"
		],
		"description": "section"
	}

上記のhtmlのスニペットの場合だと「$1」「$2」と二つあります。
この場合はスニペットを呼び出して一つ目に「$1」の場所に移動します。tabキーを押すと「$2」に移動します。
同じ要領で$3,$4など増やしていくと任意の場所に移動して、マウスを持たなくても記述できます。