私がVimでhtml編集を行うときに便利だと思った機能やプラグインを紹介します。
前回はテキストオブジェクトとsurround.vimでhtml編集を効率化する方法を紹介しました。
-
-
Vimのテキストオブジェクトとsurround.vimでhtml編集の効率を上げる
私がVimでhtml編集を行うときに便利だと思った機能やプラグインを紹介します。全部で2回を予定しています。 初回はテキ ...
続きを見る
今回はzencoding-vimです。
目次
- zencoding-vimとは
- ダウンロードとインストール
- この記事の書式について
- 略式記法を使ってタグを作成する
- テキストを1行ごとにタグで囲む
- タグの内側のテキストを選択する
- 次の編集位置にカーソルを移動する
- imgタグのwidthとheightを取得する
- タグを削除する
- タグの内側のテキストを削除する
- コメントをトグルする
- 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>