前端开发利器 Emmet 介绍与基础语法教程

在前端开发的过程中，编写 HTML、CSS 代码始终占据了很大的工作比例。特别是手动编写 HTML 代码，效率特别低下，因为需要敲打各种“尖括号”、闭合标签等。而现在 Emmet 就是为了提高代码编写的效率而诞生的，它提供了一种非常简练的语法规则，然后立刻生成对应的 HTML 结构或者 CSS 代码，同时还有多种实用的功能帮助进行前端开发。

你可能听说过一款强大的功能相似的工具：Zen Coding，那个比较老了，而现在的 Emmet 则是 Zen Coding 的升级版，由 Zen Coding 的原作者进行开发等。 Emmet 严格意义上来说，并不是一款软件或者工具，它是一款编辑器插件，必须要基于某个编辑器使用。目前它支持如下编辑器：

Sublime Text 2
TextMate 1.x
Eclipse/Aptana
Coda 1.6 and 2.x
Espresso
Chocolat (可以通过 “Install Mixin” 对话框安装)
Komodo Edit/IDE ( Tools → Add-ons)
Notepad++
PSPad
<textarea>
CodeMirror2/3
Brackets

在上面列表点击你目前使用的编辑器，就可以获得对应的插件文件，安装之后就可以使用 Emmet 的相关功能了。由于 Sublime text 2 是目前最好最强大的前端开发代码编辑器，所以本文就以 Sublime text 2 为例，讲解 Emmet 的安装、基础语法。

在 Sublime text 2 中安装 Emmet

Sbulime text 2 安装插件肯定要通过 Package Control 这个插件了，如果你还没有安装这个插件，抓紧先去安装一下吧。安装完成之后，我们摁下“shift + ctrl + p”呼出面板，输入“pci”即可锁定“Package Control：Install Package”这个功能，回车之后就可以看到一个列表，我们继续输入“emmet”即可找到这个插件，回车之后等待一会就安装完成了。

 

Visual Studio中的 Emmet 

在visual studio 中的插件管理中搜索Web Essentials这样一个插件，直接安装就行了。

开始使用 Emmet

Emmet 可以快速的编写 HTML 和 CSS 以及实现其他的功能。它根据当前文件的“语言”来判断要使用 HTML 语法还是 CSS 语法来解析。例如当前文件的后缀为 .html 那 Sublime text 2 就会用 HTML 的方式来解析高亮这个文件，Emmet 也会根据 HTML 的语法把你输入的指令编译成 HTML 结构。如果是在一个 .c 的 C语言 文件中，你根据 Emmet 的语法编写出来的指令，是不会被编译的。

此外，在没有后缀的文件中，你可以摁下“shift + ctrl + p”呼出面板，输入“seth”就可以选择当前文档是使用 HTML 的模式还是其他编程语言的模式来解释。下面就是一条 Emmet 的指令：

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

我们把它复制到 Sublime text 2 中已经打开的 HTML 文件中，这时候敲击一下 TAB 键，你就会发现这行指令变成了下面的 HTML 结构：

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

怎么样？很神奇吧，仅仅写一行代码，就可以生成这么一个复杂的 HTML 结构，而且还可以声称对应的 class 、id 和内容。这行指令你现在可能还看不懂，下面会详细讲解语法，你现在只需要知道 Emmet 的工作流程：打开 HTML 或 CSS 文件->按语法编写指令->摁下 TAB 键->生成！

Emmet 生成 HTML 结构基础语法

生成 HTML 文档初始结构 HTML 文档的初始结构，就是包括 doctype、html、head、body 以及 meta 等内容。你只需要输入一个 “!” 就可