简介：
喜欢vim编辑的我们，繁多的插件使vim功能更加强大，对于前端开发者来说emmet.vim是一个很常用，很好用的插件，其安装简单配置方便，功能强大。
emmet.vim安装
- 下载emmet-vim.zip文件安如下操作，如需bundle安装请看vundle安装配置
# cd ~/.vim/bundle
# unzip /path/to/emmet-vim.zip
- 通过个git仓库
# cd ~/.vim/bundle # or make directory
# git clone http://github.com/mattn/emmet-vim.git
emmet.vim配置
-
在.vimrc文件下输入如下代码配置支持的语言
# vim ~/.vimrc
let g:user_emmet_settings = { 'php' : { 'extends' : 'html', 'filters' : 'c', }, 'xml' : { 'extends' : 'html', }, 'haml' : { 'extends' : 'html', }, \}
***
## emmet.vim使用说明
1. 缩写输入如div>p#foo$*3>a 然后快速按下ctrl + y + ，（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>
2. 输写如下代码：
test1
test2
test3
> 用V全选，然后快速输入ctrl + ,
>然后出现 'Tag:' 提示, 输入 'ul>li*'会渲染如下代码：
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
> 如果输入 'blockquote',会渲染如下代码:
<blockquote>
test1
test2
test3
</blockquote>
3. 输入如下代码：
<img src="foo.png" />
> 将光标放到标签上面按：ctrl+y+i 会渲染如下代码(会显示图片的尺寸)
<img src="foo.png" width="32" height="48" />
4. 输入如下代码：
<ul>
<li class="list1"></li>
<li class="list2"></li>
<li class="list3"></li>
</ul>
> 光标在li上输入ctrl+y+m会渲染如下界面，合并代码
<ul>
<li class="list1"></li><li class="list2"></li><li class="list3"></li>
</ul>
5. 输入如下代码：
<div class="foo">
<a>cursor is here</a>
</div>
> 将光标放在a标签然后输入ctrl+y+k会渲染如下界面
<div class="foo">
</div>
6. 输入如下代码：
<div>
hello world
</div>
> 将光标放在hello上输入ctrl+y+/会渲染如下界面，再次输入还原
7. 输入如下代码：
> 然后在地址上输入ctrl+y+a会渲染如下代码：
<a href="http://www.baidu.com">百度一下，你就知道</a>
---------------------
> 未完待续随学随写
> 资料来源于网络，自己整理，亲测可行(我的系统是centos7)