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 |
|
lang |
|
indentation |
|
Emmet-vim、是非使ってみてください。
参考