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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

英辞郎

英辞郎 on the WEB はどこに行った?

最近、株式会社アルクのURL https://www.alc.co.jp/ は完全にコーポレートサイトになったようです。英辞郎 on the WEB は全く表示されなくなり、英単語を調べることはできま …

Windows

Google の「バックアップと同期」で同期エラーになった時の対応

目次1. はじめに2. 同期エラーの状況3. 対応方法4. おわりに 1. はじめに ローカルのデータを、Google ドライブと同期させる「バックアップと同期」というアプリケーションがあります。 最 …

Git

ファイル(もしくはディレクトリ)を Git による管理から外す手順

Git を使ってファイルやディレクトリの履歴を管理してきたけれど、特定のファイル(もしくはディレクトリ)を Git による管理から外す場合の手順です。 1. ファイル ファイルを実際に削除しつつ、イン …

WSL

WSL 2 の Kali Linux で Win-KeX (kali-win-kex) を使う場合の注意点

目次1. はじめに2. Win-KeX の使い方と注意点(1) Kali Linux の導入(2) kali-win-kex パッケージのインストール(3) 注意事項注意点 その1注意点 その2(4) …

Windows

WSL (Windows Subsystem for Linux) の導入と設定

本ページでは、WSL (Windows Subsystem for Linux) の導入と設定についてポイントをまとめています。