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相关资料大全 | 天天三国杀