【Emmet】初期設定を変更したい!特にhtml5のheadの展開部分

【Emmet】初期設定を変更したい!特にhtml5のheadの展開部分

Emmetは省略記法でhtmlを書くのに便利なモノです。
前回の記事で初期設定のlang=”en”を”ja”に変えるためのスニペットを調べたメモを残しましたが、せっかくなら「!」で展開される部分をカスタマイズできたらもっと楽だろうということで今回挑戦してみました。

今回参考にしたもの

!で展開されるものを調べる

「!」+tabで展開されるものは

です。lang=”ja”の部分は、前回の記事から変更済。
emmet/snippets.json – GitHubによると

“!”: “html:5”

で定義され、

“html:5”: “!!!+doc[lang=${lang}]”

html:5はこんな感じになっており、

“!!!”: “<!DOCTYPE html>”
doc
: html>(head>meta[charset={charset}]+meta:vp+meta:edge+title{${1:Document}})+body

こんな風にそれぞれ設定されています。

この中でも、”doc”の設定を追加することができれば、初期のタグ展開が一気にできそうです。

個人的に追加したいもの

個人的に<head>~</head>の中にいつも入れているものを列挙します。

こんな感じのものが「!」+tabの展開で、<head>~</head>の中に入っていたらかなり楽になるんじゃないかなと思いました。

スニペットを編集する

HTML/CSSを爆速コーディング Emmet入門 第4回 Emmetのスニペットや設定を編集して、思い通りの記述にしよう(Adobe Creative Station)の記事を参考にして、今回追加したいものを表示できるようにします。

追加したいものをEmmetの省略記法で確認すると、以下のようになります。

スタイルシート、ファビコン、ビューポート、javascriptは省略記法があったのだけど、他のは見当たりませんでした。

見当たらないということは、まずは見つからなかったところの省略記法を定義するところから始めなければならないようです。

チートシートになかった部分を追加する

見当たらなかったところのmetaやlinkの省略記法をスニペットに追加します。filterは初期設定のlang=”en”を”ja”に変えるためのスニペットを調べたメモで追加した部分です。

以上のことを追加することでようやく<head>に入れたい内容が準備できました。

<head>に入れるために”doc”を上書き定義する

試行錯誤の中完成したのが、コレ。

docの内容を上書き定義することで、

こんな風に展開されるようになりました。