之前的Zen coding插件,现在升级成了Emmet。主要功能还是Zen coding,不过现在除了支持Html,还进一步的把这种快速生成代码的方式扩展到了CSS。而且现在好像架构是基于PyV8用Javascript写的了。另外就是在扩展方面支持强大了很多,这个我没仔细看。
别的不说了,可以看官方很Cool的在线文档。这里就举两个例子。
1. HTML
输入如下文字:div>(header>ul>li*2>a)+footer>p
,按下tab
,将生成这样的代码:
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
输入如下文字:ul.generic-list>lorem10.item*4
,按下tab
,将生成这样的代码:
<ul class="generic-list">
<li class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam vero.</li>
<li class="item">Laboriosam quaerat sapiente minima nam minus similique illum architecto et!</li>
<li class="item">Incidunt vitae quae facere ducimus nostrum aliquid dolorum veritatis dicta!</li>
<li class="item">Tenetur laborum quod cum excepturi recusandae porro sint quas soluta!</li>
</ul>
2. CSS
输入如下文字:bgc#1
,按下tab
,将生成这样的代码:
background-color: #111;
输入如下文字:bdrs5
,按下tab
,将生成这样的代码:
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
最后放一个Emmet cheat sheet,方便参考。