Emmet-vim の HTML5用スニペットを変更する

投稿日：2018年11月29日更新日：2021年6月2日

Vim エディタには、HTML & CSS の入力補助を行う mattn/emmet-vim というプラグインがあります。

これを使うと、例えば

ul>li*5

と入力した直後に、Ctrl + Y キーを押し、続けて , キーを押すと、

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

というHTMLに展開されるといった機能です。HTMLやCSSを全て手で書くというのはかなり面倒な作業ですが、これを使うとだいぶラクになります。

この機能自体は Vim 専用のものではなく、Emmet （昔は Zen Coding という名前でした）という汎用的なツールキットとして存在しており、Emmet-vim は Vim用の Emmet 実装の1つという位置付けになります。そのため、Emmet の文法（どんな文字列を入力すると、どんなHTML（またはCSS）文字列に展開されるのか等）については、Emmet のドキュメントを参照してください。最初は記述方法のパターンをいくつか覚えなければいけませんが、その後は快適になります。

本題

この Emmet の文法の1つとして、「html:5」もしくは「!」という文字列から、HTML5用文書（全体）のスニペット（コードの欠片といった意味です）を展開することができるのですが、この時に展開される HTMLを変更する方法を紹介するというのが、このページの目的になります。

HTML文書というのは、人によってどのメタタグを記述するだとか違いが生まれやすいため、自分に合ったスニペットを設定しておくとより便利です。

HTML5文書用スニペットを上書きする手順

~/.vimrc ファイルにおいて、以下のように g:user_emmet_settings 変数にいくつか値をセットします。

let g:user_emmet_settings = {
\  'variables' : {
\    'lang' : "ja"
\  },
\  'html' : {
\    'indentation' : '  ',
\    'snippets' : {
\      'html:5': "<!DOCTYPE html>\n"
\        ."<html lang=\"${lang}\">\n"
\        ."<head>\n"
\        ."\t<meta charset=\"${charset}\">\n"
\        ."\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n"
\        ."\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n"
\        ."\t<title></title>\n"
\        ."</head>\n"
\        ."<body>\n\t${child}|\n</body>\n"
\        ."</html>",
\    }
\  }
\}

項目（赤字）	内容
`html:5`	ここに、展開したいHTMLをセットします。ダブルクォートで文字列を囲み、ピリオドでつなげています。ダブルクォートはバックスラッシュ（円マーク）でエスケープし、行頭にもエスケープ記号を入れます。
`lang`	`html:5` の中の `${lang}` に置換されます。
`indentation`	インデントとして使うスペースをセットします。ここは必須ではありません。

Emmet-vim、是非使ってみてください。

参考

Emmet-vimのHTML5テンプレート展開部分をカスタマイズする – Tomcky’s blog

執筆者：labo