Prettier 默认强制使用双引号是其硬编码行为,需通过项目根目录的 .prettierrc 或 prettier.config.js 设置 singleQuote: true 并重启窗口生效;ESLint 与 Prettier 冲突时须禁用 ESLint 的 quotes 规则并正确配置插件优先级。

为什么 Prettier 总把单引号改成双引号
Prettier 默认用双引号是硬编码行为,不是 bug,也不是 VSCode 设置能覆盖的。只要你项目里启用了 Prettier(哪怕只是通过 ESLint 插件间接调用),它就会接管引号规则——eslint-config-prettier 甚至会主动关掉 ESLint 自己的 quotes 规则,确保 Prettier 全权负责。
常见现象包括:'use strict' 变成 "use strict"、className='btn' 变成 className="btn"、require('./utils') 路径里的单引号也被改掉。
验证是否真被 Prettier 控制:按 Ctrl+Shift+P 输入 Format Document With,看默认项是不是 esbenp.prettier-vscode;或者右下角状态栏有没有显示 Prettier 字样。
怎么强制保留单引号(只改配置文件)
VSCode 用户设置里的 prettier.singleQuote 是无效的——Prettier 根本不读这个。它只认项目根目录下的配置文件,且优先级: prettier.config.js > .prettierrc > package.json 中的 prettier 字段。
- 新建
.prettierrc,内容必须是合法 JSON(双引号键名、无注释):{"singleQuote": true} - 或用
prettier.config.js(更灵活,支持注释和动态逻辑):module.exports = { singleQuote: true }; - 改完后执行
Developer: Reload Window,否则 VSCode 可能缓存旧配置 - 运行
npx prettier --debug-check index.js可验证配置是否被正确加载并生效
ESLint 和 Prettier 同时存在时引号总打架
不是格式化“失效”,而是两者在互相覆盖:ESLint 检查引号,Prettier 修复引号,但规则没对齐,结果保存一次变双引号,再保存一次又报 ESLint 错误。
必须做三件事:
- 删掉 ESLint 配置中所有样式类规则,尤其是
quotes、jsx-quotes、semi - 确保
eslint-config-prettier在extends数组中排最后,让它能关掉冲突规则 - 启用
eslint-plugin-prettier,并在rules中加"prettier/prettier": "error"(推荐直接用eslint-config-prettier的recommendedpreset)
如果仍无效,检查 eslint.format.enable 是否为 true,且 eslint.validate 包含当前语言(如 "javascript")。
HTML 或 Vue 文件里单引号还是被改?别漏插件
Prettier 默认不处理 HTML 模板中的属性值引号,除非你装了 prettier-plugin-html 并显式启用。光配 singleQuote: true 不够。
在 prettier.config.js 中必须写:
module.exports = {
singleQuote: true,
plugins: ["prettier-plugin-html"],
htmlWhitespaceSensitivity: "ignore"
};
同时确认 VSCode 的 [html] 或 [vue] 语言块设置了默认格式化器:"[html]": {"editor.defaultFormatter": "esbenp.prettier-vscode"};否则即使插件装了,VSCode 也不会调用它。
容易忽略的一点:Prettier 查找配置文件是从当前打开文件路径向上遍历,不是从工作区根目录开始——monorepo 或多根工作区里,子包若没自己的 .prettierrc,就会退回到默认双引号。











