Emmet:HTML/CSS代码快速编写神器
Created at 2016-03-14 Updated at 2017-01-06 Category Front-End
- 前端开发必备!Emmet使用手册
- Emmet的前身是大名鼎鼎的
Zen coding
,如果你从事Web
前端开发的话,对该插件一定不会陌生。它使用仿CSS
选择器的语法来生成代码,大大提高了HTML/CSS
代码编写的速度,比如下面的演示:
- 该插件已经改名为Emmet。但Emmet不只改名,还带来了一些新特性。
快速编写HTML代码
初始化
- HTML文档需要包含一些固定的标签,比如
<html>
、<head>
、<body>
等,现在你只需要1秒钟就可以输入这些标签。比如输入“!”
或“html:5”
,然后按Tab
键:
html:5
或!:用于HTML5
文档类型html:xt
:用于XHTML过渡文档类型html:4s
:用于HTML4严格文档类型
- 连续输入元素名称和
ID
,Emmet
会自动为你补全,比如输入p#foo
:
- 连续输入类和
id
,比如p.bar#foo
,会自动生成:Html
代码<p class="bar" id="foo"></p>
下面来看看如何定义HTML元素的内容和属性。你可以通过输入h1{foo}和a[href=#],就可以自动生成如下代码:
<h1>foo</h1>
<a href="#"></a>
嵌套
- 现在你只需要1行代码就可以实现标签的嵌套。
>
:子元素符号,表示嵌套的元素+
:同级标签符号^
:可以使该符号前的标签提升一行
分组
- 你可以通过嵌套和括号来快速生成一些代码块,比如输入
(.foo>h1)+(.bar>h2)
,会自动生成如下代码:
|
|
隐式标签
声明一个带类的标签,只需输入
div.item
,就会生成<div class="item"></div>
在过去版本中,可以省略掉div,即输入
.item
即可生成<div class="item"></div>
。现在如果只输入.item
,则Emmet
会根据父标签进行判定。比如在<ul>
中输入.item
,就会生成<li class="item"></li>
。
- 下面是所有的隐式标签名称:
li
:用于ul
和ol
中tr
:用于table、tbody、thead和tfoot中td
:用于tr
中option
:用于select
和optgroup
中
定义多个元素
- 要定义多个元素,可以使用
*
符号。比如,ul>li*3
可以生成如下代码:
|
|
定义多个带属性的元素
- 如果输入
ul>li.item$*3
,将会生成如下代码:
|
|
CSS缩写
值
- 比如要定义元素的宽度,只需输入
w100
,即可生成width: 100px;
- 除了
px
,也可以生成其他单位,比如输入h10p+m5e
,结果如下:height: 10%
;margin: 5em
;
- 单位别名列表:
p
表示%
e
表示em
x
表示ex
附加属性
- 可能你之前已经了解了一些缩写,比如
@f
,可以生成:
|
|
一些其他的属性,比如background-image
、border-radius
、font
、@font-face
,text-outline
、text-shadow
等额外的选项,可以通过“+”
符号来生成,比如输入@f+
,将生成:
|
|
模糊匹配
如果有些缩写你拿不准,
Emmet
会根据你的输入内容匹配最接近的语法,比如输入ov:h
、ov-h
、ov
h和oh
,生成的代码是相同的:overflow: hidden
;
供应商前缀
- 如果输入非
W3C
标准的CSS
属性,Emmet
会自动加上供应商前缀,比如输入trs
,则会生成:
|
|
- 你也可以在任意属性前加上
“-”
符号,也可以为该属性加上前缀。比如输入-super-foo
:
|
|
- 如果不希望加上所有前缀,可以使用缩写来指定,比如
-wm-trf
表示只加上-webkit
和-moz
前缀:
|
|
前缀缩写如下:
w
表示-webkit-
m
表示-moz-
s
表示-ms-
o
表示-o-
渐变
- 输入
lg(left, #fff 50%, #000)
,会生成如下代码:
|
|
附加功能
生成Lorem ipsum文本
- 引用 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero delectus.
定制
- 你还可以定制Emmet插件:
- 添加新缩写或更新现有缩写,可修改
[snippets.json][16]
文件 - 更改
Emmet
过滤器和操作的行为,可修改[preferences.json][17]
文件 - 定义如何生成
HTML
或XML
代码,可修改[syntaxProfiles.json][18]
文件
- 添加新缩写或更新现有缩写,可修改
针对不同编辑器的插件*
- Emmet支持的编辑器如下(链接为针对该编辑器的
Emmet
插件):