在Vim里玩Zen Coding

Zen coding in vim
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插件提供的默认展开代码的快捷键是,也就是Ctrl + y and Comma。例如输入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

  • Robin

    为啥我把zencoding.vim考到plugin中,嗯 ctrl+z+, 就什么也没有了。

    • @Robin 所以我修改了vimrc的配置改成ctrl+e了,我也不知道那个怎么输入似乎是冲突还是怎么的

  • 这个……vim是挺好,但我还是习惯np++,但np++下没有zen coding一直没解决,作者好像也无能为力

  • 嘿嘿,问一下,怎么不要自动备份文件的功能?

  • 这次也有 notepad++ 的插件了,感觉这样写代码太爽了

  • 看来vim你已经上手了,我cp代码多,所以这个Zen Coding暂时对我没用,哈

  • 楼主是高手啊,介绍个学习JS相对较好的书籍行吗?

  • 唔,纯路过……插不上话了……

  • coda+zencode
    vim以前用linux时用过两年
    mac下的vim不好用
    换textmate

  • 我还是习惯自己手写HTML,页面结构自己留个印象这样才好写CSS

    • @bolo 哦,这个怎么就不是手写html了…

    • @Leeiio 主要是懒学新的书写规则,习惯逐个字符敲

  • Thanks for nice entry about zencoding.vim :mrgreen:

    • @mattn You are welcome,zencoding.vim is really useful and powerful.

  • cricy

    在网上找到你的发言:“我的macvim老是和输入法冲突,英文输入老是切到中文…而且dock会弹出两个macvim…还是用espresso了。”

    不知道这个问题解决了没?我也有一样的问题,最不方便的就是英文输入法自动切换到中文输入法。看看能解决不?

  • vt

    zencoding 确实强大,以前都不知道 vim 还有这么好的插件 😛
    thanks for sharing

  • 不知道现在zencoding支持中文不

  • 很赞 不过占时没看懂

  • 我用e-texteditor。CSS部分展开有误,不知道博主有没有办法。m:a原本是margin:auto;它却是气死人了。

  • Pingback: 在vim上尝试了一下zen coding,用来写html文件倒是快了很多 | simon的个人日志()

  • wtz

    你好!我是在安装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代码
    请问这是什么原因呀?期待您的回复.谢谢了!

  • oliex

    小问题一枚,生成的代码默认为tab缩进,即使我将缩进更改为空格,他也是使用tab。

    • @oliex 这个应该可以偶挺难搞过修改插件来替换成空格

    • oliex

      @Leeiio 真的吗?我找找看。

    • @oliex 不需要修改插件,只需要在~/.vimrc里写下配置就ok了
      let g:user_zen_settings = {
      ‘indentation’ : ‘ ‘,
      }

  • 我安装了就是Ctrl+Y都木有反应,不知道什么原因,练习HJKL的俄罗斯方块都运行成功的了呀~~

    • 动荡不安

      ctrl+y还需要加英文逗号“,”哦。

  • Pingback: Vim相关资料大全 | 天天三国杀()