概要
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>
おわりに
よく使うコードパターンはどんどん登録しておこう。