在Vim里玩Zen Coding

harry — Tue, 24 Nov 2009 14:55:11 +0000

更新 2010/3/14:
推荐使用原生vim脚本写的Zen coding插件，无须调用外部程序。

Zen Coding？其实我看下来有点类似snippet的代码模板，用来提高编码效率，但是 Zen Coding 是针对html编写的，可以用一系列快捷的方式生成html代码，从而提高编码的效率，并且感觉还挺有乐趣的。

比如可以用类似css选择器的语法来快速生成html，输入 div#header.content > ul > li*3 > a 就可以生成下面的html代码

<div class="content" id="header">
    <ul>
        <li>
            <a href=""></a>
        </li>
        <li>
            <a href=""></a>
        </li>
        <li>
            <a href=""></a>
        </li>
    </ul>
</div>

介绍：
Zen Coding: A Speedy Way To Write HTML/CSS Code
里面有个 vimeo上的视频，需要翻墙看。。。

googlecode上有个zen-coding的项目，为一些编辑器开发了相关插件，不过似乎暂时没有Vim相关的插件。

我找到了另一个项目 Sparkup。
这是一个类似zen-coding的项目，主程序也是用Python开发，提供了一个vim的脚本。
使用方式也是很简单，下载后把sparkup这个文件放到用户目录下的bin目录里，然后按照里面vim/sparkup.vim里的注释来就行了。
也有视频演示，Youtube上的，所以也要翻墙 – -

如果是要在Windows下使用，我用py2exe将sparkup转换成exe了，然后把这个exe的所在目录加到环境变量里就能用了。

这个项目提供的那个vim脚本用起来要改vimrc，而且使用source方式，要考虑脚本的路径，我改了下，改成插件方式了，把下面的代码保存成 sparkup.vim 放到vim的plugin目录中就行。
还有我把快捷键改成 Ctrl + k 了，输入snippet后按下快捷键就能生成代码。

" Sparkup
" Installation:
" Put it in ~/.vim/plugin
"
autocmd FileType html,php call KeyMapping()
 
function! KeyMapping()
    map <C-k> <Esc>:.!sparkup<Cr>:call SparkupNext()<Cr>
    imap <C-k> <Esc>:.!sparkup<Cr>:call SparkupNext()<Cr>
    "map  :call SparkupNext()
    "imap <C-n> <Esc>:call SparkupNext()<Cr>
endfunction
 
function! SparkupNext()
    " 1: empty tag, 2: empty attribute, 3: empty line
    let n = search('><\/\|\(""\)\|^\s*$', 'Wp')
    if n == 3
        startinsert!
    else
        execute 'normal l'
        startinsert
    endif
endfunction

harry.blog » html

在Vim里玩Zen Coding