VS Code HTML 自动补全使用单引号：Prettier 配置指南

挑战：vs code html 自动补全的默认行为

在VS Code中，当开发者键入如img并按下Tab键时，Emmet（VS Code内置的HTML/CSS缩写扩展）通常会生成<img src="" alt="">这样的结构，其中属性值默认使用双引号。尽管VS Code提供了一个名为html.completion.attributeDefaultValue的设置项，允许用户将其值从doublequotes更改为singlequotes，但此设置主要影响部分补全场景，例如键入<img src后按下Tab键，此时会生成<img src=''。对于完整的Emmet缩写（如img+Tab），该设置并不能直接改变其默认输出的双引号行为。这使得追求统一单引号风格的开发者面临挑战。

解决方案：利用 Prettier 统一代码风格

为了彻底解决HTML属性值自动补全的引号风格问题，推荐的做法是利用强大的代码格式化工具——Prettier。Prettier能够解析代码并使用一套统一的规则对其进行格式化，其中包括对引号风格的强制统一。通过配置Prettier，我们可以确保即使Emmet初始生成了双引号，在代码保存时也会被自动转换为单引号。

配置步骤

立即学习“前端免费学习笔记（深入）”；

以下是实现这一目标的详细步骤：

1. 安装 Prettier 扩展

首先，您需要在VS Code中安装Prettier扩展。

1. 打开VS Code。
2. 切换到扩展视图（快捷键Ctrl+Shift+X或点击侧边栏的方块图标）。
3. 在搜索框中输入Prettier - Code formatter。
4. 找到该扩展并点击“安装”按钮。

2. 配置 Prettier 使用单引号

安装完成后，您需要为您的项目配置Prettier。Prettier通常通过项目根目录下的配置文件进行管理，这有助于团队协作时保持一致的格式化规则。

1. 在您的项目根目录下创建一个名为.prettierrc的文件。

2. 将以下JSON配置添加到.prettierrc文件中：

   {
     "singleQuote": true
   }

   登录后复制

   这个配置项告诉Prettier在格式化代码时，将所有字符串和属性值统一使用单引号。

3. 设置 VS Code 默认格式化器 (可选但推荐)

为了让Prettier在每次保存文件时自动格式化代码，您可以将其设置为VS Code的默认格式化器并启用“保存时格式化”功能。

琅琅配音

全能AI配音神器

208

查看详情

1. 打开VS Code设置（快捷键Ctrl+,或File > Preferences > Settings）。

2. 搜索editor.formatOnSave并勾选此选项，启用保存时自动格式化。

3. 搜索editor.defaultFormatter。

4. 对于HTML文件，您可以点击“编辑in settings.json”并在[html]部分添加如下配置，或者直接在UI界面中选择Prettier作为HTML的默认格式化器。

   // settings.json
   {
     "editor.formatOnSave": true,
     "[html]": {
       "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
     "[javascript]": {
       "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
     "[typescript]": {
       "editor.defaultFormatter": "esbenp.prettier-vscode"
     }
     // ... 针对其他文件类型也可配置
   }

   登录后复制

   确保esbenp.prettier-vscode是Prettier扩展的ID。

工作原理

当您在VS Code中键入img并按下Tab键时，Emmet会立即生成<img src="" alt="">。此时，引号仍是双引号。然而，一旦您保存文件（如果启用了“保存时格式化”），Prettier会介入，根据.prettierrc文件中的"singleQuote": true规则，将双引号自动转换为单引号，最终得到<img src='' alt=''>。这是一个“后处理”的过程，而不是直接修改Emmet的初始输出。

注意事项

• 项目级配置与全局配置：.prettierrc文件是项目级别的配置，这意味着不同的项目可以有不同的格式化规则。如果您希望在所有项目中都默认使用单引号，可以在VS Code的用户设置中配置Prettier的全局行为，但通常推荐使用项目级配置以确保团队协作的一致性。
• 与其他格式化器的冲突：如果您的项目中同时安装了多个格式化器（例如ESLint、JS-CSS-HTML Formatter等），可能会出现冲突。请确保Prettier被设置为默认格式化器，或根据需要禁用其他格式化器。
• 其他 Prettier 规则：Prettier还提供了许多其他有用的配置项，如tabWidth、semi（是否添加分号）、printWidth（单行最大字符数）等，您可以根据项目需求进行调整，以实现更全面的代码风格统一。
• 实时反馈：虽然Prettier是在保存时格式化，但许多开发者会结合ESLint等工具，通过VS Code的“Lint on Type”功能，获得更实时的格式化和代码风格反馈。

总结

通过安装并合理配置Prettier扩展，开发者可以有效解决VS Code中HTML自动补全默认使用双引号的问题。Prettier作为一款强大的代码格式化工具，不仅能帮助我们统一HTML属性的引号风格，还能在整个项目中推行一致的代码规范，极大地提升了开发效率和代码可读性。掌握Prettier的配置与使用，是现代前端开发中不可或缺的技能。

以上就是VS Code HTML 自动补全使用单引号：Prettier 配置指南的详细内容，更多请关注php中文网其它相关文章！