10 个 VS Code emmet 技巧，助您更高效 VS Code 和 Emmet 1. HTML 结构和标签 2. 添加 class 和 id 3. 子元素 4. 乘法 5. 兄弟元素 6. 分组 7. 编号 8. 文本 9. 向上爬升 10. CSS 接下来该做什么

2025-05-24

10 个 VS Code emmet 技巧助你提高效率

VS Code 和 Emmet

1. HTML结构和标签

2.添加class和id

3.儿童

4.乘法

5. 兄弟姐妹

6.分组

7.编号

8.文本

9. 爬上去

10. CSS

下一步该怎么做

一般来说，生产力是产出与投入的比率。在软件工程中，编程生产力（或开发生产力）可以是生成的软件代码数量与其时间成本的比率。

用数学术语来说，

开发生产力 = 软件代码量 / （程序员数量 * 编写代码所花费的时间）

代码编写时间的减少可以显著提高开发效率。让我们学习一些技巧和窍门，大幅缩短HTML/CSS源代码创建时间，从而实现超高效率。

VS Code 和 Emmet

Visual Studio Code(aka, VS Code)VS Code是领先的源代码编辑器（也是 IDE）之一，可以说是当今 Web 开发领域的最佳选择之一。Emmet它是一个基于插件的基础架构，可以从简写语法生成 HTML/CSS 代码片段。VS Code 开箱即用地支持 Emmet 2.0。这意味着您无需任何其他扩展即可使用它。

让我们看看使用 VS 代码的 emmet 的十种用法，以帮助您成为更高效的开发人员。

请随意在 VS Code 编辑器中打开一个空的 HTML 文件，并在阅读时尝试这些技巧和窍门！

1. HTML结构和标签

大多数 Web 开发人员面临的难题之一是记住 HTML 结构和 HTML 标签的语法。还有什么比一个字符就能为我们创建基本的 HTML 结构更令人兴奋的呢？使用 VS Code 打开一个空的 HTML 文件并输入!字符。您将看到一个选项，可以选择创建一个基本的 HTML 结构，如下图所示。

html_exp_1.png

您可以输入任意 HTML 标签的几个首字母来创建具有所需属性的元素。下图展示了创建具有不同属性的锚标签的可能性。

html_exp_2.png

这里还有一些在 Web 开发中经常使用的例子。我们可以链接到 CSS 文件、加载 JavaScript 文件、创建不同的输入标签、禁用按钮等等。

html_exp_3.png

您还可以通过输入 HTML 标签的首字符来尝试许多其他方法。

2.添加class和id

减少编码时间的一个有效方法是创建包含所需类名和 ID 的 HTML 标签。尝试使用以下快捷方式创建ul包含类名的标签list。

ul.list
Enter fullscreen mode Exit fullscreen mode

生产，

<ul class="list"></ul>
Enter fullscreen mode Exit fullscreen mode

ul类似地，这是创建具有 id 的元素的快捷方式list-id。

ul#list-id
Enter fullscreen mode Exit fullscreen mode

生产，

<ul id="list-id"></ul>
Enter fullscreen mode Exit fullscreen mode

如果您想为元素添加类名或 id div，您甚至不需要在简写中提及 div。

对于类名，

.content
Enter fullscreen mode Exit fullscreen mode

生产，

<div class="content"></div>
Enter fullscreen mode Exit fullscreen mode

对于id，

#content-id
Enter fullscreen mode Exit fullscreen mode

生产，

<div id="content-id"></div>
Enter fullscreen mode Exit fullscreen mode

3.儿童

手动创建嵌套的 HTML 结构可能非常繁琐。如果我们只需输入几个字符就能创建嵌套的 HTML 结构，会怎么样呢？让我们创建一个无序列表 (ul) 及其下的列表项 (li)。使用>符号创建嵌套的子结构。

ul>li
Enter fullscreen mode Exit fullscreen mode

生产，

<ul>
    <li></li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Lorem这是另一个创建随机文本的快捷方式，可以更快地测试你的网页。让我们用 Lorem 文本创建一个段落 (p) 标签。

p>Lorem
Enter fullscreen mode Exit fullscreen mode

生产，

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consectetur deserunt quam voluptatum quos ipsa cupiditate ipsum qui sequi illum? Qui exercitationem accusamus totam natus ut fugit magnam modi eaque doloremque.</p>
Enter fullscreen mode Exit fullscreen mode

现在，我们创建一个无序列表 (ul)，并在其下添加一个列表项 (li)。列表项的类名为。最后，我们需要在标签内list创建一个带有类名的锚点 (a) 标签。linkli

ul>li.list>a.link
Enter fullscreen mode Exit fullscreen mode

生产，

<ul>
    <li class="list">
       <a href="" class="link"></a>
    </li>
</ul>
Enter fullscreen mode Exit fullscreen mode

4.乘法

您可以使用 符号来复制 HTML 元素*。让我们在一个ul标签内创建 5 个列表标签 (li)。

ul>li*5
Enter fullscreen mode Exit fullscreen mode

