`

Web开发人员的必备工具 - Emmet (Zen Coding)

阅读更多

日期:2012-11-6  来源:GBin1.com

如果你从事前端开发或者web开发的话,一定听说过Zen coding - 一种快速编写HTML/CSS代码的方法。它使用仿CSS选择器的语法来快速开发HTML和CSS - 由Sergey Chikuyonok开发。

现在它改名为了Emmet ,并且搭建了一个新的网站:docs.emmet.io

Emmet

和一般的编辑器中使用的“代码片段”概念不太一样,Emmet使用动态的语法来生成代码,这意味着你不需要自己去编辑并创建固定的代码片段。 大大的提高了代码编写效果,这一点似的Zen coding非常的流行。

例如,输入如下内容:

ul#nav>li.item$*4>a{Item $} 

Emmet会帮助你生成如下的代码片段:

<ul id="nav">
        <li class="item1"><a href="">Item 1</a></li>
        <li class="item2"><a href="">Item 2</a></li>
        <li class="item3"><a href="">Item 3</a></li>
        <li class="item4"><a href="">Item 4</a></li>
</ul>

Emmet 作为插件可以支持如下的编辑器:

个人比较喜欢使用Sublime Text 2 ,整合了Emmet会让你的开发如虎添翼,相信作为web开发“猿”的你肯定会喜欢!

来源:Web开发人员的必备工具 - Emmet (Zen Coding)

分享到:
评论

相关推荐

    Emmet (Zen Coding) 适用Dreamweaver各版本

    Emmet(原名Zen Coding)是一款强大的前端开发工具,它极大地提升了HTML和CSS代码的编写效率,尤其在处理大量结构化HTML元素时。Emmet最初由捷克开发者Dmitry Polischuk创建,现已成为Web开发者的必备利器之一。这款...

    全栈开发必备的10款 Sublime Text 插件 - WEB开发者1

    4. **Emmet**:Emmet 曾名为Zen Coding,是前端开发者编写HTML和CSS时的神器。它支持快速输入和扩展语法,只需输入少量缩写,就能自动生成完整的HTML结构,极大提升了HTML和CSS的编写速度。 5. **AllAutocomplete**...

    Dreamweaver cs6插件

    Emmet(前身为Zen Coding)是前端开发者必备的一款神器,尤其对于HTML和CSS编码来说,它的存在极大地提升了编写效率。Emmet支持快速输入和扩展缩写,通过简单的语法,可以快速生成复杂的HTML结构。例如,输入"div&gt;ul...

    eclipse好用的插件打包

    2. **Emmet**:原名Zen Coding,是前端开发者必备的代码编写工具。在Eclipse中安装Emmet插件后,可以通过简洁的缩写快速生成HTML和CSS代码,大大提高编码效率。例如,输入"div&gt;ul&gt;li*5&gt;a",按Tab键就能生成对应的...

    我的sublime插件

    3. ** Emmet**:前身是ZenCoding,是前端开发者必备的HTML/CSS代码快速编写工具,它支持缩写展开、自动完成和模板等功能,极大地提高了HTML和CSS的编写效率。 4. **SideBarEnhancements**:增强侧边栏的功能,如...

Global site tag (gtag.js) - Google Analytics