Emmet插件的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，比如下面的演示：
该插件已经改名为Emmet。但Emmet不只改名，还带来了一些新特性。本文就来直观地演示给你。
一、快速编写HTML代码
1. 初始化
HTML文档需要包含一些固定的标签，比如、
2. 轻松添加类、id、文本和属性
连续输入元素名称和ID，Emmet会自动为你补全，比如输入p#foo：
连续输入类和id，比如p.bar#foo，会自动生成：
Html代码
下面来看看如何定义HTML元素的内容和属性。你可以通过输入h1{foo}和a[href=#]，就可以自动生成如下代码：
Html代码
3. 嵌套
现在你只需要1行代码就可以实现标签的嵌套。
效果如下图所示：
4. 分组
你可以通过嵌套和括号来快速生成一些代码块，比如输入(.foo>h1)+(.bar>h2)，会自动生成如下代码：
Html代码
5. 隐式标签
声明一个带类的标签，只需输入div.item，就会生成
The following are all implicit tag names:
6. Define multiple elements
To define multiple elements, you can use the * symbol. For example, ul>li*3 can generate the following code:
Html code
Css code
width: 100px;
In addition to px, other units can also be generated, such as inputting h10p m5e, the result is as follows:
height: 10%;
p means %
e means em
px or no unit can be expressed as px // Added by Kerita
2. Additional attributes
Css code
Some other attributes, such as background-image, border-radius, Additional options such as font, @font-face, text-outline, text-shadow, etc. can be generated through the " " symbol. For example, entering @f will generate:
Css code
@font-face {
url('FileName.svg#FontName') format('svg');
font-style: normal;
3. Fuzzy matching
If you are not sure about some abbreviations, Emmet will match the closest syntax based on your input, such as entering ov: h, ov-h, ovh and oh, the generated code is the same:
Css code
Css code
-webkit-transform: ; -moz-transform: ;
-ms-transform: ;
transform: ; " symbol, you can also prefix the attribute. For example, enter -super-foo:
Css code
If you do not want to add all prefixes, you can use an abbreviation to specify, for example, -wm-trf means only adding -webkit and -moz prefixes:
Css code
-webkit-transform: ;
-moz-transform: ;
s means -ms -
o means -o-
5. Gradient
Input lg(left, # fff 50%, #000), the following code will be generated:
background-image: -webkit-linear-gradient(left, # fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
3. Additional functions
Generate Lorem ipsum text
Lorem ipsum refers to a Latin article commonly used in the field of typesetting design. The main purpose is to test the effect of the article or text in different fonts and layouts. With Emmet, you can generate these words simply by typing lorem or lipsum. You can also specify the number of characters, such as lorem10, which will generate:
You can also customize the Emmet plug-in:
To add a new abbreviation or update an existing abbreviation, modify the snippets.json file
To change the behavior of Emmet filters and operations, modify the preferences.json file to define how HTML is generated Or XML code, you can modify the syntaxProfiles.json file
5. Plug-ins for different editors
Sublime Text 2
TextMate 1.x
Eclipse/Aptana
Coda 1.6 and 2.x
Espresso
Chocolat (added through the "Install Mixin" dialog box)
