[转]vim中安装zen-coding插件及使用方法

zen-coding 这个创造性的发明，在 WEB界绝对是引发了13级地震，搞网页设计的如果不懂点这种技术肯定是落伍啦。
但是 zen-coding 官方并没有提供 vim 插件。使用 vim 的用户可能会比较沮丧，这么想你就错了，vim这个非常多大牛使用编辑器怎么会错过这个 极品插件呢？
于是 vim 官方出了一个 zen-coding 插件，不调用外部程序，响应速度更快，功能上面也比原版的 zen-coding 更多。 vim-zen-coding官方。

vim zen-coding 插件安装方法

在上面提供的 vim zen-coding 官方网页下载最新版本的 zencoding.vim。安装方法有两种
把 zencoding.vim 复制到 $HOME/.vim/plugin/ 目录下面，这种安装方法装完后，所有语言都能使用 zen-coding 这个插件。
方法二是 复制 zencoding.vim 到 $HOME/.vim/ftplugin/html 这里的 html 就是指 html这种类型的文件的时候，启用 zen-coding 插件。

vim zen-coding 插件使用方法
一，在编辑模式下输入
view source
print?
01 html:xxs>div#header+div#container>ul>li.class_$#id_$*2
02
03 按下 <ctrl+y> 然后 点 , 逗号。就自动展开为下面的代码。
04
05
06
07
08
09
10
11 <div id="header"></div>
12 <div id="container">
13 <ul>
14 <li id="id_11">
15 </li>
16 <li id="id_22">
17 </li>
18 </ul></div>
19
20 </ctrl+y>

二，字符包裹
输入如下符
view source
print?
01 ---------------------
02 test1
03 test2
04 test3
05 ---------------------
06
07 在可视模式下选择这三行，shift+v 然后 shift+g 选中这三行。然后 <ctrl+y>, 。在命令栏输入 ul>li*
08
09 ---------------------
10 <ul>
11 <li>test1</li>
12 <li>test2</li>
13 <li>test3</li>
14 </ul>
15
16 ---------------------
17
18 如果你输入的是 blockquote，那么可以得到如下的结果
19
20 ---------------------
21 <blockquote>
22
23 test1
24 test2
25 test3
26 </blockquote>
27
28 ---------------------
29 </ctrl+y>

三，标签内联选择
view source
print?
1 在插入模式下输入 <c-y>d
2 </c-y>

四，标签外联选择
view source
print?
1 在插入模式下输入 <c-y>D
2 </c-y>

五，转到下一个编辑点
view source
print?
1 <c-y>n
2 </c-y>

六，转到上一个编辑点
view source
print?
1 <c-y>N
2 </c-y>

七，更新 img 标签里面的图片大小（图片必须在本地 vim 能读到的地方）
原代码如下
view source
print?
1 <img src="foo.png">
2 光标移动到 img 标签，然后按 <c-y>i
3 代码自动转换成
4 <img src="foo.png" height="48" width="32">
5 </c-y>

八，合并行
在如下代码中
view source
print?
01 <ul>
02 <li class="list1"></li>
03 <li class="list2"></li>
04 <li class="list3"></li>
05 </ul>
06
07 选择所有 li 标签，然后 输入 大 ‘J’。
08 代码就变成如下
09 <ul>
10 <li class="list1"></li>
11 <li class="list2"></li>
12 <li class="list3"></li>
13 </ul>

九，删除标签
view source
print?
1 <div class="foo">
2 <a>光标在这</a>
3 </div>
4
5 按下 <c-y>k 就变成
6 <div class="foo">
7 </div>
8 </c-y>

十，分割组合标签
view source
print?
01 <div class="foo">
02 标签在这里
03 </div>
04
05 按下 <c-y>j 后代码变成
06 <div class="foo">
07 再次按下 <c-y>j 代码就返回原来的样子。
08 <div class="foo">
09 </div>
10 </c-y></div></c-y>

十一，注释
代码如下
view source
print?
01 <div>
02 hello world
03 </div>
04
05 光标移动到此块代码，按下 <c-y>/ 变成如下
06 <!--
07 <div>
08 hello world
09 </div>
10
11 -->
12 再按一次就变回来的样子。
13 </c-y>

十二，自动给网址添加 标签
view source
print?
1 光标移动到网址上 http://www.google.com 2 按下 <c-y>a 变成 如下
3 <a href="http://www.google.com/"></a>
4 </c-y>

十三，给网址添加注释文本
view source
print?
01 <c-y>A 按下后，网址变成
02 <blockquote class="quote">
03
04 <a href="http://github.com/">Secure source code hosting and collaborative development - GitHub</a>
05
06 How does it work? Get up and running in seconds by forking a project, pushing an existing repository...
07
08 <cite>http://github.com/</cite>
09 </blockquote>
10 </c-y>

原文链接：http://yulei.cc/blog/html/252.html