zencoding.vim 教程

如果你经常手写 HTML 或 CSS，则一定会察觉到输入英文标签非常耗时，而且容易犯错，这就是为什么会有 zencoding 存在，禅之编程：你只需关注应该关注的内容，语法、拼写或重复输入的内容都交给 zencoding 完成。

但是 zencoding 官方并不支持 Vim，于是就有了一个日本网友 Yasuhiro Matsumoto 开发的第三方 Vim 插件 zencoding.vim。如果你恰好使用 Vim，又恰好做网页前端开发，则一定要尝试下这个 Vim 插件，可以减少你非常多的工作量。

下载 zencoding.vim

你可以从两个地址下载，一个是 Vim 插件站点，一个是 Github 上，Vim 站点上目前版本为 0.72，2012-05-28 发布。

安装 zencoding.vim

一般建议使用 pathogen.vim 来管理 Vim 插件，你如果刚好也使用它，就可以直接将下载的压缩包解压到 bundle 文件夹下，pathogen.vim 会自动管理。否则请根据你的操作系统参考 Vim 第三方插件安装方法进行安装。

使用 zencoding.vim

使用 Vim 新建 HTML 文件，注意用命令 :set ft? 检查文件类型，如果不是 HTML 则 zencoding.vim 可能不正常工作。

以下内容翻译自 zencoding.vim tutorial，虚线框内为扩展后的内容，感谢作者允许翻译并发布，版权归原作者所有。

1. 展开缩略词

键入缩略词组 ‘div>p#foo$*3>a’ 然后再按入 ‘<c-y>,‘。

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

2. 用缩略词包入

写出如下内容：

test1
test2
test3

然后进入 Vim 的可视模式进行“行选取”上面三行内容，然后再按入 ‘<c-y>,‘，这时 Vim 的命令行会提示 Tags:，然后键入’ul>li*’。

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

而假如你输入的 tag 是 ‘blockquote’，则结果会变成下面这样。

<blockquote>
    test1
    test2
    test3
</blockquote>

3.插入模式下根据光标位置选中整个标签

按 ‘<c-y>d‘

4.插入模式下根据光标位置选中整个标签内容

按 ‘<c-y>D‘

注：3、4内容原教程中并没有例子，我在这儿举一个，假设_ 指示插入模式下的光标位置。

<div>
    <ol>
        <li>_zencoding.vim 中文教程</li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
        _<p>同上</p>
</div>

如上所示，如果光标在第1个位置，则3命令会选中 <li>_zencoding.vim 中文教程</li>，4命令会选中 zencoding.vim 中文教程，可以看到，它并不选中包围内容的标签对。

而当光标在第2个位置时，命令3选中整个 div 块，命令4则只选择除去 div 标签对的 div 内容，即一个有序列表与段落。

5.跳转到下一个编辑点

插入模式下按入 ‘<c-y>n‘

6.跳转到上一个编辑点

插入模式下按入 ‘<c-y>N‘

7.更新图片大小

移动光标到 img 标签。

<img src="foo.png" />

然后按入 ‘<c-y>i‘

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

注（译者言）：这个据个人使用经历，仅适用本地图片，互联网上的图片并无法取得其大小。

8.合并行

选择包含 ‘<li>’ 的行

<ul>
    <li class="list1"></li>
    <li class="list2"></li>
    <li class="list3"></li>
</ul>

然后按入 ‘<c-y>m‘

<ul>
    <li class="list1"></li><li class="list2"></li><li class="list3"></li>
</ul>

9.移除标签对

移动光标到块中

<div class="foo">
    <a>cursor is here</a>
</div>

在插入模式下按入 ‘<c-y>k‘。

<div class="foo">

</div> 

再次按入 ‘<c-y>k‘ 则上述连 div 标签块都没了。

10.分割/合并标签

移动光标到块中

<div class="foo">
    cursor is here
</div>

在插入模式下按入 ‘<c-y>j‘。

<div class="foo"/>

再次按 ‘<c-y>j‘。

<div class="foo">

</div>

11.切换注释

移动光标到块中

<div>
    hello world
</div>

插入模式中按入 ‘<c-y>/‘。

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

再按 ‘<c-y>/‘。

<div>
    hello world
</div>

12.从 URL 地址生成锚

将光标移至 URL

http://www.google.com/

按 ‘<c-y>a‘

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

13.从 URL 地址生成引用文本

移动光标到 URL

http://github.com/

键入 ‘<c-y>A‘

<blockquote class="quote">
    <a href="http://github.com/"></a><br />
    <p>...</p>
    <cite>http://github.com/</cite>
</blockquote>

14.安装 zencoding.vim

见文章头部。

15.为你所用的语言启用 zencoding.vim

你可以为你所用的编程语言自定义行为。

# cat >> ~/.vimrc
let g:user_zen_settings = {
\ 'php' : {
\ 'extends' : 'html',
\ 'filters' : 'c',
\ },
\ 'xml' : {
\ 'extends' : 'html',
\ },
\ 'haml' : {
\ 'extends' : 'html',
\ },
\}

附: 1. zencoding cheatsheet 2. CSS 部分写法注意事项