Vim の Sparkup プラグインで HTML タグを Zen Coding 風に簡単入力

Vim プラグインの Sparkup (rstacruz’s sparkup at master – GitHub) で、CSS セレクタ風の記述から HTML タグ文字列を入力することができる。(zen-coding 風の入力)

プラグインのインストールは上記サイトからダウンロードしたファイル内の vim/ftplugin/ 内のファイルを ~/.vim/ftplugin/ にコピーする。
プラグインの実行には python2.5 以上が必要。

<c-e> を押すことで、タグキーワード(div, h1, img, meta 等)から開始タグ・終了タグ・各種属性を自動で入力できる。

<c-n> を押すことでカーソルを次の入力位置に移動できる。

CSS 風のセレクタ表記を使ったショートカット文字列から HTML タグ文字列に展開される。

タグ単体の入力

タグキーワードを入力して <c-e> を押す。

div <= <c-e> を押す

<div></div>

属性値を含めて入力

id の場合は #class の場合は . でタグキーワードと属性値を繋ぐ。
タグを省略した場合は div タグとして処理される。

div#hoge.foo <= id が hoge, class が foo の div タグ

<div class="foo" id="hoge"></div>

その他の属性値の場合は属性名を指定する。

a[href=http://www.google.com/].foo#hoge <= id が hoge, class が foo の Google へのリンク

<a href="http://www.google.com/" class="foo" id="hoge"></a>

img[width][height][title=テスト] <= width, height 属性を持ち title テキストが"テスト"の img タグ

<img width="" src="" height="" alt="" title="テスト" />

タグに囲まれたテキスト

タグに囲まれたテキストは {} で囲んだテキストを繋ぐ。

a[href]{This is link test}

<a href="">This is link test</a>

子要素を含めて入力

子要素を含めて入力する場合は、子要素を > で繋ぐ。

div > span.wrap <= class が wrap の span タグを子要素に持つ div タグ

<div>
    <span class="wrap"></span>
</div>

要素を連続して入力

要素を連続して複数入力する場合は、要素名の後に *n のようにして * と要素数を記述する。

select > option*4 <= 4つの option タグを持つ select タグを入力

<select name="">
    <option value=""></option>
    <option value=""></option>
    <option value=""></option>
    <option value=""></option>
</select>

連続して入力するタグに連番を使った処理を加える

連続して入力するタグに $ の記述を追加すると連番に展開される。

select > option[value=$].item-$*5 <= 5つの option タグの value と class に連番を加える

<select name="">
    <option class="item-1" value="1"></option>
    <option class="item-2" value="2"></option>
    <option class="item-3" value="3"></option>
    <option class="item-4" value="4"></option>
    <option class="item-5" value="5"></option>
</select>

隣接した異るタグを入力する

同じ階層の隣接した異なるタグ(タグ自身や属性の相違)を続けて入力するには + で各タグを繋いていく。

p.foo + p.hoge + img

<p class="foo"></p>
<p class="hoge"></p>
<img src="" alt="" />

階層を1つ上に戻す

< を使うことで1度掘り下がった階層を1つ上に戻すことができる。

div > ul > li.items*3 < p.foot < #foot

<div>
    <ul>
        <li class="items"></li>
        <li class="items"></li>
        <li class="items"></li>
    </ul>
    <p class="foot"></p>
</div>
<div id="foot"></div>

少し複雑なテーブルを作る

table[border=1] > tr*3 > th.title{TITEL} + td*2{CONTENTS} + td.foot{FOOTER} < tr > th.foot[colspan=4]{FOOTER}

<table cellspacing="0" border="1">
    <tr>
        <th class="title">TITEL</th>
        <td>CONTENTS</td>
        <td>CONTENTS</td>
        <td class="foot">FOOTER</td>
    </tr>
    <tr>
        <th class="title">TITEL</th>
        <td>CONTENTS</td>
        <td>CONTENTS</td>
        <td class="foot">FOOTER</td>
    </tr>
    <tr>
        <th class="title">TITEL</th>
        <td>CONTENTS</td>
        <td>CONTENTS</td>
        <td class="foot">FOOTER</td>
    </tr>
    <tr>
        <th colspan="4" class="foot">FOOTER</th>
    </tr>
</table>
TITEL CONTENTS CONTENTS FOOTER
TITEL CONTENTS CONTENTS FOOTER
TITEL CONTENTS CONTENTS FOOTER
FOOTER

HTML タグ・テンプレートの入力

各 DOCTYPE 宣言を含んだ HTML タグ・テンプレート を入力する。
html: の後に各 DOCTYPE 宣言のショートカット文字列(type)を記述する。

html:type

各 DOCTYPE 宣言とショートカットの一覧

HTML 4.01 Transitional
html:4t
HTML 4.0.1 Strict
html:4s
XHTML 1.0 Transitional
html:xt
XHTML 1.0 Strict
html:xs
XHTML 1.1
html:xxs
HTML 5
html:5

入力例

以下の例では lang 属性が ja になるように ~/vim/ftplugin/html/sparkup.py ファイルを修正している。

html:5 <c-e> を押すと以下のタグが入力される

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

</body>
</html>

IE 用条件付きコメント分岐タグ

cc: の後に IE の各バージョンを表わす文字列(type)を記述する。

cc:type

IE の各バージョンとショートカットの一覧

IE (全てのバージョン)
cc:ie
IE6 以下
cc:ie6
IE7 以下
cc:ie7
IE以外
cc:noie

入力例

cc:ie <c-e> を押すと以下のタグが入力される

<!--[if IE]><![endif]-->

その他

その他、入力フォーム・メタタグ・スクリプトタグの入力ショートカットや、入力ショートカットの省略形などが定義されている。
詳細は ~/.vim/ftplugin/html/sparkup.py のコードを参照する。

追記:コードを参照してショートカットを調べるのが面倒なので vim のヘルプファイルを作りました。
sparkup-keys-help.zip

追記:CSS 用の Zen Coding Vim Script を作りました。zencodingcss.vim (Vim Scirpt)

参考サイト:rstacruz’s sparkup at master – GitHub
      YouTube – Sparkup with MacVIM

コメント

ちょうど最近ZenCoding.vimというものがwww.vim.orgにアップロードされましたよ。
http://www.vim.org/scripts/script.php?script_id=2981

コメント by tyru | 2010年2月20日 - 12:13

> tyru さん
情報ありがとうございます。
ZenCoding.vim は CSS の入力にも対応しているようですね。
lang 属性や インデント文字の設定も可能なようですし、そちらも試してみます。

コメント by iNo | 2010年2月20日 - 21:41
Top