之前的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,方便参考。

相关文章

    共享到: