前端开发利器 - Emmet (Zen Coding)

​ 1、Emmet基础介绍 

Emmet（原名：Zen Coding）是前端开发快速输入代码一种方式，能帮助你使用CSS语法来提高输入HTML代码的速度，免去了大家输入重新性标签的过程。

以前被称作为Zen Coding，作为文本编辑器的插件存在，可以帮助您快速编写HTML和CSS代码，从而加速Web前端开发。

早在2009年，Sergey Chikuyonok写过一篇文章，提出编写HTML和CSS的新方法。这一革命性的插件指的就是Zen Coding，经过很多开发者多年来的努力与帮助，现在已经非常的完善和实用。也就是今天所说的Emmet插件。

基本使用方式， 输入Emmet命令后，请按"tab"键，自动生成对应代码，如下：

1.!<按tab键>

将生成HTML5代码框架，如下：

 

如果输入

ul>li{bullet$$}*10<按tab键>

将生成如下HTML代码：

 

 

• bullet01
• bullet02
• bullet03
• bullet04
• bullet05

 

• bullet06
• bullet07
• bullet08
• bullet09
• bullet10
 

是不是非常快速和便捷？

Emmet只是文本编辑器一个插件，要想让他发挥应用的功能，就得将其安装到你喜欢的文本编辑器中。到目前为止，很多流行的文本编辑器都支持Emment插件，也就是说很多流行的文本编辑器都可以安装这款插件，还有其它在线编辑器，例如，GBdebug ，及其其它第三方插件都有广泛的支持

文本编辑器支持：

•Sublime Text

•Eclipse

•TextMate

•Coda

•Espresso

•Chocolat

•Notepad++

•Brackets

•NetBeans

•Adobe Dreamweaver

在线编辑器支持

•GBdebug

•JSFiddle

•JS Bin

•CodePen

•ICEcoder

•Divshot

•Codio

第三方插件

•SynWrite

•WebStorm

•PhpStorm

•Vim

•HTML-Kit

•HippoEDIT

•CodeLobster PHP Edition

•TinyMCE

2、Emmet生成HTML标签元素 

使用Emmet可以快速的生成HTML标签，而无需自己费力的手动输入，输入如下body字符，然后按tab键：

body

生成如下代码：

其实Emmet没有预定义的标签，你输入任何字符，都可以生成对应的标签，如下：

foo

生成结果如下：

3、Emmet生成子元素 

在Emmet中，我们使用">"号来生成子元素，使用方法如下：

div>ul>li

生成的子元素如下：

 

 

4、Emmet生成同级元素

在Emmet中，使用“+”来生成同级元素，如下：

div+p+dq

生成如下连续的元素：

5、Emmet返回父级元素 

在Emmet中，有时候需要返回父层元素来添加新的元素，可以使用"^"符号来实现， 如下：

div>p>span+em^bq

生成HTML元素，如下：

可以看到使用"^"符号可以返回一层父级元素。那么如果要返回两层父级元素呢？

div>p>span+em^^bq

生成如下代码：

6、 Emmet生成重复的元素 

Emmet中生成重复的元素非常方便，如下：

ul>li*10

生成代码如下：

通过指定"*"符号后面的数字我们可以快速生成重复的HTML元素

7、Emmet的组合操作符 

使用Emmet的组合操作符号"()"，可以生成复杂的组合，如下：

div>(header>ul>li*2>a)+footer>p

生成代码如下：

 

10.  

11.

输入Emmet命令：

(div>dl>(dt+dd)*3)+footer>p

得到如下：

 

小提示：虽然你可以使用Emmet命令生成整个复杂的HTML文档，但不推荐大家这样使用

8、Emmet属性操作符之ID和CLASS 

和CSS的语法非常类似，Emmet使用#和.来生成ID和CLASS属性，如下：

div#header+div.page+div#footer.class1.class2.class3

生成代码如下：

9、Emmet属性操作符之自定义属性 

Emmet使用中括号来自定义需要的属性，输入如下命令：

td[title="Hello world!" colspan=3]

生成代码如下：

•你可以在中括号中设置任意多的属性

•你不需要指定属性值: td[colspan title] 对应值 会被空字符替换

•属性值可以包含在单引号或者双引号中

•如果不包含空格的话，你不需要使用引号: td[title=hello colspan=3] 这样也同样好使

10、Emmet自动生成编号 

Emmet支持自动生成连续的编号，使用"$"符号我们可以快速生成相关属性的编号，如下：

ul>li.item$*10

生成代码如下：

 

如果需要生成多位的数字编号，可以组合使用多个"$"符号，如下：

ul>li.item$$$*5

生成代码如下：

11、Emmet生成反向编号元素和指定编号开始的元素

Emmet中如果需要指定反向编号，可以使用"$@-"符号，如下：

ul>li.item$@-*5

生成代码如下：

如果要从指定的数字开始编号，可以使用如下：

ul>li.item$@3*5

生成代码如下：

如果要同时反向和指定数字编号，使用如下代码：

ul>li$@-3*5

生成代码如下：

12、Emmet生成标签内容 

Emmet使用"{}"来定义标签内包含的内容，如下：

a{更多信息}

生成结果：

更多信息

如果你输入:

a>{更多信息}

可以看到生成结果一样。

但是不都是这样，如果你输入：

a{click}+b{here}

将得到如下代码：

click

click

如果输入：

a>{click}+b{here}

将得到如下代码：

clickclick

这是因为定义的父层次不一致，大家需要特别注意一下。

13、Emmet使用的格式相关注意事项 

Emmet中需要注意不要添加额外的空格，如下命令可以正常工作：

(header>ul.nav>li*5)+footer

但是这行不能正常工作

(header > ul.nav > li*5) + footer

因为引入了多余的空格，以下是官方的说明：

•Emmet缩写命令不是模板语言，不是可读的，必须快速的扩展和可移除

•你不需要输入太复杂的缩写命令。复杂的命令导致更多的错误并且会减慢输入速度，尽量使用简单明了的缩写命令

14、Emmet标签模糊输入 

Emmet的缩写命令中，不需要输入所有的标签，你可以使用更加简单的命令，如下：

.wrap>.content

生成结果和如下完整输入一致：

div.wrap>div.content

以下是说明：

•ul 和 ol中可以不指定li元素

•table, tbody, thead和tfoot中可以不指定tr元素

•tr中可以不指定td元素

•select和optgroup中可以不指定option元素

以下命令都是等价的：

15、Emmet生成占位文字（Dummy文字）

大家在开发中进场需要生成一个页面内容用来模拟真实网页内容，通常英文环境中我们使用如下Dummy文本：

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?

在Emmet中可以快速生成类似上面的文字，如下：

lorem

生成代码如下：

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis hic dolorem recusandae culpa officiis ullam doloribus aut voluptatibus. Dicta aliquam dolorum nesciunt at adipisci dignissimos vitae iure perspiciatis modi illum.

或者使用：

lipsum

也可以。

如果需要生成重复的Dummy文字，可以使用如下命令：

p*4>lorem

生成代码如下：

Lorem ipsum dolor sit amet, consectetur adipisicing elit. 

Aperiam perferendis illo est commodi neque et dolores ex ullam totam 

molestias itaque blanditiis id quasi ab error distinctio fuga ducimus? 

Nobis.

Fuga ipsum quaerat quam eligendi nulla 

provident tenetur veritatis iusto repellendus est cumque sit odio 

praesentium voluptatem natus maiores laudantium expedita nobis eveniet 

dignissimos voluptates ex soluta cum tempora optio.

Porro

earum eius debitis fugit distinctio nesciunt non iste natus neque 

quibusdam recusandae tenetur saepe voluptates quis nam quos modi 

