vim插件ZenCoding一些常用的操作

    技术2022-11-26  31

    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

    最新回复(0)