zencoding-vimでhtml編集の効率を上げる

私がVimでhtml編集を行うときに便利だと思った機能やプラグインを紹介します。

前回はテキストオブジェクトとsurround.vimでhtml編集を効率化する方法を紹介しました。

今回はzencoding-vimです。

目次

1. zencoding-vimとは
2. ダウンロードとインストール
3. この記事の書式について
4. 略式記法を使ってタグを作成する
5. テキストを1行ごとにタグで囲む
6. タグの内側のテキストを選択する
7. 次の編集位置にカーソルを移動する
8. imgタグのwidthとheightを取得する
9. タグを削除する
10. タグの内側のテキストを削除する
11. コメントをトグルする
12. URL形式のテキストをaタグにする

zencoding-vimとは

zencoding-vimはHTMLを高速で入力するためのプラグインです。高速にhtmlを編集する機能が備わっています。機能を知るには、実際に試してみるのが手っ取り早いです。

以下より、使用例を紹介します。

ダウンロードとインストール

下記よりダウンロードします。

https://github.com/mattn/zencoding-vim

私はプラグイン管理にPathogenを使用しているので、ダウンロードして解凍したフォルダを下記の位置に配置します。

• Windowsの場合は$HOME/vimfiles/bundle/
• Mac,Linuxの場合は$HOME/.vim/bundle/

この記事の書式について

「<C-Y>,と入力」と書かれているときは、controlキーを押しながらyキーを押し、一度controlキーを離してからカンマを入力することを意味しています。

略式記法を使ってタグを作成する

Expand Abbreviation

略式記法を１つずつ紹介します。慣れてきたら状況に応じて組み合わせてください。
タグをひとつ書くだけでも、この方法を使うと閉じタグを書かなくてよいので楽です。

タグを作成

インサートモードで下記テキストを入力し、行末にカーソルがある状態で<C-Y>,と入力します。

div

下記のようにタグが展開されます。

<div></div>

階層構造をもったタグを作成

インサートモードで下記テキストを入力し、行末にカーソルがある状態で<C-Y>,と入力します。

ul>li>a

下記のようにタグが展開されます。

<ul>
	<li>
		<a href=""></a>
	</li>
</ul>

タグを並列に作成する

インサートモードで下記テキストを入力し、行末にカーソルがある状態で<C-Y>,と入力します。

ul>li>a+div

下記のようにタグが展開されます。

<ul>
	<li>
		<a href=""></a>
		<div></div>
	</li>
</ul>

タグを繰り返し作成する

インサートモードで下記テキストを入力し、行末にカーソルがある状態で<C-Y>,と入力します。

ul>li*3>a

下記のようにタグが展開されます。

<ul>
	<li>
		<a href=""></a>
	</li>
	<li>
		<a href=""></a>
	</li>
	<li>
		<a href=""></a>
	</li>
</ul>

id属性を付与したタグを作成する

インサートモードで下記テキストを入力し、行末にカーソルがある状態で<C-Y>,と入力します。

ul>li#foo$*3>a

下記のようにタグが展開されます。

<ul>
	<li id="foo1">
		<a href=""></a>
	</li>
	<li id="foo2">
		<a href=""></a>
	</li>
	<li id="foo3">
		<a href=""></a>
	</li>
</ul>

class属性を付与したタグを作成する

インサートモードで下記テキストを入力し、行末にカーソルがある状態で<C-Y>,と入力します。

ul>li.foo*3>a

下記のようにタグが展開されます。

<ul>
	<li class="foo">
		<a href=""></a>
	</li>
	<li class="foo">
		<a href=""></a>
	</li>
	<li class="foo">
		<a href=""></a>
	</li>
</ul>

全部乗せ

紹介したものを全部入れるとこうなります。こんなに長い記述は、私はほとんど使いませんが。インサートモードで下記テキストを入力し、行末にカーソルがある状態で<C-Y>,と入力します。

div#page>div.logo+ul#navigation>li.list$*5>a

下記のようにタグが展開されます。テキスト量の都合上、フォーマットは変えています。

<div id="page">
	<div class="logo"></div>
	<ul id="navigation">
		<li class="list1"><a href=""></a></li>
		<li class="list2"><a href=""></a></li>
		<li class="list3"><a href=""></a></li>
		<li class="list4"><a href=""></a></li>
		<li class="list5"><a href=""></a></li>
	</ul>
</div>

テキストを1行ごとにタグで囲む

Wrap with Abbreviation

test1
test2
test3

上記テキストをビジュアルモードですべて選択し、<C-Y>,と入力します。ステータスラインに「Tag:」と表示されるので「ul>li*」と入力してEnterを押します。

<ul>
	<li>test1</li>
	<li>test2</li>
	<li>test3</li>
</ul>

タグの内側のテキストを選択する

Balance Tag Inward/Outward

<ul>
*   <li class="list1"></li>
    <li class="list2"></li>
    <li class="list3"></li>
</ul>

ノーマルモードかインサートモードにて、「*」の位置にカーソルがあるとき

<C-Y>dと入力するとulタグを含む、ulタグの内側を選択します。
<C-Y>Dと入力するとulタグをまない、ulタグの内側を選択します。
インサートモードで入力した場合は自動でビジュアルモードに移行します。

次の編集位置にカーソルを移動する

Go to Next/Previous Edit Point

* <div id="foo" class="">foo</div>
  <div id="bar" class="bar"></li>

ノーマルモードかインサートモードにて、「*」の位置にカーソルがあるとき<C-Y>nと入力すると、同一行のclass要素のダブルクォーテーションの中にカーソルが移動し、インサートモードになります。<C-Y>Nと入力すると一つ前の編集位置にカーソルが移動します。

imgタグのwidthとheightを取得する

Update Image Size

<img src="foo.png" />

<C-Y>iと入力します。

<img src="foo.png" width="32" height="32" />

画像が参照できればwidthとheightが展開されます。

タグを削除する

Remove Tag

<ul>
    <li class="list1"></li>
    <li *class="list2"></li>
    <li class="list3"></li>
</ul>

*にカーソルがあるとき、<C-Y>kを入力します。

<ul>
    <li class="list1"></li>
    <li class="list3"></li>
</ul>

タグの内側のテキストを削除する

Split/Join Tag

<div class="foo">
	*  <p>hello world</p>
</div>

*にカーソルがあるとき、<C-Y>jを入力します。

<div class="foo"/>

再度<C-Y>jを入力します。

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

コメントをトグルする

Toggle Comment

<div>
    hello world
</div>

<C-Y>/を入力します。

<!-- <div>
    hello world
</div> -->

再度<C-Y>/を入力するとコメントを解除します。

URL形式のテキストをaタグにする

Make anchor from URL

http://www.google.com/

<C-Y>aを入力します。

<a href="http://www.google.com/"></a>