VSCode 设置 HTML 标签代码补全很简单，可以通过内置的 Emmet 功能、安装插件以及个性化设置实现。例如，启用 Emmet，就会在你输入 HTML 标签的一部分时自动提供补全建议。Emmet 是内置于 VSCode 中的一个工具，它可以通过简写快速生成代码，极大提高前端开发的效率。
一、启用 EMMET 代码补全
Emmet 默认在 VSCode 中是启用的，如果你发现它不工作，你可以检查 settings.json 文件以确保它被正确启用。
- 打开 VSCode 设置（
Ctrl + ,或点击左下角的齿轮图标选择Settings）。 - 搜索
emmet以找到与 Emmet 相关的配置。 - 确保
Emmet: Trigger Expansion On Tab选项被勾选，允许通过 Tab 键触发 Emmet 扩展。 - 你还可以查看
Emmet: Include Languages设置，确保你想要使用 Emmet 功能的文件类型被包含在内。
二、安装并使用插件
对于更进一步的代码补全，你可以安装一些第三方插件，如 Auto Rename Tag、HTML CSS Support 和 IntelliSense for CSS class names in HTML 等插件。
- 进入插件市场，可以通过侧边栏的 Extensions 按钮或按快捷键
Ctrl + Shift + X。 - 在搜索框里输入插件名，找到插件后点击 Install 按钮。
三、自定义代码片段
VSCode 允许你定义自己的代码片段，这样当你输入特定的关键字时，VSCode 将展示你定义的代码补全选项。
- 通过点击菜单栏中的 File > Preferences > User Snippets，然后选择
html.json（针对 HTML 的代码片段）。 - 在打开的
html.json文件中，你可以根据格式要求输入你自己的代码片段。
四、修改用户设置以优化体验
在 VSCode 的用户设置中，你可以做出进一步修改以优化代码补全体验。
- 通过
settings.json进行设置，可以打开它，然后添加例如"html.suggest.html5": true,这样的配置，以确保你可以获得 HTML5 标签的补全建议。 - 可以调整
editor.quickSuggestions设置，以控制在输入时是否自动显示建议。
通过上述方法中的一种或几种，你可以让 VSCode 在编写 HTML 时提供强大的代码补全功能。不仅可以加速你的工作流程，还可以确保代码的准确性和一致性。
相关问答FAQs：
FAQ 1: 我该如何在VSCode中启用HTML标签代码补全功能？
答: 在VSCode中，您可以通过以下步骤启用HTML标签代码补全功能：
- 打开VSCode并进入设置：可以使用快捷键Ctrl + ，或者点击左下角的齿轮图标进入。
- 在设置搜索框中输入"emmet"，并点击"在settings.json中编辑"链接。
- 在settings.json文件中，找到"emmet.includeLanguages"字段。如果没有该字段，可以点击齿轮图标右上角的笔图标创建新的设置文件。
- 在"emmet.includeLanguages"字段中，添加以下内容：
"emmet.includeLanguages": {
"html": "html"
}
- 保存设置文件并关闭。
现在，您应该能够在VSCode的HTML文件中享受标签代码补全的功能了。
FAQ 2: VSCode的HTML标签代码补全功能使用起来有什么小技巧吗？
答: 当您使用VSCode的HTML标签代码补全功能时，这里有几个小技巧可以提高您的效率：
- 输入感知：在您输入HTML标签的过程中，VSCode会自动根据您输入的字符来预测可能的标签，并给出补全建议。按下Tab键或Enter键即可选择并插入建议的标签。
- 快捷键：在您输入标签名称后，按下Ctrl + Space可以手动触发代码补全建议。
- Emmet缩写：VSCode内置了Emmet插件，它可以让您使用简洁的缩写方式来快速生成HTML标签。例如，输入"div.contAIner"然后按Tab键，将会生成一个带有class="container"的div标签。
- 自定义补全片段：您可以根据自己的需求自定义一些常用的HTML标签补全片段。在VSCode的用户设置中，搜索"emmet.extensionsPath"，找到emmet插件安装目录下的"snippets.json"文件，然后在该文件中添加您自定义的补全片段。
FAQ 3: 为什么我在VSCode中启用了HTML标签代码补全功能，但并没有生效？
答: 如果您在VSCode中启用了HTML标签代码补全功能，但没有生效，可能有以下几个原因导致：
- 文件类型错误：请确保您正在编辑的文件的文件类型是HTML。您可以通过查看文件后缀名或者点击VSCode右下角的文件类型标签来确认。
- 插件未安装或未启用：请确保您已经安装了VSCode的Emmet插件，并且在设置中启用了该插件。您可以通过按下Ctrl + Shift + X打开扩展面板来检查Emmet插件的状态。
- 设置错误：请确保您正确设置了VSCode的"emmet.includeLanguages"字段，并且没有其他冲突的设置。可以参考FAQ 1中的步骤进行查看和修改设置。
如果仍然无法解决问题，您可以尝试重新启动VSCode，并确保您的软件是最新版本。如果问题仍然存在，请考虑卸载和重新安装Emmet插件。