deserunt at facilis autem. Deleniti repellendus dicta ratione aperiam 

itaque.

Laudantium optio doloremque minus corrupti

magni magnam veniam soluta praesentium repudiandae voluptate quae 

suscipit nam at harum quis molestiae voluptatibus quod accusantium. 

Culpa nam in facere cumque enim at eius.

并且支持模糊输入，如下：

ul>lorem25.item*3

生成代码如下：

• Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo ab voluptates velit beatae mollitia ratione voluptate magni ullam aperiam veniam dolorum amet tempore illo molestias.
• Earum ullam aut voluptatem dolores officiis quam dolorem rem dignissimos veniam reiciendis libero assumenda atque vel minima ea quo dolorum nihil ipsum tempore aperiam placeat.
• Nihil ab eius rem. Delectus soluta debitis laboriosam laudantium fugit voluptatem esse eius nam harum minima similique nihil eveniet deserunt magni vel aut obcaecati at.

16、Emmet生成针对不同浏览器带有特定前缀的CSS 

Emmet中可以自动添加针对不同浏览器的CSS前缀定义，如下：

-bdrs

生成代码如下：

-webkit-border-radius: ;

-moz-border-radius: ;

border-radius: ;

当然，如果你不输入"-"符号的话，Emmet针对特定的CSS定义，也会添加对应前缀：

@kf

生成代码如下：

@-webkit-keyframes identifier {

from {  }

to {  }

}

@-o-keyframes identifier {

from {  }

to {  }

}

@-moz-keyframes identifier {

from {  }

to {  }

}

@keyframes identifier {

from {  }

to {  }

}

以上缩写命令和"-@kf"得到的结果一样。

但是，如果标准里包含了一个新的CSS定义，例如：chrorme-foo的话，我们可以使用"-"符号来生成针对不同浏览器的代码，如下：

 -chrorme-foo

生成代码如下：

-webkit-chrorme-foo: ;

-moz-chrorme-foo: ;

-ms-chrorme-foo: ;

-o-chrorme-foo: ;

chrorme-foo: ;

是不是相当的方便

17、Emmet快速生成CSS渐变代码 

CSS3中的渐变代码书写比较麻烦，通常我们使用开发工具或编辑器里的一些插件来帮助生成。

Emmet包含了一个内置的渐变生成器，在指定元素的CSS定义中我们可以输入如下缩写命令：

lg(left, #CCC 30%, orange)

生成代码如下：

  background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.3, #CCC), to(orange));

  background-image: -webkit-linear-gradient(left, #CCC 30%, orange);

  background-image: -moz-linear-gradient(left, #CCC 30%, orange);

 background-image: -o-linear-gradient(left, #CCC 30%, orange);

  background-image: linear-gradient(left, #CCC 30%, orange);

或者我们可以针对特定的CSS属性来生成渐变代码，如下：

image-border: lg(left, #CCC 50%, orange)

生成代码如下：

  -webkit-border-image:-webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #ccc), to(orange));

  -webkit-border-image:-webkit-linear-gradient(left, #ccc 50%, orange);

  -moz-border-image:-moz-linear-gradient(left, #ccc 50%, orange);

  -o-border-image:-o-linear-gradient(left, #ccc 50%, orange);

  border-image:linear-gradient(left, #ccc 50%, orange);

是不是非常方便

18、Emmet模糊搜索快速生成CSS代码 

书写CSS代码是一件枯燥乏味的过程，使用Emmet的模糊搜索能够帮助你简化整个过程，如下：

ov:h

生成代码：

overflow:hidden

输入如下命令：

d:i

生成代码：

display:inline;

以上Emmet缩写命令中，我们可以看到，不需要输入完整的CSS属性，即可生成对应的CSS属性， Emmet会根据你输入的命令，找到最接近匹配的CSS属性定义，更多的命令说明，请参考Emmet Cheat Sheet。