1.下载
git clone https://github.com/boydos/emmet-vim.git
2.配置
cd emmet-vim
cp plugin/emmet.vim ~/.vim/plugin/
cp autoload/emmet.vim ~/.vim/autoload/
cp -a autoload/emmet ~/.vim/autoload/
3.重启终端
4.测试
vim index.html
输入 html:5
然后用快捷建 ctrl+y+,
5.效果
<!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 → <div></div> 或 foo → <foo></foo>
其他常用快捷键：
<ctrl-y>, 展开简写式
<ctrl-y>d Balance a Tag Inward(选中包围的标签?)
<ctrl-y>D Balance a Tag Outward
<ctrl-y>n 进入下个编辑点
<ctrl-y>N 进入上个编辑点
<ctrl-y>i 更新<img>图像尺寸
<ctrl-y>m 合并文本行
<ctrl-y>k 删除标签
<ctrl-y>j 分解/展开空标签
<ctrl-y>/ 注释开关
<ctrl-y>a 从URL生成anchor标签
<ctrl-y>A 从URL生成引用文本
371
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
