【转】vim插件ZenCoding一些常用的操作

相当的酷，记录一些常用的操作

安装很方便，不再像我以前使用的sparkup.vim得配置python环境了，可直接到http://github.com/mattn/zencoding-vim下载zencoding.vim文件放到

vimfiles/plugin

或

.vim/plugin

目录就OK了。

接下来介绍些使用方法（Copy自LazyHack的使用zen coding for vim快速编写html代码）

展开缩写

输入

div>p#foo$*3>a

这样的缩写,然后按

ctrl + y + ,

来展开(注意那个逗号)，展开后它应该是这个样子的

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

多行缩写

输入如下:

test1
test2
test3

然后进入行选择模式，选中这三行按

ctrl + y + ,

，接着它会提示你要使用的tag名称，

TAG: 输入 ‘ul>li*

会变成如下的样子

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

如果是输入

blockquote

，那么会变成这样

  <blockquote>
test1
test2
test3</blockquote>

跳转到下一个标签编辑位置

输入

ctrl + y + n

进入插入模式

跳转到上一个标签编辑位置

输入

ctrl + y + N

进入插入模式

更新标签中图片大小

假如有以下内容

<img src="foo.png" />

光标移动到

img

标签上，按下

ctrl + y + i

该插件会自动获取foo.png的大小并插入宽高属性
看起来像这个样子

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

切换注释

如有以下段

<div>
hello world
</div>

光标移动到此段落，输入

ctrl + y + /

变成

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

再次输入则还原

生成url连接

将光标移动到一个url上，如：

http://www.google.com/

输入

ctrl + y + a

它会自动获取url页面的标题并生成一个连接

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

zencoding.vim更新十分频繁，大家可以关注下。

VIM官方插件地址：http://www.vim.org/scripts/script.php?script_id=2981

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

相当的酷，记录一些常用的操作

安装很方便，不再像我以前使用的sparkup.vim得配置python环境了，可直接到http://github.com/mattn/zencoding-vim下载zencoding.vim文件放到

vimfiles/plugin

或

.vim/plugin

目录就OK了。

接下来介绍些使用方法（Copy自LazyHack的使用zen coding for vim快速编写html代码）

展开缩写

输入

div>p#foo$*3>a

这样的缩写,然后按

ctrl + y + ,

来展开(注意那个逗号)，展开后它应该是这个样子的

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

多行缩写

输入如下:

test1
test2
test3

然后进入行选择模式，选中这三行按

ctrl + y + ,

，接着它会提示你要使用的tag名称，

TAG: 输入 ‘ul>li*

会变成如下的样子

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

如果是输入

blockquote

，那么会变成这样

  <blockquote>
test1
test2
test3</blockquote>

跳转到下一个标签编辑位置

输入

ctrl + y + n

进入插入模式

跳转到上一个标签编辑位置

输入

ctrl + y + N

进入插入模式

更新标签中图片大小

假如有以下内容

<img src="foo.png" />

光标移动到

img

标签上，按下

ctrl + y + i

该插件会自动获取foo.png的大小并插入宽高属性
看起来像这个样子

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

切换注释

如有以下段

<div>
hello world
</div>

光标移动到此段落，输入

ctrl + y + /

变成

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

再次输入则还原

生成url连接

将光标移动到一个url上，如：

http://www.google.com/

输入

ctrl + y + a

它会自动获取url页面的标题并生成一个连接

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

zencoding.vim更新十分频繁，大家可以关注下。

VIM官方插件地址：http://www.vim.org/scripts/script.php?script_id=2981

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

源地址：http://nootn.com/blog/tag/ZenCoding/http://nootn.com/blog/tag/ZenCoding/