この記事では、VisualStudioCodeで独自スニペットを作成する方法についてまとめます。

スニペットとは

スニペットは『断片』という意味があります。

デバッグをしている時には頻繁に

console.log($num);

といったコードを書くのではないでしょうか。このように頻繁に利用するコードを断片(スニペット)として登録しておく事で開発が楽になります。

例えば、『log』と入力した場合にエディタが『console.log(”)』に変換してくれれば、とても楽ですよね。

VisualStudioCodeでそのようなスニペットを登録する方法について書きたいと思います。

VSCodeでスニペットを定義する方法

VSCodeを開き、基本設定 > ユーザスニペット、を選択します。

選択後、次の様なプログラム言語やマークアップ言語を選択する事ができ、これはプログラミング言語毎にスニペットを定義するためです。

今回はJavaScriptのスニペットを作成したいのでJavaScriptを選択します。すると次の様なコードが現れると思います。

{
	// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	"Print to console": {
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	}
}

デフォルトで『console.log』に関するスニペットが書かれています。

それぞれについて解説すると

Print to consoleの部分	このスニペットの簡易説明
prefix	スニペットを起動するキーワード（log => console.log(”);）
body	スニペットの内容についての箇所。配列の要素番号が行に対応している。
$1	起動後にはじめにカーソルが移動する位置
$2	$1でtabを押した場合に次にカーソル移動する位置
description	このスニペットの詳細説明

となっています。

適当にJavaScriptファイルを作成し、エディタでprefixに書いた『log』を入力してみましょう。その状態でTabを打つ事で『console.log(”);』が現れます。

その際にカーソル位置は$1の箇所になっており自由に$1の位置を設定する事ができます。ログ出力したい内容(例えば、console.log(‘test’);)とし、次にもう一度Tabを押します。

すると$2に設定した箇所にカーソルが移動します。『prefix・$1・$2』をマスターすれば自由に独自のスニペットを作成できますね。

まとめ

今回はVisualStudioCodeで独自スニペットを定義する方法について書きました。

開発効率をあげるためにスニペットは非常に重要になってきまので、繰り返し書くコードはスニペットに登録しておきましょう。

この記事では、VisualStudioCodeで独自スニペットを作成する方法についてまとめます。

スニペットとは

VSCodeでスニペットを定義する方法

まとめ

Javaで進める競プロ日記