前端开发工具Emmet的介绍

曾经也为写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 2 - 性感无比的代码编辑器！

在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代码，所以稍微了解了就能看明白和如果使用。

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

[slidenormal borderleft="4px solid #ddd" color="#000"]再按Tab键你会看到它神奇的效果，得到的HTML代码是：[/slidenormal]

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

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

得到的CSS代码是：

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

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

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

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