介绍

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具:

icon

基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为“片段”。虽然片段能很好地推动你得生产力,但大多数的实现都有这样一个缺点:你必须先定义你得代码片段,并且不能再运行时进行拓展。

Emmet 把片段这个概念提高到了一个新的层次:你可以设置 CSS 形式的能够动态被解析的表达式,然后根据你所输入的缩写来得到相应的内容。Emmet 是很成熟的并且非常适用于编写 HTML/XML 和 CSS 代码的前端开发人员,但也可以用于编程语言。

使用示例

在编辑器中输入缩写代码:ul>li*5 ,然后按下拓展键(默认为 tab ),即可得到代码片段:

1
2
3
4
5
6
7
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

安装

在线编辑器的支持

  • JSFiddle
  • JS Bin
  • CodePen
  • ICEcoder
  • Divshot
  • Codio

第三方插件的支持

下面这些编辑器的插件都是由第三方开发者所提供的,所以可能并不支持所有Emmet的功能和特性。

  • SynWrite
  • WebStorm
  • PhpStorm
  • Vim
  • HTML-Kit
  • HippoEDIT
  • CodeLobster PHP Edition
  • TinyMCE

因为我也是 Sublime Text的使用者,所以下面为大家介绍一下 sublime text 中 Emmet 的安装方法:

  1. 步骤一:首先你需要为 sublime text 安装 Package Control 组件:
  • 按 Ctrl + ` 调出 sublime text 的 console
  • 粘贴以下代码到底部命令行并回车:
1
import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installedpackagespath();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())
  • 重启 Sublime Text
  • 在 Perferences->package settings中 看到 package control,则表示安装成功
  1. 步骤二:使用 Package Control 安装 Emmet 插件:
  • 按 Ctrl+Shift+P 命令板
  • 输入 install 然后选择 install Package,然后输入 emmet 找到 Emmet Css Snippets,点击就可以自动完成安装。

语法介绍