vim（二）插件emmet.vim的安装配置

---

简介：

喜欢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 和逗号）会渲染出如下代码：

2. 输写如下代码：

      test1
      test2
      test3
> 用V全选，然后快速输入ctrl + ,
>然后出现 'Tag:' 提示, 输入 'ul>li*'会渲染如下代码：

• test1


• test2


• test3

>  如果输入 'blockquote',会渲染如下代码:

test1
test2
test3

3. 输入如下代码：

> 将光标放到标签上面按：ctrl+y+i 会渲染如下代码(会显示图片的尺寸)
  

4. 输入如下代码：

  > 光标在li上输入ctrl+y+m会渲染如下界面，合并代码

5. 输入如下代码：

cursor is here

> 将光标放在a标签然后输入ctrl+y+k会渲染如下界面

6. 输入如下代码：

hello world

> 将光标放在hello上输入ctrl+y+/会渲染如下界面，再次输入还原

7. 输入如下代码：

http://www.baidu.com

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

百度一下，你就知道

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