本文旨在解决VS Code中HTML标签自动补全时，默认使用双引号的问题，并提供一种通过配置Prettier插件，将自动补全的引号设置为单引号的有效方法。通过本文，你将学会如何自定义VS Code的HTML代码风格，提升开发效率。
在使用VS Code进行HTML开发时，自动补全功能可以显著提高效率。然而，默认情况下，VS Code的HTML自动补全功能通常会使用双引号来包裹属性值，例如 <img src="" alt="">。如果你更倾向于使用单引号，例如 <img src='' alt=''>，可以通过以下步骤进行配置。
使用Prettier插件配置单引号
虽然VS Code本身提供了一些HTML相关的配置项，例如 html.completion.attributeDefaultValue，但它可能无法完全满足自定义自动补全的需求。一个更强大和灵活的解决方案是使用Prettier插件。
立即学习“前端免费学习笔记（深入）”；
Prettier是一个代码格式化工具，可以自动格式化你的代码，使其符合一致的风格。通过配置Prettier，你可以轻松地将HTML属性值设置为使用单引号。
步骤 1: 安装Prettier插件
首先，需要在VS Code中安装Prettier插件。打开VS Code，点击侧边栏的扩展图标（或按下 Ctrl+Shift+X），搜索 "Prettier - Code formatter"，然后点击安装。
步骤 2: 创建Prettier配置文件
在你的项目根目录下创建一个名为 .prettierrc 的文件。这个文件用于配置Prettier的行为。
步骤 3: 配置单引号选项
在 .prettierrc 文件中，添加以下JSON代码：
{
"singleQuote": true
}这个配置项 singleQuote: true 告诉Prettier在格式化代码时，使用单引号来包裹字符串。
步骤 4: 启用自动格式化
为了让Prettier自动格式化你的HTML代码，你需要启用VS Code的自动格式化功能。打开VS Code的设置（File -> Preferences -> Settings），搜索 "Format On Save"，然后勾选 "Editor: Format On Save" 选项。
另外，你可能需要设置默认的格式化工具为Prettier。在设置中搜索 "Format Document With"，选择 "Prettier - Code formatter"。
示例
完成以上配置后，当你输入 img 并按下 Tab 键时，VS Code会自动补全为 <img src='' alt=''>。
注意事项
- 确保你的项目中没有其他的代码格式化工具或配置与Prettier冲突。
- Prettier的配置是项目级别的，这意味着不同的项目可以使用不同的Prettier配置。
- 如果Prettier没有生效，尝试重启VS Code。
总结
通过使用Prettier插件，你可以轻松地自定义VS Code的HTML自动补全行为，将属性值设置为使用单引号。这种方法不仅简单易用，而且可以确保你的代码风格保持一致。Prettier还提供了许多其他的配置选项，可以帮助你更好地控制代码的格式化方式，从而提高开发效率和代码质量。
