VimにEmmet導入して爆速HTMLコーディング

  • 182
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

タイトル盛りすぎました。すいません;-P

emmetってなに?

HTMLやCSSの入力を効率化してくれるお便利ツール。

似たようなものだとhamlがあります。
hamlはシェルでコマンド叩いてHTMLを生成するのに対して
emmetはエディタ上でショートカット打てば自動でHTML展開する。

個人的にはemmetのほうが便利

Zen-Codingの改良版という位置づけらしいです。
詳細はこちらEmmet

対応するエディタは?

[公式]

  • Sublime Text
  • Eclipse/Aptana
  • TextMate
  • Coda
  • NetBeans

[サードパーティ]

  • Vim
  • WebStorm
  • PhpStorm

他いろいろと。

具体的に何ができるの?

例えばこんなことを書いてショートカットキーを押すと

table>tr.row*3>td.col$*3

こんなのが一発ででます。

<table>
    <tr class="row">
        <td class="col1"></td>
        <td class="col2"></td>
        <td class="col3"></td>
    </tr>
    <tr class="row">
        <td class="col1"></td>
        <td class="col2"></td>
        <td class="col3"></td>
    </tr>
    <tr class="row">
        <td class="col1"></td>
        <td class="col2"></td>
        <td class="col3"></td>
    </tr>
</table>

このようにHTMLタグ打ちが一気に楽になります。

emmet-vimのインストール

今回はVimでの導入を解説します。
といってもそんなに難しくないです。

NeoBundleが必要なので入れてない人はここ参照

.vimrcに以下を追記

NeoBundle 'mattn/emmet-vim'

そして:NeoBundleInstallでインストール

以上 ・・・・・・えっΣ(゚Д゚)

ちょっとだけカスタマイズ

emmet-vimは<C-y>を使います。

キーバインドかぶっちゃったりする人は変更しましょう。

let g:user_emmet_leader_key='<c-t>'

簡単な使い方

「Emmet式<Leader>,」でHTMLが自動展開されます。

<Leader>はデフォルトなら<C-y>です。

以下<keymap>って略して書きます。

例1:閉じタグ補完

タグ名だけ書けばタグを補完してくれます。

#展開前
div<keymap>
#展開後
<div></div>

例2:子タグ作成

> を使えば子タグを作成できます。

#展開前
ul>li<keymap>
#展開後
<ul>
    <li></li>
</ul>

例4:classやid属性作成

CSSと同じようにclassやidを指定できます。

#展開前#
div#id1.class1<keymap>
#展開後#
<div id="id1" class="class1"></div>

例5:繰り返しタグ生成

*を使って繰り返し回数を指定できます。

#展開前
div*3<keymap>
#展開後
 <div></div>
 <div></div>
 <div></div>

例6:繰り返しタグ&連番生成

$が連番に展開してくれます。$$で2桁にもなります。

#展開前
ul>li.item$*3<keymap>
#展開後
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

その他おすすめサイト

Emmet本家ドキュメント。他にもたくさんシンタックスがあります。
HTMLだけでなくCSSもあります。

手軽にお勉強してみたい方は以下も参考になります。