まえがき

VSCodeにはスニペット機能という、作業を効率化できる機能が備わっています。
本日はこの機能に関する説明や設定方法を紹介します。

スニペット機能による恩恵

そもそもスニペット機能とはなんでしょうか。
答えは、予め書いておいたコードをすぐに呼び出せるという機能です。
例えば、C++でforループを書く時は以下のような構文を使います。

for (int i=0; i<n; i++) {
    //process
}

これを毎回書くのは、ほんの少しだけ面倒ですね。ですがスニペット機能を用いれば、以下のようにして簡単に書くことができるようになります。

forin(予め設定しておいたコード呼び出し)と入力
表示されたスニペットを呼び出す

こんな感じですぐに書きたいコードを呼び出すことが出来ました！
今回出した例のような短いコードでも十分恩恵はありますが、さらに長いコードや複雑なコードを呼び出したいときは大幅な時間短縮となり作業の効率化に大きく寄与するので、是非設定してみてはいかがでしょうか。

スニペット機能の設定方法

さて、スニペット機能の内容や効能を知っていただけたかと思います。ということで、実際に設定していきましょう。

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

まずは、VSCodeの画面左下にある歯車マークからスニペットという項目を探してください。

押下すると、以下のような検索欄が画面上部に表示されるので、スニペット機能を使用したい言語を選択しましょう。

選択すると、cpp.jsonのような選択した言語名のjsonファイルが生成されます。

スニペットファイルの設定

さて、スニペットを書き込むスニペットファイルが作成できたので、この中に登録したいコードを書いていきましょう。初めて作成した場合サンプルコードが書かれているかと思いますが、全て消してしまって大丈夫です。

スニペットは以下のような形式で登録することが出来ます。

{
	"スニペットの名前": {
	  "prefix": "呼び出す際に入力するコード",
	  "body":[
		"出力するコード1行目", 
		"出力するコード2行目", 
		"出力するコード3行目", 
	],
    "description": "スニペットの説明(なくても良い)"
	},
}

また、複数のスニペットを登録したい場合は、一番最後のカンマに続けて同じようにスニペットの登録を書けばOKです。

複数のスニペットを登録したい場合

{
	"スニペットの名前": {
	  "prefix": "入力するコード",
	  "body":[
		"出力するコード1行目", 
		"出力するコード2行目", 
		"出力するコード3行目", 
	],
   "description": "スニペットの説明"
	},
 
	"スニペットの名前": {
	  "prefix": "入力するコード",
	  "body":[
		"出力するコード1行目", 
		"出力するコード2行目", 
		"出力するコード3行目", 
	],
   "description": "スニペットの説明"
	},
}

スニペットファイルの設定例

分かりやすいように、スニペットファイルの設定例を見てみましょう。
冒頭で紹介したforループのスニペットは以下のような感じになります。

{
	"forin": {
	  "prefix": "forin",
	  "body":[
		"for(ll i=0; i<n; i++) {", 
		"\t$1", 
		"}", 
   ],
   "description": "i=0~n-1でループ"
	},
}

上のコードをよく見ると、"body"の部分に\tや$1という記号があると思います。この記号を使うことにより、スニペット機能を更に便利にすることができるので紹介しましょう。

「\t」の利用方法

\tとはタブ文字のことで、文字列中でタブを表す文字です。
改行文字の\nが改行を表すのと同じです。
スニペットのコード中でインデントが含まれる場合はこのタブ文字\tを利用してインデントを示しましょう。

実際にタブを入力してインデントを書いてしまうとエラーが出てしまいます。

「$」の利用方法

$とは、スニペットを呼び出したあとの入力箇所を指定する文字です。
例えばスニペットのコード中に$1と書いておけば、呼び出し直後に$1の場所からコードを書き始めることができるようになります。デフォルトのままだとスニペットの最後にカーソルが自動で移動されるので、$を利用することでさらに効率化することができますね。
また、$1,$2,...,$nとスニペットのコード中に書くことにより、複数の入力箇所を指定することができます。

スニペット呼び出し直後は$1にカーソルが移動し、Tabを押すと$2に移動、再度Tabを押すと$3に移動、・・・、再度Tabを押すと$nに移動

といった具合です。

あとがき

VSCodeでのコーディングを効率化するスニペット機能の紹介をしました。
スニペットの登録はやや面倒に感じるかもしれませんが、一度登録してしまえば今後の作業がグッと楽になること間違いなしなので、是非試してみてください。