Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具。基本上，大多数的文本编辑器都会允许你存储和重用一些代码块，我们称之为“片段”。虽然片段能很好地推动你得生产力，但大多数的实现都有这样一个缺点：你必须先定义你得代码片段，并且不能再运行时进行拓展。
Emmet把片段这个概念提高到了一个新的层次：你可以设置CSS形式的能够动态被解析的表达式，然后根据你所输入的缩写来得到相应的内容。Emmet是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前端开发人员，但也可以用于编程语言。
一、下载 Emmet.vim
你可以从两个地址下载Emmet插件，一是 Vim 插件站点，一是 Github。
二、安装 Emmet.vim
将下载的压缩包解压到 .vim 目录下：
|
1 2 |
cd ~/.vim unzip emmet-vim.zip |
如果你使用 pathogen.vim 管理 Vim 插件：
|
1 2 |
cd ~/.vim/bundle unzip /path/to/emmet-vim.zip |
或者直接从 Github 库克隆一份：
|
1 2 |
cd ~/.vim/bundle git clone http://github.com/mattn/emmet-vim.git |
个人建议通过 Pathogen 或 前面讲到的Vundle来安装插件。
三、配置 Emmet.vim
以下是我在_vimrc中的配置
|
1 2 3 4 5 6 7 8 9 10 11 12 |
" 只在html和css文件中起作用 let g:user_emmet_install_global = 0 autocmd FileType html,css EmmetInstal " 修改Emmet扩展键 实现F2补全 let g:user_emmet_expandabbr_key = '<F2>' " 修改Emmet默认快捷键 将默认的<C-y>修改成<C-e>方便操作 let g:user_emmet_leader_key = '<C-e>' " 对于vim的不同模式,可以在_vimrc有不同配置: let g:user_emmet_mode='n' "only enable normal mode functions. let g:user_emmet_mode='inv' "enable all functions, which is equal to let g:user_emmet_mode='a' "enable all function in all mode. |
四、使用 Emmet.vim
以下内容译自作者帮助文档：
1. 展开
键入 div>p#foo$*3>a 然后按快捷键 <c-y>, – 表示 <Ctrl-y> 后再按逗号，不妨把 Ctrl-y看成 emmet 指令的启动，就像 Vim 的 : 表示进入命令行模式。
|
1 2 3 4 5 6 7 8 9 10 11 |
<div> <p id="foo1"> <a href=""></a> </p> <p id="foo2"> <a href=""></a> </p> <p id="foo3"> <a href=""></a> </p> </div> |
2. 外部包住
如下内容：
|
1 2 3 |
test1 test2 test3 |
按大写的 V 进入 Vim 可视模式，“行选取”上面三行内容，然后按键 <c-y>,，这时 Vim 的命令行会提示 Tags:，键入 ul>li*，然后按 Enter，结果如下：
|
1 2 3 4 5 |
<ul> <li>test1</li> <li>test2</li> <li>test3</li> </ul> |
而假如输入的 tag 是 blockquote’，则结果会变成下面这样：
|
1 2 3 4 5 |
<blockquote> test1 test2 test3 </blockquote> |
3.插入模式下根据光标位置选中整个标签
按 <c-y>d
4.插入模式下根据光标位置选中整个标签内容
按 <c-y>D
5.跳转到下一个编辑点
插入模式下按 <c-y>n
6.跳转到上一个编辑点
插入模式下按 <c-y>N
7.更新图片大小
移动光标到 img 标签。
|
1 |
<img src="foo.png" /> |
然后按 <c-y>i，结果如下：
|
1 |
<img src="foo.png" width="32" height="48" /> |
注：仅适用本地图片，互联网上的图片并无法取得其大小。
8.合并行
选择下面的所有 <li> 行
|
1 2 3 4 5 |
<ul> <li class="list1"></li> <li class="list2"></li> <li class="list3"></li> </ul> |
然后按 <c-y>m，结果如下：
|
1 2 3 |
<ul> <li class="list1"></li><li class="list2"></li><li class="list3"></li> </ul> |
9.移除标签对
首先，移动光标到块中
|
1 2 3 |
<div class="foo"> <a>cursor is here</a> </div> |
然后在插入模式下按 <c-y>k，结果如下：
|
1 2 |
<div class="foo"> </div> |
再次按 <c-y>k 则上面代码块中连 div 标签块都会被移除。
10.分割/合并标签
首先，移动光标到块中
|
1 2 3 |
<div class="foo"> cursor is here </div> |
在插入模式下按 <c-y>j：
|
1 |
<div class="foo"/> |
再次按 <c-y>j：
|
1 2 3 |
<div class="foo"> </div> |
11.切换注释
首先，移动光标到块中
|
1 2 3 |
<div> hello world </div> |
插入模式中按 <c-y>/：
|
1 2 3 |
<!-- <div> hello world </div> --> |
再按 <c-y>/ 则恢复：
|
1 2 3 |
<div> hello world </div> |
12.从 URL 地址生成锚
将光标移至 URL
|
1 |
https://mounui.com/ |
按 <c-y>a
|
1 |
<a href="https://mounui.com">木凡博客 | web开发及IT互联网技术博客</a> |
13.从 URL 地址生成引用文本
移动光标到 URL
|
1 |
https://mounui.com/ |
按 <c-y>A
|
1 2 3 4 5 |
<blockquote class="quote"> <a href="https://mounui.com/"></a><br /> <p>...</p> <cite>https://mounui.com/</cite> </blockquote> |
14.安装 Emmet.vim
见文章头部。
15.为你所用的语言启用 Emmet.vim
你可以为你用的语言自定义行为。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
# cat >> ~/.vimrc let g:user_emmet_settings = { \ 'php' : { \ 'extends' : 'html', \ 'filters' : 'c', \ }, \ 'xml' : { \ 'extends' : 'html', \ }, \ 'haml' : { \ 'extends' : 'html', \ }, \} |
