让我们来看看VS Code的一些扩展，它们使编写和编辑HTML（以及基本上是具有额外能力的HTML的语言）变得更好。你可能不会喜欢所有的扩展。也许它们中的一些对你没有吸引力，解决了你没有的问题，或者感觉比你需要的更杂乱。这也没关系。这些只是我尝试过并在某种程度上喜欢的少数几个。
我想从Emmet开始，即使它在技术上不是VS Code的一个扩展1。它是直接内置的。但你应该知道它，因为它非常有用。它可以做像这样的 "HTML扩展"，我在生活中几乎每天都在使用它。
HTML结束标签
我从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被关闭的用户界面。
自动关闭标签
只要你在一个HTML元素中输入> ，比如<div> 中的最后一个括号，就会自动为你创建关闭标签。
它可以被配置为只在你输入</ ，表示你要关闭一个标签后才自动关闭，这是Sublime Text 3中的一个默认值。说到这里，如果你安装了Sublime Text Keymap，你就会自动得到这个，再加上其他一些花哨的按键命令。
还有Close HTML/XML标签，但它只通过按键命令工作。有了自动关闭标签，你可以用两种方式配置它，而且不管什么原因，它的安装量要大得多。
突出显示匹配的标签
这是他们文档中的GIF。
我本来想做我自己的视频，但我发现，即使我关闭了这个扩展，我的VS代码中的其他东西还是会高亮显示匹配的标签。我不完全确定它是什么，这使我相信它现在可能是一个内置功能。
在没有打开这个扩展的情况下，我看到的是：匹配标签周围有一个边框。
这不是针对HTML的，但如果你喜欢这种帮助匹配的东西，你可以试试Bracket Pair Colorizer 2，它对CSS和JavaScript很有帮助。
自动重命名标签
我发现这个功能非常有用！我相信这个功能实际上是内建在
我相信这个功能实际上是内置在canonical Emmet中的，但同样，VS Code没有使用canonical Emmet，所以这个功能不存在，因此需要这个额外的插件。
更好的注释
我经常留下代码注释，特别是在开发新东西的时候。我喜欢的一个惯例是，当一个注释有前缀（如TODO）时，它是特别重要的，需要注意。更好的注释允许这些注释在视觉上看起来不同。
代码拼写检查器
VS代码中没有拼写检查。我不喜欢这样。对我来说，这个插件是必须的，特别是对HTML来说，因为HTML中通常有内容，比如单词，应该拼写正确。就像linter一样，这个插件在有问题的时候会给你一个方块字，并有一个菜单来尝试修复它。
缩进彩虹
沐浴在这个由加深缩进产生的辉煌的彩虹中。
重点是，它给你一些视觉提示，让你知道你目前在看/在做什么级别的工作。在这个意义上，它有点像高光匹配标签，但说实话，我都喜欢它们。当你需要向上或向下滚动以找到匹配标签的位置时，它是最有用的。
伪装
Prettier确实对HTML起作用，但我几乎可以说它有一点争议性。例如，它把HTML属性分成单行，这感觉很像JSX的东西，但在原始HTML中不太常见。但有时也会有字面上的副作用。例如，如果你故意这样输入<ul><li></li><li></li></ul> （没有空白），因为你要设置所有的列表项inline ，Prettier会把它们分解到自己的行中，插入空白，并改变你所要的布局。你总是可以用注释来解决这个问题，让Prettier不去管它（例如：{/* prettier-ignore */} ），但我可以看到它让人们感到不快。在HTML空白敏感度下甚至有一些设置，但它不可能是完美的。
实际上，我只是为了这篇博文而让Prettier for HTML工作，所以我想我会保留它一段时间，看看我是否喜欢它。我已经知道我喜欢Prettier for JSX。一般来说，我喜欢尽可能多的自动格式化。
片断
我得想象有很多片段插件，但这是我唯一尝试过的，而且效果很好。我喜欢你如何从现有的文件中直接制作片段。
标签页(Tabnine)
我从凯尔-辛普森那里听说了这个插件，我想他是在为他们做一些有偿咨询之类的事情。它的重点是它能提供花哨的人工智能自动完成建议，甚至是在HTML中。看看它对一些属性的猜测。
这看起来是一个相当商业化的产品，其特点是将你推向团队的付费计划。我并不觉得有什么好说的，只是看到这样的工具在HTML中工作很有意思。
axe Accessibility Linter
这个工具可以在编辑器中检查你的HTML是否有可访问性问题。它有一系列的检查规则。
- 你知道吗，尽管VS Code里有Emmet，但Emmet的创造者和VS Code团队之间没有交流。我过去曾试图促进这种联系，但没有成功。重点是。如果VS Code中的Emmet不是直接插入，而是从官方软件包中集成，那么它可能会更好。Emmet有新的东西，VS Code可以使用，比如扩展预览。⮑
