VS Code 支持 Emmet 吗？ | CSS-Tricks

也就是说，来自微软的免费代码编辑器 Visual Studio Code 是否与免费开源代码扩展工具 Emmet 兼容？答案是当然！ 实际上，您无需做任何操作即可启动它。 Emmet 内置于 VS Code 中。

让我们看看 Emmet 的功能以及一些 VS Code 特定功能，以充分利用它。

在本文中，我将使用 ⌘ 来表示 Apple 上的命令键和 Windows 上的控制键。我还将使用 ⇧ 表示 shift 键。

什么是 Emmet？

Emmet 是一种代码扩展工具，旨在显着加快 HTML 和 CSS 的创建速度。

它的工作原理如下。假设您想创建一个 div。通常，您将逐个输入每个字符

< … d … i … v … >

您的文本编辑器甚至可能会帮助您自动完成该标签名称。然后，要关闭它，您可能只需要输入一个新的尖括号 (<)，它就会提供完成结束标签的选项。

这不是编写 HTML 的糟糕方式，但是当您使用 HTML 工作时，您可能正在编写比这更多的标签，这意味着您正在打开和关闭很多尖括号。这些尖括号可能会真正减慢您的速度，并使创建 HTML 变得乏味。

这就是 Emmet 的用武之地。

Emmet 允许您只键入 div 并按 Tab 键。它会自动扩展为完整的 HTML div 标签。

这对任何 HTML 标签都有效。您可以使用 # 添加 id，使用 . 添加类，使用 [foo] 添加属性。它很乐意做很多！

实际上，如果您正在使用 div，您甚至不需要指定 div 标签。您只需要从 id 或类开始，您将默认获得一个 div。即使您在另一个默认内联元素中，Emmet 也足够智能，可以将其更改为 <span>。

通过这种方式可以组成相当复杂的标记。您可以使用 > 来指定向下移动一级，使用 + 来指定同一级别的项目。例如，Bootstrap 导航栏。导航栏的标记可能如下所示

<nav class="navbar">
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="navbar-nav">
    <a class="nav-item nav-link" href="#">Home</a>
    <a class="nav-item nav-link" href="#">Features</a>
    <a class="nav-item nav-link" href="#">Pricing</a>
  </div>
</nav>

我们可以使用 Emmet 生成整个代码块，如下所示

在 Emmet 语法方面，这里有很多内容。学习它的最佳方法是获取 Emmet 语法备忘单。

您也可以在生成的标记中根据需要包含 Lorem Ipsum。

您可能已经注意到，我能够自动生成 3 个锚点标签，当我将其全部扩展为 HTML 时，我在所有锚点标签和 href 属性中获得了制表符位置。这使您能够快速创建 HTML 代码块，然后在每个项目中添加具体内容。

但是，还有另一种（敢说更酷）的方式 😎。它被称为“包装单个行”。

使用缩写包装单个行

如果我们回到上面的例子，我们真正想要的是一个带有主页、功能和定价链接的导航栏。我们可以在使用 Emmet 生成标记后添加该文本，或者我们可以在使用“使用缩写包装单个行”命令之前添加该文本。

调用命令面板 (⌘ + ⇧ + P) 并选择“包装单个行”。我们输入与之前完全相同的 Emmet 语法，但这次我们在 * 处停止，因为 Emmet 将在该处插入我们的行。

还存在一个“使用缩写包装”，它可以包装单行，而无需选择任何内容。这在包装链接时特别有用。只需粘贴一个 URL，调用该命令，按“a”，然后按 Enter 键。

🔥 热门提示

将键盘快捷键映射到“使用缩写包装”命令。这使得创建诸如锚点之类的元素变得超级快。

Emmet 在其他文件类型中的应用

默认情况下，Emmet 在 HTML 和 CSS 上运行，包括预处理器/模板语言。开箱即用，您可以在 html、haml、jade、slim、jsx、xml、xsl、css、scss、sass、less 和 stylus 中获得支持。文档中还提到，您可以在从上述文件类型继承的任何文件类型中获得它，例如 php。

CSS

Emmet 也在 CSS 中有效。它使用一种称为模糊搜索的搜索技术，它使用少量字符匹配您试图表达的内容。例如，df 展开为 display: flex;，而 w100p 展开为 width: 100%;。

这些在不同的 CSS 文件类型（如 Sass）中有效，它知道在 .sass 语法中不要插入分号。

文件类型继承

不幸的是，无法知道哪些文件继承自现有语言类型。例如，Emmet 在 Markdown 文件中不起作用，因为 Markdown 不会继承任何已知类型。尽管 HTML 在 Markdown 文件中完全有效。

为了解决这个问题，我们可以添加语言映射，以便 Emmet 知道如何在 Markdown 文件中正常工作。将以下行添加到“用户设置”文件中。

要快速跳转到“用户设置”，请按 ⌘,（命令逗号）。

"emmet.includeLanguages": {  
    "markdown": "html"
}

现在，我们将 Markdown 映射到 HTML，以便 Emmet 知道如何处理该文件。嗯，几乎。如果我们打开一个 Markdown 文件，您会注意到 Emmet 正在工作，但不像我们预期的那样。如果我键入 div 并按 Tab 键，则什么也不会发生。如果我键入 div 然后是 *，则 Emmet 将尝试通过建议菜单启动。

这不好，因为 Markdown 使用星号来表示标题。 Emmet 将每次都拦截这些符号。发生这种情况的原因是 VS Code 试图阻止 Tab 键覆盖可能在该类型的文档中执行的其他功能。

为了解决这个问题，我们可以将以下行添加到我们的“用户设置”中

"emmet.triggerExpansionOnTab": true

现在，div 展开将按 Tab 键工作，但星号仍然会触发 Emmet 建议窗口。我的建议是使用以下行在“用户设置”中完全关闭该窗口

"emmet.showExpandedAbbreviation": "never"

这对 React 和 Vue 等语言也有效。虽然 Emmet 默认在 JSX 文件中有效，但我们也可以让它在普通 JavaScript 中的 JSX 中有效。将此映射添加到您的“用户设置”中

"emmet.includeLanguages": {
    "javascript": "javascriptreact"
}

创建您自己的代码片段

您也可以创建自己的 Emmet 代码片段。

例如，您可以通过创建类似 rect 的自定义代码片段来扩展 Emmet 的 SVG 功能，该代码片段映射到 rect[x][y][width][height]，从而扩展为

<rect x="" y="" width="" height=""></rect>

有关该内容的更多信息，请参阅官方 VS Code 文档。这就是 CodePen 自定义代码片段在幕后工作的方式！