Emmet的高级功能与使用技巧

Emmet文档

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

有时官方文档打开会特别慢，所以这里有一个备份：Emmet官方文档(Backup)

注：我使用的是VS Code编辑器

生成测试文本 Lorem Ipsum

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

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam atque voluptatibus consequuntur, blanditiis et praesentium, laboriosam asperiores nulla cum molestias aut pariatur, doloremque necessitatibus? Commodi amet libero molestias ullam facilis.

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

Lorem ipsum dolor sit amet consectetur.

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

<!--
输入：h2>lorem5
输出：
-->
<h2>Lorem ipsum dolor sit amet.</h2>

<!--
输入：ul>li>lorem6
输出：
-->
<ul>
    <li>Lorem ipsum dolor sit amet consectetur.</li>
    <li>Molestiae perspiciatis harum deserunt veritatis corporis!</li>
    <li>Impedit tempora obcaecati exercitationem minima est.</li>
    <li>Doloremque quos assumenda temporibus in! Exercitationem.</li>
</ul>

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

扩展缩写（Wrap with Abbreviation）

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

<div id="tonjay">
    <p>Lorem ipsum dolor sit amet consectetur.</p>
</div>

（每个编辑器的快捷键或者打开方式不同）打开Wrap with Abbreviation，然后弹出Enter Abbreviation（输入扩展缩写），在其中输入：

<!--
输入：h2{TONJAY-title}+.desc
输出：
-->
<div id="tonjay">
    <ul>
        <li>
            <p>Lorem ipsum dolor sit amet consectetur.</p>
        </li>
    </ul>
</div>

把文本转换成HTML标签

如果我们想下面的文本转换成导航：

tonjay
web
study
vue

首先选中文本（每个编辑器的快捷键或者打开方式不同）打开Wrap Individual Lines with Abbreviation，弹出Enter Wrap Abbreviation（输入扩展缩写），在其中输入：

<!--
输入：ul>li*
输出：
-->
<ul>
    <li>tonjay</li>
    <li>web</li>
    <li>study</li>
    <li>vue</li>
</ul>

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

如果文本前有编号序列：

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

1.tonjay
2.web
3.study
4.vue

<!--
输入：ul>li*|t
输出：
-->
<ul>
    <li>tonjay</li>
    <li>web</li>
    <li>study</li>
    <li>jquery</li>
</ul>

经过测试不支持中文符号

控制文本的输出位置

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

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

1.tonjay
2.web
3.study
4.vue

<!--
输入：ul>li[title=$#]*>a{$#}|t
输出：
-->
<ul>
    <li title="tonjay">
        <a href="">tonjay</a>
    </li>
    <li title="web">
        <a href="">web</a>
    </li>
    <li title="study">
        <a href="">study</a>
    </li>
    <li title="vue">
        <a href="">vue</a>
    </li>
</ul>

增加图片的尺寸大小

有时候，我们需要给<img>标签增加对应的 width、height 属性来表示图片的大小或者给通过 background-image 属性引用的背景图片一个尺寸大小。通常的做法是看一下图片的尺寸，然后加上，而现在，你只需要将光标移动到代码段，摁下 Ctrl+U 即可让 Emmet 自动读取图片的尺寸添加上。前提条件是图片比较存在并且正确引用进来了。

如果是针对<img>标签的，会在后面加上 width、height 属性，如果是 background 引入的，会在下面加上 width、height 的 CSS 属性。

当然，这也不是全部，如果还想探索的话，那只有官方文档了：emmet