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,再按,即可生成:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>```
---
#####基本规则:
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， 生成：<p id="id" class="class"></p>
-
输入h1{foo}， 生成：<h1>foo</h1>
-
输入h1+h2, 生成： <h1></h1>
<h2></h2> -
输入img^a, 生成： <img src="">
<a href="" alt=""></a> -
输入h1>h2, 生成： <h1>
<h2></h2>
</h1> -
输入(.foo>h1)， 生成：<div class="foo">
<h1></h1>
</div> -
输入div.item， 生成： <div class="item">
</div>
或者直接输入 .item， 生成： <div class="item">
</div> -
输入ul>li*3， 生成： <ul>
<li></li>
<li></li>
<li></li>
</ul> -
输入ul>li.item$*3， 生成： <ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
----
>使用F2+,修改默认的快捷键:
打开.vimrc, 输入```let g:user_emmet_leader_key = '<F2>' "设置快捷键为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.
