Sublime Text3安装Emmet插件及其使用

发表于
介绍Sublime Text3安装Emmet插件及其使用。

安装

直接安装

直接下载安装包解压缩到Packages目录（菜单->preferences->Browse Packages）

使用Package Control组件安装

  1. 使用快捷键command + shift + p,调出Package Control;
  2. 输入install,点击Install Package;
  3. 使用快捷键command + shift + p,输入Emmet,点击安装;
  4. 等待安装完成。

使用

初始化文档

新建一个空白的html文件时,只需要输入!，然后按下Tab键就可以生成基础代码

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

轻松添加类、id、文本和属性

  1. 输入p.#foo,按下Tab自动补全

    1
    <p id="foo"></p>

  2. 输入p.bar#foo,自动补全类和id

    1
    <p class="bar" id="foo"></p>

  3. 补全属性
    输入h1{foo},补全

    1
    <h1>foo</h1>

  4. 输入a[href=#]，补全

    1
    <a href="#"></a>

嵌套

只需要1行代码就可以实现标签的嵌套
>:子元素符号，表示嵌套的元素
+:同级标签符号
^:可以使该符号前的标签提升一行

h1+h2效果如下

1
2
<h1></h1>
<h2></h2>

p>span效果如下

1
<p><span></span></p>

p>span^p效果如下

1
2
<p><span></span></p>
<p></p>

分组

通过嵌套和括号来快速生成一些代码块
输入(.foo>h1)+(.bar>h2)，补全效果如下

1
2
3
4
5
6
<div class="foo">
	<h1></h1>
</div>
<div class="bar">
	<h2></h2>
</div>

隐式标签

声明一个带类的标签，只需输入div.item，就会生成<div class="item"></div>。在过去版本中，可以省略掉div，即输入.item即可生成<div class="item"></div>。现在如果只输入.item，则Emmet会根据父标签进行判定。比如在<ul>中输入.item，就会生成<li class="item"></li>。下面是所有的隐式标签名称： 

1
2
3
4
5
6
7
li：用于ul和ol中
tr：用于table、tbody、thead和tfoot中
td：用于tr中
option：用于select和optgroup中

效果如下：

1
2
3
4
5
6
7
<div class="item">
	<div class="item">
		<ul>
			<li class="item"></li>
		</ul>
	</div>
</div>

定义多个元素

要定义多个元素，可以使用*符号。比如，ul>li*3可以生成如下代码：

1
2
3
4
5
<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

定义多个带属性的元素

如输入ul>li.item$*3，将会生成如下代码

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

如果要从指定的数字开始编号，可以使用ul>li.item$@3*5

1
2
3
4
5
6
7
<ul>
	<li class="item3"></li>
	<li class="item4"></li>
	<li class="item5"></li>
	<li class="item6"></li>
	<li class="item7"></li>
</ul>

CSS中的缩写

简单的w100,效果如下

1
2
3
<p style="w100"></p>
补全
<p style="width: 100px;"></p>

组合使用,如h10p+m5e，效果如下

1
2
height: 10%;
margin: 5em;