Emmet的高级功能与使用技巧

Emmet系列教程

• 前端开发利器Emmet的介绍
• Emmet快速编写HTML代码
• Emmet快速编写CSS样式
• Emmet快速编写CSS样式

编写好HTML和CSS代码时，我们也需要修改或添加一些内容，Emmet提供了很多非常独特的工具，可以大大提高编辑体验，下面我们挑选几个常用的功能来介绍。

萨龙龙发现在sublime text中安装的Emmet插件的快捷键与官方的演示文档中提供的快捷键不一样，这时我们就要修改Emmet快捷键或者查找在sublime text中的Emmet快捷键。

修改快捷键，打开PreFerences——Package Settings——Emmet中进行修改，只查看快捷键，比如：Match Tag Pair快捷键，打开工具中的命令面板ctrl+shift+p，输入：match就可以查看到。

本文的使用到的快捷键与官方演示中的快捷键一样。

1、展开缩写（Expand Abbreviation）Demo

这个功能在一开始介绍Emmet时就已经介绍，这是Emmet最核心的功能。

2、生成测试文本Lorem IpsumDemo

在编写HTML代码时，有时需要添加一些内容，Emmet提供了一段随机的看不懂的英文字段，作为测试数据我们就可以调用。而生成Lorem Ipsum文本也非常简单，输入lorem，按Tab键，就可以生成下面这段文字：

1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, non, minima, voluptas ducimus
2. voluptatem perspiciatis id delectus maiores saepe porro aliquam sunt pariatur eaque. Enim,
3. voluptatem nesciunt voluptate ad veritatis.

Emmet的lorem这一功能不仅仅只为生成一段文本，使用lorem默认生成30个单词的文本，可以为它指定单词的数量来随机生成一大段文本。

3、如果要生成标题呢，只需减少单词的数量，比如：lorem4将生成下面的标题：

1. Lorem ipsum dolor sit.

上面的例子只是生成单独的测试文本，与HTML标签一起编写也很简单，就像Emmet快速编写HTML代码文章中生成父子关系的代码一样：

1. h2>lorem4

将生成：

1. <h2>Lorem ipsum dolor sit.</h2>

1. p*4>lorem4

将生成：

1. <p>Lorem ipsum dolor sit.</p>
2. <p>Dolores, similique veritatis reprehenderit.</p>
3. <p>Cupiditate repudiandae numquam earum.</p>
4. <p>Atque, sequi autem praesentium?</p>

所以lorem为我们提供了强大的测试数据，提高了编写HTML代码的速度，让我们专心编写代码。

4、扩展缩写（Wrap with Abbreviation）Demo

一个非常强大的功能，在当前HTML代码的基础上添加缩写，将向外扩展代码，比如这段代码，光标在p标签上或者外部：

1. <div id="page">
2. <p>Hello world</p>
3. </div>

再按shift+ctrl+g，弹出：Enter Wrap Abbreviation（输入扩展缩写），在其中输入：

1. .wrapper>h1{Title}+.content

将得到：

1. <div id="page">
2. <div class="wrapper">
3. <h1>Title</h1>
4. <div class="content">
5. <p>Hello world</p>
6. </div>
7. </div>
8. </div>

5、把文本转换成HTML标签

当客户给我们提供了一个文本文档，把标题复制过来，比如：

1. 首页
2. 公司简介
3. 公司动态
4. 关于我们
5. 联系我们

转换成导航，选择文本，再按shift+ctrl+g，弹出：Enter Wrap Abbreviation（输入扩展缩写），在其中输入：

1. nav>ul.nav>li.nav-item$*>a

将得到：

1. <nav>
2. <ul class="nav">
3. <li class="nav-item1"><a href="">首页</a></li>
4. <li class="nav-item2"><a href="">公司简介</a></li>
5. <li class="nav-item3"><a href="">公司动态</a></li>
6. <li class="nav-item4"><a href="">关于我们</a></li>
7. <li class="nav-item5"><a href="">联系我们</a></li>
8. </ul>
9. </nav>

注意，导航中有5个菜单，这里不需要在li标签后面使用*5，只需使用单独的操作符*就可以。

6、删除文本中的列表标记

word文档中的文本很多都是列表块，比如：

1. 1.首页
2. 2.公司简介
3. 3.公司动态
4. 4.关于我们
5. 5.联系我们

在编写HTML代码又不需要，Emmet让我们可以删除文本中的标记，在上一功能的缩写的基础代码的后面添加|t就可以删除文本中的标记:

1. nav>ul.nav>li.nav-item$*>a|t

最终得到的HTML代码与上面的效果是一样的，你可以试试！

7、控制文本的输出位置

默认情况下，用Emmet把文本转换为HTML代码时，使用$#操作符Emmet可以将文本输出到多个元素中，而$#平上Emmet缩写语法中的一部分，所以得将$#放在属性值[]或文本{}操作符中。