生产，

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
Enter fullscreen mode Exit fullscreen mode

5. 兄弟姐妹

使用+符号可在同一层级创建多个元素。假设我们想在同一层级创建三个 div 元素，并用另一个 div 包裹它们。

.bothers>.alex+.bob+.me
Enter fullscreen mode Exit fullscreen mode

生产，

<div class="bothers">
    <div class="alex"></div>
    <div class="bob"></div>
    <div class="me"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

div正如您现在所知，我们在使用类名和 ID 创建元素时不需要提及该元素。

6.分组

掌握了最后 5 个技巧和窍门的用法后，你就可以组合使用它们，从而提高效率。这时分组就派上用场了。我们使用(符号“以及”)来创建组。

让我们创建一个ul标签和 5 组li标签a。

ul>(li>a)*5
Enter fullscreen mode Exit fullscreen mode

生产，

<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>
Enter fullscreen mode Exit fullscreen mode

现在，我们来看一下更复杂的用法。注意下面简写中使用的分组：

div>(header>ul>li*2>span.item)+section.content+(footer>(p>Lorem)*2)
Enter fullscreen mode Exit fullscreen mode

一旦分解，它就会使用组创建适当的嵌套结构。下图演示了这一点。

组示例.png

它生成以下代码片段，

<div>
    <header>
        <ul>
            <li><span class="item"></span></li>
            <li><span class="item"></span></li>
        </ul>
    </header>
    <section class="content"></section>
    <footer>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat iure quaerat, molestias dolore commodi sequi porro, delectus eius quos saepe recusandae veniam modi laudantium voluptatibus cumque odit similique beatae eos.</p>
        <p>Nemo sequi veniam est! Laborum rem iste id vel, harum repellendus, reiciendis labore minima eum voluptatem dicta error nesciunt fugiat! Ipsa, perferendis iste exercitationem explicabo ex consequuntur dicta iure ipsam.</p>
    </footer>
</div>
Enter fullscreen mode Exit fullscreen mode

7.编号

我们使用$符号来创建编号。$符号可以与 符号一起使用，*以增加出现的次数。

header>ul>li.item$*3
Enter fullscreen mode Exit fullscreen mode

生产，

<header>
    <ul>
        <li class="item1"></li>
        <li class="item2"></li>
        <li class="item3"></li>
    </ul>
</header>
Enter fullscreen mode Exit fullscreen mode

8.文本

我们使用花括号（{和}）来创建包含文本的元素。让我们创建一个span包含一些文本的元素。

span{I am a span}
Enter fullscreen mode Exit fullscreen mode

生产，

<span>I am a span</span>
Enter fullscreen mode Exit fullscreen mode

那么，如何创建所有 HTML 标题标签 (H1...H6) 并添加标识它们的文本呢？以下是它的简写：

h$*6{I'm a Heading $}*6
Enter fullscreen mode Exit fullscreen mode

生产，

<h1>I'm a Heading 1</h1>
<h2>I'm a Heading 2</h2>
<h3>I'm a Heading 3</h3>
<h4>I'm a Heading 4</h4>
<h5>I'm a Heading 5</h5>
<h6>I'm a Heading 6</h6>
Enter fullscreen mode Exit fullscreen mode

9. 爬上去

当嵌套层级过深时，您可能需要返回 HTML 树。您可以使用^符号在层次结构中向上攀升一级。您可以多次使用 符号来向上攀升多个步骤。让我们通过示例来理解。

div这里我们通过攀爬一次来添加标签。

div>div>h3+span^div{I can climb up}
Enter fullscreen mode Exit fullscreen mode

生产，

<div>
    <div>
        <h3></h3>
        <span></span>
    </div>
    <div>I can climb up</div>
</div>
Enter fullscreen mode Exit fullscreen mode

div当我们爬两次时请注意标签的位置！

div>div>h3+span^^div{I can climb up}
Enter fullscreen mode Exit fullscreen mode

生产，

<div>
    <div>
        <h3></h3>
        <span></span>
    </div>
</div>
<div>I can climb up</div>
Enter fullscreen mode Exit fullscreen mode

10. CSS

这里有很多机会。您可以使用 CSS 文件中的简写来生成 CSS 属性。以下是我经常使用的几个：

css.png

下一步该怎么做

希望本文对您有所帮助。如果您已经在使用 Emmet 的快捷键，欢迎留言分享您最喜欢的快捷键。别忘了查看Emmet 速查表来了解更多用法。

在我们结束之前，欢迎在Twitter 上与我联系 (@tapasadhikary)。你可能还喜欢：

PS 我喜欢咖啡☕。给我买杯咖啡

文章来源：https://dev.to/atapas/10-vs-code-emmet-tips-to-make-you-more-productive-17l9
Devto 翻译
PREV
JavaScript object destructuring usages you must know 2, agree but when you see the entire dev ecosystem(like with React I see) using it, I think, it is better to contribute that way.
NEXT
CTF 新手入门：什么是 CTF？如何入门？那么，CTF 到底是什么？挑战类型：从哪里开始？结论