前端开发神器-emmet

所谓工欲善其事,必先利其器。作为一个前端开发er,IDE没几款惊天地泣鬼神的插件都不好意思说自己是个coder。今天给大家讲解emmet(zenCoding)的使用。有了这款神器,攻城狮们写页面DOM的效率能提高到令人发指的程度,balabala

生成id为container,class为mystyle的div

//在页面输入
div#container.mystyle 
//或者输入
.mystyle#container
//然后按下ctrl+e

生成的页面结构下:

<div class="mystyle" id="container"></div>

生成class为list,含有5个class为sub的ul标签

ul.list>li.sub*5

利用子节点 > 生成的页面结构下:

<ul class="list">
    <li class="sub"></li>
    <li class="sub"></li>
    <li class="sub"></li>
    <li class="sub"></li>
    <li class="sub"></li>
</ul>

兄弟节点:

div.container>p.para+a.turn
//生成
<div class="container">
        <p class="para"></p>
        <a href="" class="turn"></a>
</div>

自动列表记数

如果你需要按顺序生成HTML元素,这个技巧你一定喜欢,使用$符号可以帮助你生成一系列数字,支持class,id,属性,内容等等。如下:

ul>li.item$*3
//生成如下
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

总结

emmet的功能不仅于此,本人列出常用的一些技巧,其他功能参考emmet常用功能。善于利用工具能腾出更多的时间来创造出更大的价值