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のひな形を変更することができました。

私はあまり編集することもなさそうですが、、、

備忘録として！

おわり

Emmetで展開できるHTMLを自分好みに変更する