前端开发神器Emmet.vim使用笔记

Emmet.vim的安装

请看：http://www.cnblogs.com/yunie-akira/p/3554065.html

Emmet.vim简介

Emmet,原来叫Zen Coding，由Sergey Chikuyonok开发，是快速开发HTML和CSS的编辑器插件。支持 Sublime Text、Notepad++、
Eclipse等等。官方的Emmet并不支持vim，Emmet.vim是Yasuhiro Matsumoto 开发的。

开始使用Emmet.vim

生成doctype

输入 html:xs， 按ctrl+y, 最后按下“,”（逗号）生成XHTML strict doctype

• html:5  生成HTML5 doctype
• html:xt 生成XHTML transitional doctype
• html:4s 生成HTML4 strict doctype

轻松书写html代码

输入 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>

 

基本规则

（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的上级元素

 

参考

特别推荐：ZenCodingCheatSheet
vim下编写html的超级利器emmet
Goodbye, Zen Coding. Hello, Emmet!