简介：

喜欢vim编辑的我们，繁多的插件使vim功能更加强大，对于前端开发者来说emmet.vim是一个很常用，很好用的插件，其安装简单配置方便，功能强大。

emmet.vim安装

1. 下载emmet-vim.zip文件安如下操作，如需bundle安装请看vundle安装配置

# cd ~/.vim/bundle
# unzip /path/to/emmet-vim.zip

2. 通过个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. 输入如下代码：

http://www.baidu.com

> 然后在地址上输入ctrl+y+a会渲染如下代码：

<a href="http://www.baidu.com">百度一下，你就知道</a>

---------------------
> 未完待续随学随写
> 资料来源于网络，自己整理，亲测可行(我的系统是centos7)