vim插件--emmet-vim

写html页面,使用插件是免不了的,纯手写html的感觉谁写谁知道 : ) .
这里有一个非常好用的vim插件:emmet-vim

---

推荐使用pathogen.vim安装:

cd ~/.vim/bundle
git clone https://github.com/mattn/emmet-vim.git

---

简易说明:

• 新建一个html文件后,输入html:5,然后按control+y,再按,即可生成:

 
 
 
   
    
 
 

 
 ```

---
#####基本规则:
1. E 代表HTML标签
2. E#id 代表标签E有id属性
3. E.class 代表E有class属性
4. E[attr=foo] 代表某个特定属性
5. E{info} 代表标签E包含的内容是info
6. E>N 代表N是E的子元素
7. E+N 代表N是E的同级元素
8. E^N 代表N是E的上级元素

举例:

• 输入p.class#id， 生成：

• 输入h1{foo}， 生成：

  foo

• 输入h1+h2, 生成：

  
  　　　　　　　　　　

• 输入img^a, 生成：
  　　　　　　　　　　

• 输入h1>h2, 生成：

  
  　　　　　　　　　　　　　　

  
  　　　　　　　　　

• 输入(.foo>h1)， 生成：

  
  　　　　　　　　　　　　　　　　

  
  　　　　　　　　　　　

• 输入div.item， 生成：

  
  　　　　　　　　　　 　
  
  或者直接输入 .item， 生成：
  
  　　　　　　　　　　　　

• 输入ul>li*3， 生成：

  
  　　　　　　　　　　　　　　　　
  
  　　　　　　　　　　　　　　　　
  
  　　　　　　　　　　　　　　　　
  
  　　　　　　　　　　　 　

• 输入ul>li.item$*3， 生成：

  
  　　　　　　　　　　　　　　　　　
  
  　　　　　　　　　　　　　　　　　　
  
  　　　　　　　　　　　　　　　　　　
  
  　　　　　　　　　　　　　　　

----
>使用F2+,修改默认的快捷键:
打开.vimrc, 输入```let g:user_emmet_leader_key = '' "设置快捷键为F2+, 使用 emmet```

---
如果要限制只对html,css文件使用的话:
```let g:user_emmet_install_global = 0
autocmd FileType html,css EmmetInstall```

---
对于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.