Visual Studio Codeでユーザースニペットを使ってキー入力を爆速化する

作成:2019.12.14 05:00 更新:2021-02-10T12:49:12Z

Visual Studio Code (VSCode)はとても強力なエディタです。アプリの開発から、メモ帳としても何にでも使えます。

この記事ではVSCodeをより便利にするユーザースニペットを紹介します。

スニペットはよく使うコードのことで、ユーザースニペットを登録しておくことで、短い単語を入力するだけで、コードを展開してくれます。これにより、記事の編集やプログラミングの効率を上げることができます。

ユーザースニペットの設定手順

ユーザースニペットの設定画面を開く。
　左下の設定（）ボタンを押し、[ユーザースニペット]を押します。
　
ユーザースニペットを登録したいファイル種類を選択します。
　ユーザースニペットはファイルの種類ごとに登録ができます。ファイルの種類（拡張子）を選択する画面で、ユーザースニペットを登録したいファイル種類を選択します。ここでは例としてHTMLを選択します。
　
スニペットを登録する。
　html.jsonが開くのでスニペットの設定を記載します。ここでは例として、空のHTMLファイルのスニペットを登録します。
　以下が空のHTMLファイルのスニペットです。これをhtml.jsonに上書きします。（html.jsonは初めからコメントが記載されていますが、すべて選択して上書きしてください。）

{
	"Empty HTML": {
		"prefix": "emp",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"ja\">",
			"\t<head>",
			"\t\t<meta charset=\"utf-8\">",
			"\t\t<title>${1:title}</title>",
			"\t</head>",
			"\t<body>",
			"\t\t$2"
			"\t</body>",
			"</html>",
		],
		"description": "Insert Empty HTML block"
	}
}

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

スニペット設定ファイル（上の例ではhtml.json）に記載する各項目の説明です。

“Empty HTML”

何でもよいです。複数のスニペットを作る時に区別するためのものです。サンプルでは"Empty HTML"とています。

“prefix”

入力する短縮語を入力します。この文字列を入力するとスニペットが入力候補として現れるようになります。

“body”

スニペット本体になります。prefixが入力された場合に、bodyに記載したコードに展開されます。

複数行のスニペットを記載する際は、コードを一行一行カンマ（,）で区切り入力します。

また、body中にある${1:title}、$2は特別な意味を持ちます。${1:title}や$2スニペット展開後にユーザーが入力できる箇所です。スニペットを展開した後にフォーカスが当たった状態となるので、カーソルを移動する手間が省けます。また、Tabキーを押すと入力箇所を移動できます。

titleはスニペット展開後の初期値です。初期値が空の場合には$2のように記載を省略できます。