VSCode集成Prettier实现保存即格式化-VSCode-PHP中文网

根本原因是vs code未调用prettier，需手动指定默认格式化器为esbenp.prettier-vscode，并在.settings.json中配置editor.defaultformatter；同时确保formatonsave对各语言启用、.prettierrc文件正确、eslint与prettier规则协调。

vscode集成prettier实现保存即格式化

为什么保存后代码完全没变化

根本原因不是插件没装，而是 VS Code 压根没调用 Prettier —— 它默认不接管格式化，得你手动指派。状态栏右下角显示的格式器名称（比如 ESLint 或空白）就是关键线索：只要不是 Prettier - Code formatter，说明绑定失败。

按 Ctrl+Shift+P（Win/Linux）或 Cmd+Shift+P（Mac），输入 Format Document With → Configure Default Formatter → 选中 Prettier - Code formatter（注意名称含短横线和空格）
更稳妥的做法：在项目根目录的 .vscode/settings.json 中写死绑定：
```
{"editor.defaultFormatter": "esbenp.prettier-vscode"}
```
检查扩展 ID 是否正确：esbenp.prettier-vscode 是唯一有效值，填 prettier、Prettier 或漏掉 -vscode 都会失败
若项目里没装 prettier 包，运行 npm install --save-dev prettier；全局安装虽能用，但版本不一致易导致行为差异

保存时格式化开关开了却只对部分文件生效

全局 editor.formatOnSave 开关只是“总闸”，真正起作用的是语言专属设置。JS/TS/Vue 文件常被单独禁用，尤其当你装了 ESLint 插件后，它可能悄悄覆盖了你的配置。

打开设置搜索 format on save，找到带方括号的语言项，如 [javascript]、[typescript]、[vue]，确认它们的值不是 false

直接在 .vscode/settings.json 中声明：

{
  "editor.formatOnSave": true,
  "[javascript]": { "editor.formatOnSave": true },
  "[typescript]": { "editor.formatOnSave": true },
  "[vue]": { "editor.formatOnSave": true }
}

Vue 单文件组件里的 <script></script> 块必须显式启用 [vue]，否则 JS 不会被格式化
多根工作区中，每个子文件夹需各自有 .prettierrc，或在最外层放一个统一配置

.prettierrc 配置写了但格式化结果还是不对

Prettier 插件只读取独立配置文件（.prettierrc.json、.prettierrc.js 等），完全忽略 package.json 里的 prettier 字段。而且它对解析器的推断很机械，容易误判语法类型。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

优先用 .prettierrc.json，避免语法错误导致静默失效（比如末尾多逗号、ESM 项目里用了 module.exports）
TS/JSX 文件加 "parser": "typescript" 强制解析器，否则遇到 export type 或 JSX 可能跳过格式化
Vue 项目必须配 "parser": "vue" 并安装 prettier-plugin-vue，否则 <template></template> 和 <style></style> 块不生效
tabWidth 设为 2 却没同步改 VS Code 的 editor.tabSize，会导致编辑器缩进和格式化结果打架

和 ESLint 一起用时越格式化报错越多

ESLint 和 Prettier 规则重叠（比如引号、分号、缩进），不协调就会互相推翻。这不是谁取代谁的问题，而是职责分离：Prettier 管样式，ESLint 管逻辑。

装两个包：eslint-config-prettier（关冲突规则） + eslint-plugin-prettier（把 Prettier 当 ESLint 规则跑）
在 .eslintrc 里确保 eslint-config-prettier 放在 extends 最后一项，否则前面规则会覆盖它
禁用 ESLint 的自动修复："eslint.autoFixOnSave": false，改用 "eslint.format.enable": true 让 ESLint 调用 Prettier 格式化
别同时开 editor.formatOnSave 和 eslint.autoFixOnSave，否则两者竞争触发，结果不可控

最容易被忽略的点是：每次改完 .prettierrc.cjs 或 .eslintrc 后，VS Code 不会热加载——必须重启窗口才能生效。