如果你从事前端开发或者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. [转]SQL Server建立应用程序安全性和程序角色

    转自:http://dev.yesky.com/450/7619450.shtml 2007-10-22 14:00 来源:论坛整理 作者:luolina 责任编辑:幽灵·yesky Microsof ...

  2. crontab 指定执行用户

    linux下可以通过配置crontab来定时执行任务,执行体可以是一条系统命令或自己写的一个脚本,同时可以指派用户来执行.配置crontab有两种方法.方法1.使用crontab命令,例如添加一个新的 ...

  3. 淘宝(taobao)HSF框架

    一.背景 随着网站访问量增加,仅仅靠增加机器已不能满足系统的要求,于是需要对应用系统进行垂直拆分和水平拆分.在拆分之后,各个被拆分的模块如何通信?如何保证 性能?如何保证各个应用都以同样的方式交互?这 ...

  4. DML、DDL、DCL区别

    1.DML:数据操纵语言.执行完需要提交,有回滚. select.insert.update.delete.call explain plan :Oracle RDBMS执行每一条SQL语句,都必须经 ...

  5. 小米2S 连接Ubuntu Android Studio

    1. 首先打开手机上的开发者选项,USB调试.拨号:*#*#717717#*#*  ,手机会以Toast形式出现“……enable”字样.再次拨号可disable. 2. Ubuntu安装mtpfs: ...

  6. 荣耀3X畅玩版狙击红米note!

    华为与小米的战争史,可以追溯到 红米 799,华为独立初荣耀品牌推出荣耀3C,定价798,就是比你少一快; 小米3 定价1999,华为出荣耀3X,定价1980; 最近的红米Note,标配版定价799, ...

  7. LintCode 字符串比较

    比较两个字符串A和B,确定A中是否包含B中所有的字符.字符串A和B中的字符都是大写字母: 给出 A = "ABCD" B = "AABC", 返回 false ...

  8. 【mongoDB基础篇①】安装与常用操作语句

    简述 mongoDB与redis同为noSql数据库,但是redis为kv数据库(key/value),而mongoDB为文档型数据库存储的是文档(Bson->json的二进制化).内部执行引擎 ...

  9. 我30天在Stack Overflow问答网站上回答问题的感受

    想法的萌芽 如果非要总结下我多年来是如何使用Stack Overflow的话,我的答案就是:打开网页,搜索问题,查看Stack Overflow的搜索结果,参考答案,最后再关掉网页. 我的生活已经离不 ...

  10. Hibernate逍遥游记-第13章 映射实体关联关系-003单向多对多

    0. 1. drop database if exists SAMPLEDB; create database SAMPLEDB; use SAMPLEDB; create table MONKEYS ...