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

作者：WarmHope 时间：2026-07-06 浏览：0

在Vue项目中，为解决Prettier默认双引号与Vue单引号规则的冲突，必须在项目根目录创建.prettierrc并设置singleQuote:true。同时VSCode全局设置失效，需依赖项目级配置。此外，需配置Vetur使JS格式化使用Prettier；Vue3项目禁用Vetur启用Volar。最后在ESLint的extends末尾添加eslint-c

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，结果就是模板里单引号正常，