Zen Coding確實是一個很不錯的快速寫代碼的方式，自@zen_coding發布以來，受到了不少前端人士的追捧和青睞。試想只要輸入div#content>h1+p即可得到<div id="content"><h1></h1><p></p></div>這麼一段代碼，無疑減少了很多次對鍵盤的敲擊，省力省鍵盤。你想更多的了解Zen Coding可以戳此查看更詳細的介紹。
Vim之前我有做過簡單的介紹，與其說介紹，不如說是簡單的折騰。而Zen Coding的官方項目地址Google Code上還木有Zen Coding的vim插件，倒是在VIM的主頁上找到了VIM 的 Zen Coding 插件ZenCoding.vim。如果想跟進這個插件的版本的話，可以Github上找到這個VIM插件的的最新情況http://github.com/mattn/zencoding-vim。
ZenCoding.vim插件提供的默認展開代碼的快捷鍵是html:5_(_為游標的位置)，然後輸入「<c-y>,」，就會展開成
<!DOCTYPE HTML> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> </head> <body> _ </body> </html> |
輸入div#foo$*2>div.bar，然後輸入「<c-y>,」就會展開成
<div id="foo1"> <div class="bar">_</div> </div> <div id="foo2"> <div class="bar"></div> </div> |
當然，你也可以根據自己的習慣設置展開代碼的快捷鍵，你可以通過在你的vimrc配置文件里寫入以下配置來覆蓋zencoding.vim插件的默認設置。
let g:user_zen_settings = { \ 'indentation' : ' ', \ 'perl' : { \ 'aliases' : { \ 'req' : 'require ' \ }, \ 'snippets' : { \ 'use' : "use strict\nuse warnings\n\n", \ 'warn' : "warn \"|\";", \ } \ } \} let g:user_zen_expandabbr_key = '<c-e>' "設置為ctrl+e展開 let g:use_zen_complete_tag = 1 |
截圖中的例子：
如果你在這段文本外面包裹這段縮寫div#header>ul#navigation>li.item$*>a>span:
About Us Products News Blog Contact Up |
你將會得到以下結果：
<div id="header"> <ul id="navigation"> <li class="item1"><a href=""><span>About Us</span></a></li> <li class="item2"><a href=""><span>Products</span></a></li> <li class="item3"><a href=""><span>News</span></a></li> <li class="item4"><a href=""><span>Blog</span></a></li> <li class="item5"><a href=""><span>Contact Up</span></a></li> </ul> </div> |
目前就目前我對zencoding.vim 0.27版的測試來說，選中文字用div#header>ul#navigation>li.item$*>a>span包括的時候出現了文本內容插入到錯誤的位置的問題，提交bug給作者了。
2010/03/08 22:11 更新：作者回復說修復了。在0.28版本中增加了更多的快捷鍵操作，所以下面的自定義快捷鍵配置無法生效了。可前往http://github.com/mattn/zencoding-vim獲取最新版本。
2010/03/09 20:05 更新：經過和作者的探討，原來的
zencoding.vim更新十分頻繁，大家可以關注下。
VIM官方插件地址：ZenCoding.vim
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
為啥我把zencoding.vim考到plugin中，嗯 ctrl+z+, 就什麼也沒有了。
@Robin 所以我修改了vimrc的配置改成ctrl+e了，我也不知道那個怎麼輸入似乎是衝突還是怎麼的
這個……vim是挺好，但我還是習慣np++，但np++下沒有zen coding一直沒解決，作者好像也無能為力
@ZH CEXO
今天似乎有了np++的插件, 可以使用.
@ZH CEXO 對，今天出了notepad++的zen coding插件了。
@Leeiio 謝謝你，剛看到，真好 😳
嘿嘿，問一下，怎麼不要自動備份文件的功能？
@小邪 set nobackup
set nowritebackup
這次也有 notepad++ 的插件了，感覺這樣寫代碼太爽了
看來vim你已經上手了，我cp代碼多，所以這個Zen Coding暫時對我沒用，哈
@zwwooooo vim過於強大，我現在充其量算是入門吧哈。
樓主是高手啊，介紹個學習JS相對較好的書籍行嗎？
唔，純路過……插不上話了……
coda+zencode
vim以前用linux時用過兩年
mac下的vim不好用
換textmate
@Arcthur Mac下我也喜歡coda，就是這軟體太貴了
我還是習慣自己手寫HTML，頁面結構自己留個印象這樣才好寫CSS
@bolo 哦，這個怎麼就不是手寫html了…
@Leeiio 主要是懶學新的書寫規則，習慣逐個字元敲
Thanks for nice entry about zencoding.vim
@mattn You are welcome,zencoding.vim is really useful and powerful.
在網上找到你的發言：「我的macvim老是和輸入法衝突，英文輸入老是切到中文…而且dock會彈出兩個macvim…還是用espresso了。」
不知道這個問題解決了沒？我也有一樣的問題，最不方便的就是英文輸入法自動切換到中文輸入法。看看能解決不？
@cricy 呃，還沒解決。
zencoding 確實強大，以前都不知道 vim 還有這麼好的插件 😛
thanks for sharing
不知道現在zencoding支持中文不
@強哥仔 怎樣才算是支持中文呢？對你的問題不解
很贊 不過占時沒看懂
我用e-texteditor。CSS部分展開有誤，不知道博主有沒有辦法。m:a原本是margin:auto;它卻是氣死人了。
Pingback: 在vim上嘗試了一下zen coding，用來寫html文件倒是快了很多 | simon的個人日誌
你好！我是在安裝zen coding不成功時。找到你的blog.看到你的文章。似乎很easy!.為灑我的就沒有效果??我是在windows xp 下安裝gvim7.0 的。安裝好後。我接下來在vim的官網下載了最新的zen coding 插件。解壓下來有三個文件（autoload doc plugin）我分別把這三個文件下的文件（zencoing.vim zencoding.txt zencoding.vim ）放在我的vim安裝目錄下相應的文件下下。可我重啟vim 輸入 div 然後空格 再按ctrl+y+,(是在插入模式下輸入的) 根本沒有生成html代碼
請問這是什麼原因呀?期待您的回復.謝謝了！
小問題一枚，生成的代碼默認為tab縮進，即使我將縮進更改為空格，他也是使用tab。
@oliex 這個應該可以偶挺難搞過修改插件來替換成空格
@Leeiio 真的嗎？我找找看。
@oliex 不需要修改插件，只需要在~/.vimrc里寫下配置就ok了
let g:user_zen_settings = {
‘indentation’ : ‘ ‘,
}
我安裝了就是Ctrl+Y都木有反應，不知道什麼原因，練習HJKL的俄羅斯方塊都運行成功的了呀~~
ctrl+y還需要加英文逗號「,」哦。
Pingback: Vim相關資料大全 | 天天三國殺