[转]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