VSCode如何解决Prettier和Vue单引号双引号的冲突问题

Prettier 默认强制使用双引号，和 Vue 项目要求单引号冲突时，必须通过 singleQuote: true 显式覆盖。但很多人发现，明明在 VSCode 设置里改了，却完全没用。这到底是怎么回事？

Prettier 默认强制双引号，和 Vue 项目要求单引号冲突时，必须通过 singleQuote: true 显式覆盖。VSCode 设置项 prettier.singleQuote 在 2026 年已完全失效。

为什么改了 VSCode 设置没用

问题出在 Prettier 的配置加载机制上。自 2022 年起，Prettier 就不再读取 VSCode 的 UI 或 settings.json 中的 prettier.singleQuote 配置——它只认项目级配置文件。你可能会看到右下角有 Prettier 图标，按 Ctrl+Shift+P → Format Document With 显示 Prettier 为默认工具，说明它已在接管格式化，但你的 settings.json 里写的 "prettier.singleQuote": true 实际上被忽略。

• 常见错误现象：'export default {}' 被转成 "export default {}"；className='btn' 变成 className="btn"；甚至 require('./utils') 里的路径也被改。
• 检查路径：打开项目根目录，确认是否存在 .prettierrc、prettier.config.js 或 package.json 里的 prettier 字段。
• 如果没配过但依然被改引号，大概率是 ESLint 插件启用了 eslint.format.enable，底层调用了 Prettier（而非你手动装的 Prettier 插件）。

必须用项目级配置文件生效

解决方案其实很简单：在项目根目录新建 .prettierrc，内容只写一行：

{"singleQuote": true}

或者用 JS 文件形式，兼容动态逻辑：

module.exports = { singleQuote: true };

• 这个配置对所有 Prettier 支持的语言都生效：JS/TS/JSX/Vue 模板中的字符串、属性值、导入路径等。
• 改完后必须执行 Developer: Reload Window 或重启 VSCode，否则缓存可能让旧行为持续几分钟。
• 不要在 .vscode/settings.json 里重复写 prettier.singleQuote，纯属冗余，还可能误导后续维护者。

Vue 项目还要防 Vetur / Volar 和 Prettier 打架

Vue 文件（.vue）里 HTML 模板、JS 逻辑、CSS 样式三块可能被不同工具处理。Vetur 默认把 JS 块交给 vscode-typescript，而它不认 .prettierrc，结果就是模板里单引号正常，