Emmet代码生成神器

Posted on 2016-10-09 Edited on 2021-03-11 In 大钱端

Emmet 的前身是 Zen Coding，它提供了一套简单的语法来帮助前端开发快速地生成代码。最近有空学习了一下，这里做下记录。

体验一把

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="logo">
        <ul class="list">
            <li class="item"><a href="http://www.baidu.com">Baidu 1</a></li>
            <li class="item"><a href="http://www.baidu.com">Baidu 2</a></li>
            <li class="item"><a href="http://www.baidu.com">Baidu 3</a></li>
            <li class="item"><a href="http://www.baidu.com">Baidu 4</a></li>
            <li class="item"><a href="http://www.baidu.com">Baidu 5</a></li>
        </ul>
    </div>
</body>
</html>

如何写出上面这段代码？使用 Emmet，只要下面这一行

1	!>.logo>ul.list>li.item*5>a[href="http://www.baidu.com"]{Baidu $}

把这段指令 copy 到 VSCode 中，光标移动到指令的末尾后按下 tab 就可以生成出以上的代码了，是不是很方便。

HTML 快速编写指令

! 和 html 指令

快速生成 Html 文档结构

! 或 html:5 可以生成 html5 版本的文档结构。
html:xt 可以生成 xhtml 版本的文档结构。
html:4s 可以生成标准的 html4.0 版本文档结构。

选择器指令

. 指明要生成的 class 名称。
# 指明要生成的 id 名称。
Tag 用 Tag 表示标签名称，直接使用 Tag+Tab 就可以生成对应的标签代码。

生成一个 div

div

生成一个 id 为 page1 的 div 标签

div#page1

生成一个 class 为 item 的 li 标签

li#item

Emmet 默认的标签是 div，如果我们不给出标签名称的话就默认生成 div 标签。生成 id 为 container 的 div 标签，我们只需要编写下面指令：
div#container 或者 #container。
或者生成 class 为 page 的标签：
div.page 或 .page

隐式标签

隐式标签表示 Emmet 可以省略某些标签名，例如，声明一个带类的div，只需输入.item，就会生成

。另外，Emmet 还会根据父标签进行判定，例如，在中输入ul>.item*5，就可以生成：

<ul>
	<li class="item"></li>
	<li class="item"></li>
	<li class="item"></li>
	<li class="item"></li>
	<li class="item"></li>
</ul>

下面是所有的隐式标签名称：
li：用于 ul 和 ol 中
tr：用于 table、tbody、thead 和 tfoot 中
td：用于 tr 中
option：用于 select 和 optgroup 中
div：除以上之外位置的默认标签

设置属性 [attr=value]

给 a 标签设置 href 属性

1	a[href=http://www.qq.com]

给 div 添加自定义属性

1	div[data-type=json]

设置标签内容 {}

设置 p 标签的内容

1	p{Hello World!}

兄弟指令 +

使用 + 可以生成几个同级别的指令，比如生成两个同级别的 p 标签

1	p.text1+p.text2

生成的代码如下

1 2	<p class="text1"></p> <p class="text2"></p>

后代指令 >

使用 > 可以生成嵌套的子标签。比如在 ul 中嵌入 li

ul>li

生成的代码如下

1
2
3

<ul>
    <li></li>
</ul>

向上一级指令 ^

使用指令 ^ 可以使当前的指令所生成的代码的层级向上提升一级，比如当我们使用指令

div>ul

的时候，生成的代码如下：

1
2
3

<div>
    <ul></ul>
</div>

这时候指令生成的代码级别是 div 的下一级，这是我们又想在 div 的同级别插入一个 div，就需要使用 ^ 指令嵌套层级向上移一级

1	div>ul^div

的时候，生成的代码如下：

<div>
    <ul></ul>
</div>
<div></div>

可以多次连续使用这个指令来调整指令作用的级别。

分组指令 ()

用括号进行分组，表示一个代码块，分组内部的嵌套和层级关系和分组外部无关，例如：

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

生成了如下代码

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

重复 *

很简单，重复生成一个类型的标签

1	ul.list>li.item*5

生成的代码如下：

<ul class="list">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>

编号

使用 $ 可以获取当前重复元素的编号

1	ul.list>li.item*5>a{item $}

生成代码如下

<ul class="list">
    <li class="item"><a href="">item 1</a></li>
    <li class="item"><a href="">item 2</a></li>
    <li class="item"><a href="">item 3</a></li>
    <li class="item"><a href="">item 4</a></li>
    <li class="item"><a href="">item 5</a></li>
</ul>

还可以通过使用 @ 来指定开始的序号

1	ul.list>li.item*5>a{item $@2}

然后序号是这样的

<ul class="list">
    <li class="item"><a href="">item 2</a></li>
    <li class="item"><a href="">item 3</a></li>
    <li class="item"><a href="">item 4</a></li>
    <li class="item"><a href="">item 5</a></li>
    <li class="item"><a href="">item 6</a></li>
</ul>

倒序，也可以

1	ul.list>li.item*5>a{item $@-2}

倒序输出

<ul class="list">
    <li class="item"><a href="">item 6</a></li>
    <li class="item"><a href="">item 5</a></li>
    <li class="item"><a href="">item 4</a></li>
    <li class="item"><a href="">item 3</a></li>
    <li class="item"><a href="">item 2</a></li>
</ul>

HTML 简写规则总结

　　1. E 代表HTML标签。
　　2. E#id 代表id属性。
　　3. E.class 代表class属性。
　　4. E[attr=foo] 代表某一个特定属性。
　　5. E{foo} 代表标签包含的内容是foo。
　　6. E>N 代表N是E的子元素。
　　7. E+N 代表N是E的同级元素。
　　8. E^N 代表N是E的上级元素。

注意
不能 Emmet 指令中使用空格

关于 CSS 的简写，后面再更。