VIM ·

Emmet.vim 教程

Emmet 项目原来叫 Zen Coding。由俄罗斯前端开发工程师 Sergey Chikuyonok 开发,后来在 Google Code 上释出 Zen Coding 项目。2012年的时候,项目启用新名称 Emmet

Emmet 官方支持很多软件,比如 Sublime Text、Notepad++、Dreamweaver、Eclipse、Adobe Brackets 等。Emmet.vim 并非 Emmet 亲生,它由日本 Yasuhiro Matsumoto 开发。

下载 Emmet.vim

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

安装 Emmet.vim

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

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

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

个人建议通过 Pathogen 或 Vundle 来安装管理 Vim 插件。

使用 Emmet.vim

以下内容译自 Emmet.vim tutorial,感谢作者

1. 展开缩略词

键入缩略词组 div>p#foo$*3>a 然后按快捷键 <c-y>, – 指按 <Ctrl-y> 后再按逗号

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

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

余话

除开以上帮助,你还可以按冒号进入 Vim 命令行模式,然后输入 help emmet 在新窗口中调用 Emmet 的帮助内容。

Emmet 在其他编辑器的触发快捷键一般是 TabCtrl+e,如果你更习惯它们,也可以在 .vimrc 文件中加入下一行命令来修改它的触发快捷键:

这样就可以按 Tab 来扩展了。

 

本文转载自:https://www.zfanw.com/blog/zencoding-vim-tutorial-chinese.html

参与评论