Prettier生效需三步:设为默认格式化器、开启保存时格式化、配置.prettierrc文件;还需为JSON/Markdown等语言手动绑定格式化器,并与ESLint协同避免冲突。

装了 Prettier 插件但按 Shift+Alt+F 没反应,或者保存后代码没变化——根本原因不是插件没装好,而是 VSCode 没把它当“默认格式化器”,也没告诉它“保存时该干活”。配置不到位,插件就是摆设。
怎么让 Prettier 真正生效(不是只装插件)
Prettier 插件本身不带默认规则,也不自动接管格式化动作。你必须显式指定它为当前文件的格式化工具,并打开触发开关。
- 按
Ctrl+Shift+P(Mac 用Cmd+Shift+P),输入Format Document With,选Configure Default Formatter,再选esbenp.prettier-vscode - 右下角状态栏点格式化器图标(显示如
Prettier或ESLint),确认当前激活的是 Prettier;如果是其他工具,点它手动切换 - 确保
editor.formatOnSave已开启:在设置里搜format on save并勾选,或在settings.json中加"editor.formatOnSave": true
为什么 .prettierrc 文件不能少
没有 .prettierrc(或 prettier.config.js),Prettier 就用内置默认值:比如 tabWidth: 2、semi: true。这些和你团队规范可能完全相反,而且 VSCode 设置里那些“Prettier”开头的开关项(如 prettier.semi)只是极简覆盖,无法替代完整配置。
- 推荐在项目根目录新建
.prettierrc.json,内容例如:{"semi": false, "singleQuote": true, "tabWidth": 2, "printWidth": 80, "trailingComma": "es5"} - 别用
.prettierrc(无后缀)——部分版本 VSCode 会识别失败;也别放在子目录里,Prettier 默认只向上查找一次 - 如果项目有
.editorconfig,注意它和 Prettier 的tabWidth、indent_style别冲突,否则编辑器缩进和格式化结果会打架
JSON / Markdown / YAML 文件怎么也用 Prettier 格式化
Prettier 插件默认只绑定 javascript、typescript、vue 等语言 ID。像 .json、.md、.yml 这类文件,即使装了插件也不会响应 Format Document。
- 在工作区或用户
settings.json中手动指定语言专属格式化器:"[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },<br>"[markdown]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },<br>"[yaml]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } - 注意语法:方括号是语言 ID,不是文件扩展名;
json对应.json,markdown对应.md或.markdown - 如果用了 ESLint,记得加
eslint-config-prettier关掉它的格式类规则,否则保存时 ESLint 和 Prettier 可能互相覆盖
最容易被忽略的一点:Prettier 配置文件路径必须正确,且不能被 .prettierignore 错误排除;另外,VSCode 的 editor.tabSize 建议和 .prettierrc 里的 tabWidth 保持一致,否则光标对齐和格式化结果会错位。


















