Vim前端开发神器--Emmet（html编辑插件）
1）去home目录下，并查看home目录下是否有.vim目录和.vimrc文件，如果没有，则新建，执行以下命令：
cd ~/.vim
touch .vimrc
2）安装pathogen.vim，执行以下命令
pathogen是安装其他包的工具
创建目录：
mkdir -p ~/.vim/autoload ~/.vim/bundle
安装pathogen：
curl -LSso ~/.vim/autoload/pathogen.vim https://tpo.pe/pathogen.vim
curl是软件安装的一种方式
3）安装git
sudo apt-get install git
使用以下命令测试git是否安装成功
git --version
4) 使用pathogen.vim和git安装vim-emmet
5).进入.vim的bundle目录
cd ~/.vim/bundle
6).下载插件
git clone https://github.com/mattn/emmet-vim.git
7).编辑.vimrc
vim ~/.vimrc
输入以下内容：
"启动pathogen插件管理器
execute pathogen#infect()
"默认的触发键是ctrl+y+,
"更改触发键为ctrl+e
let g:user_emmet_expandabbr_key = '<C-e>'
"在每行前面显示文本行数：
set nu
"设置tab键缩进间距为两个英文字母长度
set tabstop = 2
"设置换行后缩进对齐
set autoindent
8)测试
测试
vim index.html
输入 html:5
然后用快捷建 ctrl+e
效果
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
_
</body>
</html>
嵌套操作符
使用 > 生成元素子节点
<!-- div>ul>li -->
<div>
<ul>
<li></li>
</ul>
</div>
使用 + 生成元素兄弟节点
<!-- div+p+bq -->
<div></div>
<p></p>
<blockquote></blockquote>
操作符 ^ 的作用和 > 刚好相反
用 ^ 可以在父级生成新的节点
<!-- div+div>p>span+em^bq -->
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
用n个 ^ ，就可以在第n父级生成新的节点
<!-- div+div>p>span+em^^^bq -->
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
使用 * 生成多个相同元素
<!-- ul>li*5 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
圆括号 () 是Emmet的高级用法，用来实现比较复杂的DOM结构
<!-- div>(header>ul>li*2>a)+footer>p -->
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
还可以嵌套使用圆括号 ()
<!-- (div>dl>(dt+dd)*3)+footer>p -->
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
属性操作
Emmet给元素添加ID和CLASS的方法和CSS的语法类似
<!-- div#header+div.page+div#footer.class1.class2.class3 -->
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>
使用[attr]标记来添加自定义属性
<!-- td[title="Hello world!" colspan=3] -->
<td title="Hello world!" colspan="3"></td>
使用 $ 操作符可以对重复元素进行有序编号
<!-- ul>li.item$*5 -->
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
还可以用多个 $ 定义编号的格式
<!-- ul>li.item$$$*5 -->
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>
使用 @ 修饰符可以改变编号的格式
在 $ 后面添加 @- 可以改变编号顺序
<!-- ul>li.item$@-*5 -->
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
在 $ 后面添加 @N 可以改变编号基数
<!-- ul>li.item$@3*5 -->
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>
还可以组合使用上面的修饰符
<!-- ul>li.item$@-3*5 -->
<ul>
<li class="item7"></li>
<li class="item6"></li>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
</ul>
文本操作
Emmet使用 Text:{} 给元素添加文本内容
a{Click me}--><a href="">Click me</a>
<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>
<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>
<!-- p>{Click }+a{here}+{ to continue} -->
<p>Click <a href="">here</a> to continue</p>
其他例子
<!-- #page>div.logo+ul#navigation>li*5>a{Item $} -->
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</div>
Emmet没有预设任何标签名，所以可以使用任何可用名称来生成HTML标签：div →
或 foo →
其他常用快捷键：
, 展开简写式
d Balance a Tag Inward(选中包围的标签?)
D Balance a Tag Outward
n 进入下个编辑点
N 进入上个编辑点
i 更新![]()
图像尺寸
m 合并文本行
k 删除标签
j 分解/展开空标签
/ 注释开关
a 从URL生成anchor标签
A 从URL生成引用文本