TL;DR
-
!で展開できるHTMLのひな形を変更したい。 -
emmet.extensionPathにsnippets.jsonが入ったフォルダを指定することで、emmetのスニペットを登録できる。 - emmet公式が出してるemmetのスニペットを参照しながらつくると楽。
実行環境
- VSCodeの最新版（2020.01.30現在）
!で展開できるHTMLのひな形を変更したい
理想形
理想の形はこんな感じです。
※lang属性はすでに設定で変更済み。この変更はぐぐるとめっちゃヒットする。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
titleタグの下にlink:cssが入ったひな形をつくりたいのです。
デフォルトだと、link:cssは入っていません。
スニペットをつくる
html.jsonにつくるパターン
下記は、拡張子がhtmlのときに使えるスニペットを定義して、emmetのひな形を作成するパターンです。
VSCodeでemmetのHTMLテンプレート変更とenをjaにする！ - Qiita
こちらは、emmetの展開後のHTMLをスニペットとして定義する形になります。
こちらの例では"div.flex-container"と入力したときに<div class="flex-container"></div>と出るようにスニペットを定義しています。
{
"flex container": {
"prefix": "div.flex-container",
"body": [
"<div class='flex-container'>$1</div>",
],
"description": "make div with flex-container class"
}
}
ではbodyに、展開後のHTMLではなく、div.flex-containerと入れたらどうなるでしょう。
答えは"div.flex-container"と出てくるだけになります。
snippets.jsonにつくるパターン
こちらはひとつVSCode上で設定をおこなわないといけない分、面倒です。
ただし、こちらで定義するスニペットでは、emmet記法が使えます。
準備
-
emmet.extensionPathを設定します。
File > Preferences > Settings > emmet.extensionPath
ここには、snippets.jsonを置くフォルダパスを指定します。
書いてみる
VSCodeの公式サイトにサンプルとしてスニペットが載っています。
{
"html": {
"snippets": {
"ull": "ul>li[id=${1} class=${2}]*2{ Will work with html, jade, haml and slim }",
"oll": "<ol><li id=${1} class=${2}> Will only work in html </ol>",
"ran": "{ Wrap plain text in curly braces }"
}
},
"css": {
"snippets": {
"cb": "color: black",
"bsd": "border: 1px solid ${1:red}",
"ls": "list-style: ${1}"
}
}
}
サンプルにもありますが、こちらはemmet記法をスニペット定義に使えます。
もちろん!の定義を上書きすることも可能です。
emmet公式が出してるemmetのスニペットを見る
emmetでよく見る省略記法がどうやって定義されているか見れます。
ためしに!を見てみると、次のように記載されているのがわかります。
!!!+doc
!!!とdocを合わせて使っているんですね。。
!!!は{<!DOCTYPE html>}で、
docはhtml[lang=${lang}]>(head>meta[charset=${charset}]+meta:vp+title{${1:Document}})+bodyとなっています。
ということは、docを上書きすれば良いみたいですね。
snippets.jsonのhtmlの項目にdocの行を追加しました。
{
"html": {
"snippets": {
"doc": "html[lang=${lang}]>(head>meta[charset=${charset}]+meta:vp+title{${1:Document}}+link:css)+body"
}
}
}
これでHTMLのひな形を変更することができました。
私はあまり編集することもなさそうですが、、、
備忘録として！
おわり