VS Code 的 HTML 扩展

让我们看看一些 VS Code 扩展，它们可以使编写和编辑 HTML（以及基本上是带额外功能的 HTML 的语言）变得更好。 您可能不会喜欢所有这些扩展。 也许其中一些不适合您，无法解决您遇到的问题，或者感觉比您需要的更混乱。 没关系。 这些只是一些我尝试过并且在某种程度上喜欢的扩展。

我建议从 Emmet 开始，即使它在技术上不是 VS Code 的扩展¹。 它内置其中。 但是您应该了解它，因为它非常有用。 它执行“HTML 扩展”，例如以下示例，我几乎每天都在使用它

HTML End Tag Labels

我从 Stefan Judis 那里了解到这个扩展，他在前几天写了一篇关于它的博文，并激发了这篇博文的灵感。

整个想法是，与其在 HTML 中留下注释来指示正在关闭哪个 HTML 元素（一种相对常见的做法，尤其是在关闭可能不会在同一文档中打开的元素的部分时）。

<div class="main">


</div> <!-- / div.main -->

<?php /* / div.main */ ?>
<?php /* Sometimes I'd do it in a server side language so it didn't go over the wire. */ ?>

此扩展向您显示有关正在关闭的 HTML 的 UI

Auto Close Tag

在 HTML 元素中键入>（例如<div>中的最后一个括号）后，会自动为您创建结束标签。

可以将其配置为仅在您键入</以指示您即将关闭标签后自动关闭，这是 Sublime Text 3 中的默认设置。说到这里，如果您安装了 Sublime Text Keymap，您将自动获得此功能，以及其他一些花哨的键盘快捷键。

还有 Close HTML/XML tag，但它仅通过键盘快捷键工作。 使用 Auto Close Tag，您可以以任何一种方式配置它，并且由于某种原因，它的安装量要多得多。

Highlight Matching Tag

这是他们文档中的 GIF

我本来打算自己制作一个视频，但我发现即使我没有启用此扩展，VS Code 中的其他一些东西也在突出显示匹配的标签。 我不完全确定是什么，这让我相信它现在可能是一个内置功能。

并非特定于 HTML，但如果您喜欢此类匹配项帮助，可以尝试使用 Bracket Pair Colorizer 2，这对于 CSS 和 JavaScript 来说非常不错。

Auto Rename Tag

我发现这个扩展非常有用！

我相信此功能实际上内置于规范的 Emmet 中，但同样，VS Code 没有使用规范的 Emmet，因此此功能不存在，因此需要此额外的插件。

Better Comments

我相当自由地留下代码注释，尤其是在开发新事物时。 我喜欢的一个约定是在注释前缀（例如 TODO）时，它格外重要并且需要关注。 Better Comments 允许这些注释看起来在视觉上有所不同。

Code Spell Checker

VS Code 中没有拼写检查功能。 我不喜欢这样。 对我来说，这个插件是必不可少的，尤其是在 HTML 中，因为 HTML 通常包含内容（例如单词），这些内容应该拼写正确。 就像 linter 一样，此插件在出现错误时会显示波浪线，并提供一个菜单来尝试修复它。

Indent Rainbow

沉醉于由加深缩进创建的绚丽彩虹中

重点是它为您提供了一些关于您当前查看/操作级别的一些视觉线索。 从这个意义上说，它有点像 Highlight Matching Tag，但我老实说两者都喜欢。 当您需要向上或向下滚动以查找匹配的标签时，它最有用。

Prettier

Prettier 确实适用于 HTML，但我几乎称其为有点有争议。 例如，它将 HTML 属性拆分为单行，这感觉很像 JSX 的东西，但在原始 HTML 中不太常见。 但有时会产生实际的副作用。 例如，如果您有意按如下方式键入<ul><li></li><li></li></ul>（无空格），因为您要将所有列表项设置为inline，Prettier 会将它们拆分到自己的行上，插入空格并更改您想要布局。 您始终可以使用注释来修复它，让 Prettier 不管它（例如{/* prettier-ignore */}），但我可以看到它会让某些人感到反感。 在**HTML Whitespace Sensitivity**下甚至有它的设置，但它永远不可能完美。

我实际上让 Prettier 适用于 HTML 以撰写这篇博文，所以我认为我会保留一段时间，看看是否喜欢它。 我已经知道我喜欢 JSX 的 Prettier。 我通常赞成尽可能多的自动格式化。

Snippet

我必须想象有很多代码片段插件，但这是我尝试过的唯一一个，并且它运行良好。 我喜欢从现有文件中直接创建代码片段的方式。

Tabnine

我从 Kyle Simpson 那里了解到这个扩展，我认为他正在与他们进行一些付费咨询或类似的事情。 它的重点是它甚至在 HTML 中提供高级 AI 供电的自动完成建议。 查看它对某些属性的猜测

这看起来像一个相当商业化的产品，其功能会促使您转向团队的付费计划。 我不希望深入了解它； 只是看到这样的工具与 HTML 一起工作很有趣。

axe Accessibility Linter

此扩展会在编辑器中直接检查 HTML 的可访问性问题。 它会检查大量 规则。

---

1. 你可能不知道，尽管 VS Code 自带了 Emmet，但 Emmet 的开发者和 VS Code 团队之间并没有沟通？我过去曾试图促进这种联系，但失败了。重点是：如果 Emmet 不是简单地被塞进 VS Code，而是从官方包中集成，那么 VS Code 中的 Emmet 可能会更好。Emmet 有 VS Code 可以使用的新功能，例如扩展预览。⮑