码迷,mamicode.com
首页 > 系统相关 > 详细

在vim中使用zencoding/Emmet

时间:2015-07-04 13:55:06      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:

zencoding在vim上的插件已经改名为Emmet.vim

1. 安装,推荐使用vundle插件管理器安装,在~/.vimrc中,添加:Bundle ‘Emmet.vim’,输入命令vim +BundleInstall +qall 即可完成安装;

? ? 个人vim配置:https://www.github.com/lozybean/myVimConfig.git

2. 常用的缩略词:

? ? # 添加一个id属性;

? ? . 添加一个class属性;

? ? > 添加一个下级标签;

? ? + 添加一个平行标签;

? ? [] 添加属性具体值;

? ? {} 添加标签中显示的内容;

? ? * 添加连续的相同标签;

? ? $ 添加递增的数字,$$表示两位数字等;

? ? () 用来改变优先级顺序,默认缩略词组合优先级为 ?+ ?比 ?> 高,通过()的作用就像四则运算改变优先级一样。

3. 一个示例,《细说PHP》p313 的缩略词组合:

form[method=post][action=viewthread.php][target=_blank]>h2[align=center]{发表文章演示}+(div[style="width:200;float:left"]>h5{选项}+(ul[style="list-style:none;margin:0px;padding:0px"]>li*9>input[type=checkbox][name="parse[]"][value=$$]))+div[style="width:300;float:left"]>(h5{标题}>input[type=text][name=subject][size=50])+(h5{内容}>textarea[rows=7][cols=50][name=message])+input[type=submit][name=replysubmit][value="发表帖子"]

技术分享

由于属性比较多,写出来会比较长,但是里面用到了非常多的缩略词方法,将光标移动到最后(仍然在插入模式下),按下control+y,然后再按 , 按键,将缩略词展开:

技术分享

4. 多行选取:vim中多行选取后再展开,会提示输入缩略词,然后将选中的多行展开,如果使用*(如果缩略词比较复杂,包含属性等,则将*放到最后),则会讲每一行的内容分别放到标签中,否则会把整个内容放到一个标签中。

? ? 多行选取貌似对input标签无效,或者是对单标签无效,求验证。

5. 常用的编辑命令,用<c-y>表示control+y,命令实现的模式都是<c-y>,然后再按一个按键的方式实现:

? ? <c-y> + , : 展开缩略词

? ? <c-y> + n : 移动光标到下一个编辑点

? ? <c-y> + N : 移动光标到上一个编辑点

? ? <c-y> + d : 选中整个标签(visual模式)

? ? <c-y> + D : 选中标签中的内容 ?(visual模式)

? ? <c-y> + / : 注释一个标签

? ? <c-y> + k : 移除一个标签

在vim中使用zencoding/Emmet

标签:

原文地址:http://www.cnblogs.com/lyon2014/p/4620570.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!