2010年5月10日月曜日

zencoding.vimを使ってZen-Codingしてみた

Zen-Codingとは
ショートカットキーによって高速でHTMLタグをコーディングできるライブラリ。
CSSもサポートしている。
現在、さまざまなエディタ(DreamWeaverとかCodaとか)にサポートされてるようです。


Vimもサポートされた
Vimのプラグインとしてzencoding.vimが登場しました。
mattnさんのページ


インストール手順
私が実際やった手順は下記の通りです。
Vimのプラグインをいれたことがなかったので、ゼロスタートでやりました。
#環境はMacOSX 10.6.3、vim7.2。

1. ここから をプラグイン入手
2. ターミナルを開いて
$ mkdir -p ~/.vim/plugin/html
$ mv <プラグインを保存した場所> ~/.vim/plugin/html

で終わり。


設定
デフォルトの設定だと

<c-y>, (insertモードでctrl+y+,(カンマ))

ですが、カスタマイズも可能です。~/.vimrcに

let g:user_zen_expandabbr_key = '<c-e>'

と書けば ctrl+e+, でZen-Cordingできます。


早速つかってみる
普通にvimで挿入モードにしてから
html:5
と打ち込んだあと、, (ctrl+y+,)と入力すると

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
</body>
</html>


とでます!
div
だけでも

<div></div>

とでてくれます。閉じるのめんどくさかったので助かる。。
入れ子も対応していて、

div#foo$*2>div.bar
は、

<div id="foo1">
    <div class="bar"></div>
</div>
<div id="foo2">
    <div class="bar"></div>
</div>

となります。">"が入れ子になるみたいです。

もっと複雑なやつになると
div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer.
は、

<div id="page">
    <div id="header">
        <ul id="nav">
            <li>
                <a href=""></a>
            </li>
            <li>
                <a href=""></a>
            </li>
            <li>
                <a href=""></a>
            </li>
            <li>
                <a href=""></a>
            </li>
        </ul>
    </div>
    <div id="page">
        <h1>
            <span></span>
        </h1>
        <p></p>
        <p></p>
    </div>
    <div id="footer"></div>
</div>

となります。
ショートカットがいっぱいあるので覚えるのが大変ですが、覚えたら強い武器になりそうです。