Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

タイトル盛りすぎました。すいません;-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もあります。

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away