概要

VSCodeで、HTML用のスニペットを新規に登録してみる。

スニペットとは

コードパターンを登録しておくことで、それをショートカットキーで呼び出すことができる便利な仕組み。
例えば、HTMLファイルで「html:5+[Tab]」と入力すると、HTMLファイルのテンプレートがすぐに作成できる。

自作スニペットの登録方法

スニペットは。.htmlや.javaなど、ファイル形式ごとに登録するjsonファイルが用意されている。
以下からは

設定ファイルを開く
スニペットを登録する
実際に表示を確認する
の流れで自作スニペットの登録方法を述べる。

1. 設定ファイルを開く

「ファイル」→「基本設定」→「ユーザースニペット」をクリック。
するとファイル形式を選択する画面が表示される。
今回は「HTML」にスニペットを登録してみる。

2. スニペットを登録する。

設定ファイルはjson形式で記述できる。
デフォルトでは色々と英語でコメントが書かれているが、とりあえず全部消してOK。
スニペットは以下の感じで記述する。

{
    "スニペットの名前": {
        "prefix": "スニペット使う際のショートカット",
        "description": "スニペットの説明",
        "body": [
            "スニペットの中身",
            "配列形式で書いていく",
            "..."
        ],
    }
}

自分は以下のようなhtmlのテンプレを登録している。

{
	"html-template": {
		"prefix": "html",
		"description": "htmlのテンプレート",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"ja\">",
			"<head>",
			"\t<meta charset=\"UTF-8\">",
			"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
			"\t<link rel=\"stylesheet\" href=\"${1:./style.css}\">",
			"\t<title>${2:Title}</title>",
			"</head>",
			"<body>",
			"\t$4",
			"\t<script src=\"${3:./app.js}\"></script>",
			"</body>",
			"</html>"
		]
	}
}

入力値の補足

$n
$1や$2は、スニペット呼び出し後にフォーカスが来る場所である。
呼び出し直後は$1にフォーカスがいき、「tab」を押すと次に$2にフォーカスがいく。$3も付け足すと同じような流れでフォーカスが移動する。
${n:初期値}
$nの箇所に初期値を設定することができる。
スニペット呼出し直後は初期値全体にフォーカスがあるため、そのまま入力すれば初期値を書き換えて値を入れることができる。
\t
\tでインデントを入れることができる。

3. 実際に表示を確認する

自分の例であれば、HTMLファイルで「html+[Tab]」を入力すると以下のようにテンプレートが作成される。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Title</title>
</head>
<body>
    
    <script src="./app.js"></script>
</body>
</html>

おわりに

よく使うコードパターンはどんどん登録しておこう。