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

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

和一般的编辑器中使用的“代码片段”概念不太一样,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 作为插件可以支持如下的编辑器:

  • Eclipse/Aptana
  • Sublime Text 2
  • TextMate 1.x
  • Coda 1.6 and 2.x
  • Espresso
  • Komodo Edit/IDE
  • Notepad++
  • PSPad
  • <textarea>
  • CodeMirror2

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

Web开发人员必备工具-Emmet (Zen Coding)的更多相关文章

  1. 前端必备工具-Emmet (Zen Coding)

    Emmet 可以快速的编写 HTML 和 CSS,输入指令如: ul#nav>li*4>a*4 敲击一下TAB 键,就会输出: <ul id="nav"> ...

  2. Web 开发人员必备的随机 JSON 数据生成工具

    在 Web 开发中,经常会需要一些测试数据来测试接口或者功能时候正确.JSON Generator 就是这样一款生成随机 JSON 数据的在线工具,Web 开发人员必备,记得收藏和分享啊. 您可能感兴 ...

  3. Web 开发人员必备的12款 Chrome 扩展程序

    之前已经分享过一些帮助 Web 开发人员和设计师的 Chrome 扩展,这次我们继续展示一组很有用的 Chrome 应用程序.这些免费的 Chrome 应用程序可以简化您的工作流程,为了加快您的工作流 ...

  4. .Net开发人员必备工具下载

    .Net开发人员必备工具下载   本人亲测下载地址: Win8.1破解工具下载: http://pan.baidu.com/s/1eQf2UiQ 可激活版本 Windows Vista Busines ...

  5. 【特别推荐】Web 开发人员必备的经典 HTML5 教程

    对于我来说,Web 前端开发是最酷的职业之一,因为你可以用新的技术发挥,创造出一些惊人的东西.唯一的问题是,你需要跟上这个领域的发展脚步,因此,你必须不断的学习,不断的前进.本文将分享能够帮助您快速掌 ...

  6. Android开发工具综述,开发人员必备工具

    安卓开发工具汇总.开发者必备.安卓开发过程中须要用到各种工具,作为一名安卓开发者,有木有感到亚历山大,那么多工具! 今天给大家汇总了一下安卓开发工具,安卓开发者必备利器. 1.Draw 9-Patch ...

  7. 开发人员必备工具 —— JMeter 压测

    在接口开发完以后,开发人员应该学会对自己的接口先进行压测一下,虽然压测的结果并不一定准确,也不能完全反映真实情况,但是如果有问题的话多少是可以看出的,而且也可以及早做优化,做到心里有底.否则,等测试进 ...

  8. 值得 Web 开发人员收藏的20个 HTML5 实例教程

    当开始学习如何创建 Web 应用程序或网站的时候,最流行的建议之一就是阅读教程,并付诸实践.也有大量的 Web 开发的书,但光有理论没有实际行动是无用的.现在由于网络的发展,我们有很多的工具可以用于创 ...

  9. 值得 Web 开发人员收藏的16款 HTML5 工具

    HTML5 正在迅速改变创建和管理网站的方式.HTML5 在不同的领域让网页设计更强大的.快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5 开发各种网站和应用程序. ...

随机推荐

  1. Mac OS X 安装并测试 OpenCV

    1. 安装 打开官网的Linux安装OpenCV的网页,打开这个网页的目的不是按照它所提供的步骤安装OpenCV(因为你会遇到一个坑,下文会提到),而是为了安装一些依赖的包或库. 其中的pkg-con ...

  2. jsp自定义标签分析

    jsp自定义标签的优势体现在于jsp页面上面减少了java代码. jsp自定义标签有三大部分组成,首先是类继承TagSupport,实现doStartTag方法. public int doStart ...

  3. script是什么

    script是什么 scirpt就是一个命令,可以制作一份记录输出到终端的记录.对于那些想要真实记录终端会话的人来说,这很有用.该记录可以保存并在以后再打印出来. 怎么用 默认情况下,我们可以通过在终 ...

  4. 配置sql server2012属性 ms-help://MS.SQLCC.v10/MS.SQLSVR.v10.zh-CHS/s10de_5techref/html/6df812ad-4d80-4503-8a23-47719ce85624.htm

    服务与服务器是两个不同的概念,服务器是提供服务的计算机,配置服务器主要是对内存.处理器.安全性等几个方面配置.由于SQL Server 2005服务器的设置参数比较多,这里选一些比较常用的介绍. 配置 ...

  5. 如何使用 Apache ab 以及 OneAPM 进行压力测试?

    下一个 release 准备小长假后就要 go-live ,所有的测试 case 都 cover 过了,但还未进行过压力测试,有点不放心,刚好过节期间家人都回家去了,假期终于可以抽点时间压测一把. A ...

  6. C# 知识笔记

    HttpContext.Request.Form.ToString() 获取Form表单中的内容 /// <summary> /// 获取 GET 提交方式值 /// </summa ...

  7. JScrollPane与JPanel 滚动条 解决canvas的滚动条问题

    当用JScrollPane和JPanel显示图片时,需要将JPanel的PrefferedSize及时传递给JScrollPane,否则容易出现JScrollPane的滚动条无法与图片大小匹配的问题, ...

  8. Ubuntu 启动栏添加eclipse图标

    sudo gedit /usr/share/applications/eclipse.desktop [Desktop Entry] Name=Eclipse Comment=c project ma ...

  9. Ubuntu 装JDK

    我是按照这篇文章安装jdk的: http://www.cnblogs.com/bluestorm/archive/2012/05/10/2493592.html   先去 Oracle下载Linux下 ...

  10. Sina App Engine(SAE)入门教程(1)

    此教程只针对刚接触SAE的小白用户,资深码农.高手请绕道.首先还是一个经典的实例,hello sae. 创建应用 在注册完账号之后,需要到 http://sae.sina.com.cn/?m=myap ...