prettier 的 singlequote 必须显式设为 true 才生效,否则默认用双引号;需在项目根目录配置 .prettierrc.json 或 prettier.config.js,字段名和布尔值须符合 json 规范,且 vscode 默认格式化器必须设为 esbenp.prettier-vscode。

Prettier 的 singleQuote 必须显式设为 true,否则 VSCode 保存时不会把双引号转成单引号。它不猜你想要什么,只认配置文件里写的值。常见现象是:按 Shift+Alt+F 或开启 formatOnSave 后,"hello" 还是 "hello",没变成 'hello'——问题八成出在配置没生效或被覆盖。
为什么 .prettierrc 里写了 singleQuote: true 还是无效?
VSCode 的 Prettier 插件默认只读项目根目录下的配置文件,且有严格格式要求:
-
.prettierrc(无后缀)可能被部分 VSCode 版本忽略,推荐用.prettierrc.json或prettier.config.js -
.prettierrc.json必须是标准 JSON:字段名和字符串值都要加双引号,"singleQuote": true不能写成"singleQuote": "true"或漏掉引号 -
prettier.config.js必须用module.exports = { singleQuote: true },ESM 写法(export default)不被官方插件支持 - 配置文件不能放在子目录里;VSCode 不会向上递归查找,也不会自动读
package.json中的prettier字段(除非手动启用prettier.resolveConfigPath)
VSCode 设置里哪些项会干扰 singleQuote 生效?
即使配置文件正确,VSCode 自身的语言偏好和格式化链路也可能“抢走控制权”:
-
javascript.preferences.quoteStyle和typescript.preferences.quoteStyle是 VSCode 内置语言功能,和 Prettier 无关。它会在你键入字符串、重命名变量时自动补单引号,造成“刚格式化完又变回去”的错觉。应设为auto或直接删掉这一项 -
editor.defaultFormatter必须明确设为"esbenp.prettier-vscode"。如果右下角状态栏显示的是 ESLint 或空白,说明当前文件没交给 Prettier 处理 - 检查语言专属设置,比如
"[javascript]": { "editor.defaultFormatter": "vscode.typescript-language-features" }会覆盖全局设置,让 JS 文件永远用 TS 自带格式器 -
eslint.format.enable如果为true,ESLint 可能在保存时抢先格式化,把 Prettier 改好的单引号再翻回去
Vue / TypeScript 文件里 singleQuote 不生效怎么办?
这不是 singleQuote 配置错了,而是 Prettier 缺少对应语言的解析能力:
- Vue 单文件组件中
<script></script>块里的字符串要转单引号,必须确保 Vetur 或 Volar 已安装并启用,且 Prettier 插件能识别.vue文件类型 - TypeScript 接口属性名(如
{"name": string})是否加引号,由quoteProps控制,不是singleQuote。默认值是"as-needed",若想强制加引号,需额外配"quoteProps": "always" - TSX/JSX 中字符串引号还受
jsxSingleQuote影响,它独立于singleQuote。若 JSX 里还是双引号,检查是否漏设了"jsxSingleQuote": true - 确认文件关联正确:右下角语言模式显示的是
Vue或TypeScript React,而不是Plain Text或JavaScript
最容易被忽略的一点:Prettier 对模板字符串(`hello ${name}`)完全不处理 singleQuote,它只改单双引号,反引号永远保留。如果你在代码里混用了 'foo'、"bar" 和 `baz`,格式化后只有前两者会被统一,后者纹丝不动。











