Tools

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

投稿日:2018年11月29日 更新日:

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、是非使ってみてください。

参考

📂-Tools

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

Anki

HTTP Status Codes の 共有Anki デッキを改造する

HTTP Status Codes の 共有Anki デッキを改造してみました。

ICTリテラシー

手軽に画像ファイル(PNG,JPEG)のサイズを小さくする TinyPNG サイト

PNG や JPEG 形式の画像ファイルを、なるべく見た目の品質を維持しつつ、ファイルサイズを小さくしたい場合は、TinyPNG というウェブサイトが手軽で便利です。

Vim

テキストファイルの空行を Vim を使って削除する

テキストファイルの空行を Vim を使って削除する方法を紹介します。

Linux

nvm を使っているUbuntu 16.04 LTS 環境に、yarn をインストールする

GitHub – creationix/nvm を使っている Ubuntu 16.04 LTS 環境に、Yarn をインストールする手順を紹介します。 Installation | Yar …

Web

GitHub のプライベートリポジトリ作成が無料になりました

GitHub において、無料ユーザーでもプライベートリポジトリが作成できるようになりました。 実際に無料アカウントで試したところ、リポジトリの作成ページで「Private」を選択することができました。 …