vim插件emmet-vim

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具。基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为“片段”。虽然片段能很好地推动你得生产力,但大多数的实现都有这样一个缺点:你必须先定义你得代码片段,并且不能再运行时进行拓展。

Emmet把片段这个概念提高到了一个新的层次:你可以设置CSS形式的能够动态被解析的表达式,然后根据你所输入的缩写来得到相应的内容。Emmet是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前端开发人员,但也可以用于编程语言。

一、下载 Emmet.vim

你可以从两个地址下载Emmet插件,一是 Vim 插件站点,一是 Github

二、安装 Emmet.vim

将下载的压缩包解压到 .vim 目录下:

如果你使用 pathogen.vim 管理 Vim 插件:

或者直接从 Github 库克隆一份:

个人建议通过 Pathogen 或 前面讲到的Vundle来安装插件。

三、配置 Emmet.vim

以下是我在_vimrc中的配置

四、使用 Emmet.vim

以下内容译自作者帮助文档

1. 展开

键入 div>p#foo$*3>a 然后按快捷键 <c-y>, – 表示 <Ctrl-y> 后再按逗号,不妨把 Ctrl-y看成 emmet 指令的启动,就像 Vim 的 : 表示进入命令行模式。

2. 外部包住

如下内容:

按大写的 V 进入 Vim 可视模式,“行选取”上面三行内容,然后按键 <c-y>,,这时 Vim 的命令行会提示 Tags:,键入 ul>li*,然后按 Enter,结果如下:

而假如输入的 tag 是 blockquote’,则结果会变成下面这样:

3.插入模式下根据光标位置选中整个标签

按 <c-y>d

4.插入模式下根据光标位置选中整个标签内容

按 <c-y>D

5.跳转到下一个编辑点

插入模式下按 <c-y>n

6.跳转到上一个编辑点

插入模式下按 <c-y>N

7.更新图片大小

移动光标到 img 标签。

然后按 <c-y>i,结果如下:

注:仅适用本地图片,互联网上的图片并无法取得其大小。

8.合并行

选择下面的所有 <li>

然后按 <c-y>m,结果如下:

9.移除标签对

首先,移动光标到块中

然后在插入模式下按 <c-y>k,结果如下:

再次按 <c-y>k 则上面代码块中连 div 标签块都会被移除。

10.分割/合并标签

首先,移动光标到块中

在插入模式下按 <c-y>j

再次按 <c-y>j

11.切换注释

首先,移动光标到块中

插入模式中按 <c-y>/

再按 <c-y>/ 则恢复:

12.从 URL 地址生成锚

将光标移至 URL

按 <c-y>a

13.从 URL 地址生成引用文本

移动光标到 URL

按 <c-y>A

14.安装 Emmet.vim

见文章头部。

15.为你所用的语言启用 Emmet.vim

你可以为你用的语言自定义行为。

weinxin
我的微信
扫一扫加我微信
琪玥

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: