vim外掛程式ZenCoding一些常用的操作

vim外掛程式ZenCoding一些常用的操作

相當的酷，記錄一些常用的操作

安裝很方便，不再像我以前使用的sparkup.vim得配置python環境了，可直接到http://github.com/mattn/zencoding-vim
下載zencoding.vim檔案放到vimfiles/plugin
或.vim/plugin
目錄就OK了。

接下來介紹些使用方法（Copy自LazyHack的使用zen coding for vim快速編寫html代碼
）

• 展開縮寫

輸入 div>p#foo$*3>a
這樣的縮寫,然後按 ctrl + y + ,
來展開(注意那個逗號)，展開後它應該是這個樣子的

 <div>      <p id="foo1">          <a href=""></a>      </p>      <p id="foo2">          <a href=""></a>      </p>      <p id="foo3">          <a href=""></a>      </p>  </div>

• 多行縮寫

輸入如下:

test1test2test3

然後進入行選擇模式，選中這三行按 ctrl + y + ,
，接著它會提示你要使用的tag名稱，TAG: 輸入 ‘ul>li*
會變成如下的樣子

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

如果是輸入blockquote
，那麼會變成這樣

  <blockquote>      test1      test2      test3  </blockquote>

• 跳轉到下一個標籤編輯位置

輸入ctrl + y + n
進入插入模式

• 跳轉到上一個標籤編輯位置

輸入ctrl + y + N
進入插入模式

• 更新標籤中圖片大小

假如有以下內容

<img src="foo.png" />

游標移動到img
標籤上，按下ctrl + y + i
該外掛程式會自動擷取foo.png的大小並插入寬高屬性
看起來像這個樣子

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

• 切換注釋

如有以下段

<div>    hello world</div>

游標移動到此段落，輸入ctrl + y + /
變成

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

再次輸入則還原

• 產生url串連

將游標移動到一個url上，如：

http://www.google.com/

輸入ctrl + y + a
它會自動擷取url頁面的標題並產生一個串連

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

zencoding.vim更新十分頻繁，大家可以關注下。

VIM官方外掛程式地址：http://www.vim.org/scripts/script.php?script_id=2981

zencoding.vim在Github的地址：http://github.com/mattn/zencoding-vim

Zen Coding官方地址：http://code.google.com/p/zen-coding/

Zen Coding官方提供的速查手冊(PDF)：http://zen-coding.googlecode.com/files/ZenCodingCheatSheet.pdf