以上面的导航文本为例，在Enter Wrap Abbreviation中输入：

1. ul>li[title=$#]*>{$#}+img[alt=$#]

将得到：

1. <ul>
2. <li title="首页">首页<img src="" alt="首页"></li>
3. <li title="公司简介">公司简介<img src="" alt="公司简介"></li>
4. <li title="公司动态">公司动态<img src="" alt="公司动态"></li>
5. <li title="关于我们">关于我们<img src="" alt="关于我们"></li>
6. <li title="联系我们">联系我们<img src="" alt="联系我们"></li>
7. </ul>

8、分解与添加标签（Split/Join Tag）Demo

光标在标签上时，按ctrl+j，可以将标签：

1. <div></div>

转换为

1. <div />

标签，反之亦然。当div中有内容时，使用这一功能一样会转换成上一标签，其中的内容也将删除，所以使用的时候我们也需要注意。

9、映射CSS属性值（Reflect CSS Value）Demo

为了浏览器的兼容性，CSS样式中有很多带有属性值的前缀样式，如果修改值，需要修改好几个处，比如：

1. div {
2. padding: 10px;
3. -webkit-transform: rotate(50deg);
4. -moz-transform: rotate(50deg);
5. -ms-transform: rotate(50deg);
6. -o-transform: rotate(50deg);
7. transform: rotate(50deg);
8. opacity: 0.7;
9. filter: alpha(opacity=70);
10. }

在Emmet中我们只需修改旋转属性值的其中一个，再按ctrl+b快捷键，其它相关的属性值也相应的改变。

10、选择匹配标签（Match Tag Pair）Demo

在我们编写HTML代码时，需要选择开始标签到闭合标签中的代码，一般我们就用鼠标框选，虽然不是太麻烦，但Emmet为我们提供了更加方便、快捷的功能，扩大与缩少选择。

在鼠标光标处按快捷键ctrl+d，将会选择光标所在标签范围内的所有内容，多次运行将扩大选择。有扩大就有缩小，快捷键：crtl+shift+d，多次运行将缩小选择范围。

11、转到匹配的标签（Go to Matching Pair）Demo

在开始标签与闭合标签中跳转，快捷键：ctrl+t。在编写大型HTML文件时，总是找不到匹配的闭合标签，Emmet提供的这一功能就可以方便的为我们在开始与闭合标签中轻松地跳转。

12、跳转到文本编辑点（Go to Edit Point）Demo

这个功能适合在标记之间、空属性和空的文章标签中进行上下跳转，比如title、a、li、href、src等等需要输入内容的标题中。上一个，下一个编辑点快捷键分别为ctrl+alt+left、ctrl+alt+right。

13、添加与删除注释（Toggle Comment）Demo

之前在添加注释时都是一个符号一个的敲出来的，真有点辛苦，也很烦。Emmet提供的注释开关功能太棒了，只需使用ctrl+/快捷键就可以添加与删除注释，不过其注释的范围是以行为单位，在HTML和CSS代码中都可以使用。

14、移除标签（Remove Tag）Demo

在一些大型的HTML代码中，有时标签嵌套的太多，通过Emmet移除标签这一功能，快速的移除多余的匹配的开始标签与闭合标签，快捷键：ctrl+k。

15、更新图片大小（Update Image Size）Demo

很多时候在编写HTML代码中的img标题与CSS样式中的background-image时，需要知道图片的宽度与高度，总是在电脑中找到图片 查看其尺寸，浪费时间又很不爽。而Emmet为我们提供这一功能，只需将光标移动到img或background-image标签上，按下ctrl+shift+u，Emmet会自动读取图片的尺寸并添加。

前提是引用的图片地址正确且存在，而且路径中不能有中文，必需是英文字符，不然把键盘敲烂也不会有反应。

16、数字递增/递减（Increment/Decrement Number）Demo

数字递增/递减，可以以0.1、1和10三个值进行递增/递减，快捷键分别是：ctrl+up/down、alt+up/down和ctrl+alt+up/down。

17、数学计算表达式（Evaluate Math Expression）Demo

有了Emmet在HTML和CSS文件中都可以进行简单的数字运算，神奇了，输入4*8再按ctrl+shift+y，Emmet能给出最终的结果。

18、将图片编译成data:URL模式（Encode/Decode Image to data:URL）Demo

data:URL模式，是利用base64编码把图片数据翻译成标准ASCII字符，在本地直接绘制图片，不是从服务器加载，减小HTTP请求，从而提高网页的加载速度。

将图片转换成data:URL模式，Emmet为我们提供的最简便、快速的方法，将光标放在img或background-image标签的图片上，按ctrl+shift+b快捷键，完美的转换。