使用 Prettier 在 VS Code 中配置 HTML 自动补全使用单引号

本文介绍如何在 VS Code 中配置 HTML 自动补全，使其在生成 HTML 标签属性时默认使用单引号而不是双引号。通过安装并配置 Prettier 插件，可以轻松实现这一需求，并统一代码风格。

在使用 VS Code 进行 HTML 开发时，默认的自动补全行为可能会生成使用双引号的属性值，例如 <img src="" alt="">。然而，很多开发者更倾向于使用单引号，例如 <img src='' alt=''>，以保持代码风格的一致性或与其他语言的习惯保持一致。虽然 VS Code 提供了 html.completion.attributeDefaultValue 设置，但它并不能直接控制 img 标签自动补全时的引号类型。

要实现 img 等 HTML 标签自动补全时使用单引号，推荐使用 Prettier 插件。Prettier 是一款强大的代码格式化工具，可以自动格式化 HTML、CSS、JavaScript 等多种代码，并支持自定义配置。

步骤 1：安装 Prettier 插件

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

在 VS Code 中，打开扩展商店（Ctrl+Shift+X 或 Cmd+Shift+X），搜索 "Prettier - Code formatter" 并安装。

步骤 2：创建并配置 .prettierrc 文件

在你的项目根目录下创建一个名为 .prettierrc 的文件（注意文件名前面的点）。将以下 JSON 代码添加到该文件中：

{
  "singleQuote": true
}

这个配置告诉 Prettier 在格式化代码时，优先使用单引号而不是双引号。

步骤 3：配置 VS Code 默认格式化工具

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

74

查看详情

打开 VS Code 的设置（Ctrl+, 或 Cmd+,），搜索 "Format On Save"，勾选 "Editor: Format On Save" 选项，这样每次保存文件时，VS Code 都会自动使用配置的格式化工具进行格式化。

然后，搜索 "Default Formatter"，在下拉菜单中选择 "Prettier - Code formatter"。

示例：

假设你输入 img 并按下 Tab 键，VS Code 默认会生成 <img src="" alt="">。

在安装并配置 Prettier 后，再次输入 img 并按下 Tab 键，VS Code 将会生成 <img src='' alt=''>。

注意事项：

• .prettierrc 文件应该位于项目的根目录下，以便 Prettier 能够正确读取配置。
• 除了 singleQuote 选项，.prettierrc 文件还可以包含其他 Prettier 配置选项，例如 tabWidth、useTabs、semi 等，可以根据需要进行配置。
• 确保你的 VS Code 安装了 Prettier 插件，并且已将其设置为默认格式化工具。

总结：

通过安装并配置 Prettier 插件，可以轻松地控制 VS Code 中 HTML 自动补全的引号类型，使其在生成 HTML 标签属性时默认使用单引号。这种方法不仅可以满足个性化需求，还可以统一代码风格，提高代码可读性和可维护性。同时，Prettier 提供的其他格式化选项也能帮助你更好地管理代码风格。

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