Vim に Zen-Coding プラグインをインストールしてHTMLやCSSを高速コーディングする

Zen-Coding とは？

Zen-Coding は、簡単な記述をするだけで構造化された HTML/CSS コーディングが行えるという「HTML/CSS ショートカット用ライブラリ」です。
例えば、以下のような ul 要素を記述したいと仮定します。

<ul>
<li></li>
<li></li>
<li></li>
</ul>

通常のテキストエディタで編集する場合は li 要素をコピペで増やしたり、 Vim で編集する場合は "3i<li></li><Enter><Esc>" などのコマンドを入力するかもしれません。
Zen-Coding を利用すれば、これらを以下のような簡単な略記で記述することができます。

ul>li*3

具体的には、ZenCoding.vim というプラグインをインストールした後、上記の様な Zen-Coding の表記規則に従った略記を行い、カーソルを行末に置いたまま(インサートモードのままでOK)、,（Ctrl+yのあとカンマ）を押すと先述の ul 要素を記述できます。

このような略記を Zen-Coding では"セレクタ"と呼びます。セレクタのフォーマットについては下記URLで確認できます。
http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn

ZenCoding.vim のインストール

ZenCoding.vim は下記URLからダウンロードできます。
http://www.vim.org/scripts/script.php?script_id=2981

プラグインのインストールは非常に簡単で、プラグインディレクトリにダウンロードした vim スクリプトを保存するだけです。詳しくは":h plug"でヘルプを参照するか、下記URLのヘルプをご覧ください。
http://www.ac.cyberhome.ne.jp/~yakahaira/vimdoc/usr_05.html#05.4

なお、Zen-Coding はテキストエディタ本体ではなく、プラグインなので、いろいろなソフトウェア上で動作します。
例えば DreamWeaver や Eclipse などの IDE や秀丸エディタや EmEditor などのテキストエディタ、 WordPress や MovableType などの CMS にもインストールすることができるようです。

最終更新 2010-04-25

参考資料

この記事へのコメント

まだコメントは投稿されていません。