[![前端开发工具Emmet的介绍](https://pic.salongweb.com/2014/02/emmet.jpg)](https://pic.salongweb.com/2014/02/emmet.jpg)

曾经也为写HTML/CSS代码而烦恼过，不愿再写下去，感觉很烦琐，写那么多的尖括号，用的标签都是在重复写，而且绝大多数标题都需要闭合标签，再多几个无序列表就更头疼。

如果在编写代码时可以简写这些标签，符号，提高我们在写HTML/CSS代码时的效率，这一定是件幸福的事。而有了Emmet，前端开发人员都会比以前更幸福。

Emmet，一个强大的插件，可以为我们解决这些问题，是前端开发人员必备的工具包。可以在许多流行的文本编辑器中安装使用，大大提高了编写HTML和CSS代码的工作效率。

Emmet是用纯JavaScript编写的，是一款跨平台的强大HTML/CSS代码编辑插件，超高速的完成HTML/CSS的开发。

最初知道有这样神奇的插件是寻找Sublime Text插件时，知道Zen Coding，一个可以快速编写HTML/CSS代码的工具，看到演示效果，只有用神奇来表达，现在有了Emmet，而且是在Zen Coding基础上再次开发，功能各方面肯定是更加强大。

下面就在Sublime Text和Notepad++这两款编辑器中安装，一些代码编写还是以Sublime Text为例（推荐大家使用Sublime Text编辑器，用了你肯定会喜欢，而Notepad++是相当好的开源文本编辑器，舍不得删除。）

**Emmet的安装：**

**1、在Sublime Text安装：**

没有用过Sublime Text编辑器的朋友可以先到网上搜索一下，有很多相关的教程，个人相当推荐的一款跨平台的编辑器。

在Sublime Text中按“Ctrl+Shift+p”快捷键或在菜单-工具中打开“命令面板”，输入：Install Package (安装扩展)后回车，弹出新的窗口，再查找“Emmet”确定安装：

**2、在Notepad++安装：**

打开菜单：插件-Plugin Manager-Show Plugin Manager面板，找到“Emmet”勾选后，点击“Install”，中途会弹窗提示需要安装或更新文件，确定就OK。

用Emmet编写时需要再转换成HTML/CSS代码，而Sublime Text和Notepad++的快捷键是不一样，分别是：Tab和Ctrl+Alt+Enter。

**Emmet快速编写HTML/CSS：**

缩写是Emmet的核心，Emmet中特殊的表达式在运行时解析和转化为结构化代码块，缩写的语法看起来就是CSS选择器和一些特定的HTML代码，所以稍微了解了就能看明白和如果使用。

**我们先举个例，在编辑器中输入：**

1. \#page>div.logo+ul#navigation>li\*5>a{Item $}

再按Tab键你会看到它神奇的效果，得到的HTML代码是：

1. <div id=”page”>
2. <div class=”logo”></div>
3. <li><a href=””>Item 1</a></li>
4. <li><a href=””>Item 2</a></li>
5. <li><a href=””>Item 3</a></li>
6. <li><a href=””>Item 4</a></li>
7. <li><a href=””>Item 5</a></li>
8. </ul>
9. </div>

神奇吧，仅需一行简单的代码，就可以生成完美的HTML代码结构，对应的class、id都写好了，如果不用Emmet编写，估计你也会有点头疼。

**而编写CSS也一样的让人惊叹，比如：**

1. bdrs6

**得到的CSS代码是：**

1. -webkit-border-radius: 6px;
2. -moz-border-radius: 6px;
3. border-radius: 6px;

连浏览器兼容性都考虑在其中，让人爱不释手。

**其实了解了Emmet的原理，看下插件的js代码，你会更明白，而插件的核心是缩写，所有的HTML/CSS标签缩写都存储在js文件的代码片段中，例如下面的js文件中一段代码：**

1. {
2. “html”: {
3. “abbreviations”: {
4. “a”: “<a href=\\”\\”>”,
5. “link”: “<link rel=\\”stylesheet\\” href=\\”\\” />”
6. …
7. },
8. “snippets”: {
9. “cc:ie6”: “<!–\[if lte IE 6\]>\\n\\t${child}|\\n<!\[endif\]–>”
10. …
11. }
12. },
13. 
14. “css”: {
15. …
16. }
17. }

**基本的思路：打开/新建 HTML/CSS 文件，按照基本的语法编写Emmet代码，再按Tab键生成HTML/CSS代码。**

按Tab键生成HTML/CSS代码时需要光标停靠在Emmet代码的后面，不能有空格，Emmet代码之前也不能有空格，不然只会生成一个tab制表符。如果光标在Emmet代码内部任意位置，按Tab键只会生成光标前面的代码，而后面的Emmet代码还是原样，跟随在生成的HTML/CSS代码后面。

\[musicbox\]自从Emmet后，在网站开发效率上有相当大的提高，Emmet很强大，后期还有三篇文章来介绍Emmet。\[/musicbox\]