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

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

関連記事

Linux

前回 ./configure を実行した時に指定したオプションを確認する

目次1. 前置き (configure, make, make install)2. config.status ファイル(1) 前回 configure を実行した時の引数を表示する(2) 前回 c …

Linux

scp の代わりとしての rsync コマンドとそのオプション

1. はじめに scp コマンドというのは、ssh コマンドを内部で使って、ローカルホストとリモートホスト間でファイルをコピーするためのコマンドです。ssh コマンドは SSH という暗号化された安全 …

Evernote

【Evernote】検索でヒットするはずのノートが、ヒットしない場合の対処法

【Evernote】検索しても、特定のノートがヒットしない場合の対処法について説明します。

データベース管理ツール Adminer

目次1. Adminer とは?2. Adminer の特徴A. たった1つのPHPファイルで動作するB. MySQL の多くの機能に対応しているC. 対応データベースが多いD. ユーザーインターフェ …

Web Programming

Webプログラミングに役立つサービスたち

目次全般HTML, CSS, JS をすぐに試せるWebサービス他のサービスが使っている技術・ツールを知る多言語対応デザインレイアウトフォント関連ロゴ作成HTMLパーツジェネレーターオンラインエディタ …