如何在VSCode中配置Prettier彻底接管项目中所有的前端代码格式化-VSCode-PHP中文网

Prettier 不生效的根本原因是 VSCode 未为每种语言（如 javascript、typescript、vue）单独设置 esbenp.prettier-vscode 为默认格式化器，且易受 ESLint、.editorconfig 或插件冲突影响。

如何在vscode中配置prettier彻底接管项目中所有的前端代码格式化

为什么 `prettier` 总是不生效，或者只格式化部分文件

根本原因通常是 VSCode 没有把 prettier 设为指定语言的默认格式化工具，而是让 ESLint、TypeScript 自带格式器或其它插件“抢了活”。VSCode 默认按语言（如 javascript、typescript、vue）分别配置格式化器，不是全局开关。

实操建议：

打开 VSCode 设置（Cmd+, 或 Ctrl+,），搜索 default formatter

对每种目标语言单独设置：点击「Edit in settings.json」，添加类似这样的条目：

"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

别只配 "editor.defaultFormatter" 顶层项——它不生效，VSCode 不认这个写法
如果项目用 .prettierrc，确保它放在项目根目录，且文件名拼写准确（.prettierrc、.prettierrc.json、prettier.config.js 都行，但大小写和扩展名必须匹配）

`formatOnSave` 开了却没反应？检查这三处冲突点

常见错误现象：保存后代码纹丝不动，或者只缩进变、分号没加、单双引号没统一——大概率是其他插件或设置在干扰。

实操建议：

确认 "editor.formatOnSave": true 在工作区设置（.vscode/settings.json）中，而非用户级设置；工作区优先级更高，也更可靠
关掉可能冲突的设置："editor.codeActionsOnSave": { "source.fixAll": true } —— 这会触发 ESLint 自动修复，和 Prettier 格式化打架
禁用或卸载冗余插件：比如 JavaScript Booster、Beautify、旧版 Prettier 插件（确保只装 esbenp.prettier-vscode 官方版）

Vue / SFC 文件里 `<script></script>` 和格式化不一致

Vue 单文件组件默认被识别为 vue 语言，但 Prettier 对的 HTML 部分、<script></script> 的 JS/TS 部分、的 CSS 部分，需要分别启用解析器支持。缺一个，对应区块就原地躺平。

VSCode

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

下载

实操建议：

确保已安装 prettier-plugin-vue（v4+ 版本）：
```
npm install --save-dev prettier-plugin-vue
```
.prettierrc 中显式启用插件：
```
"plugins": ["prettier-plugin-vue"]
```
VSCode 设置里不要给 vue 单独配 "editor.defaultFormatter" 后又去配 "[html]" 或 "[javascript]" —— 这会导致被 HTML 格式器处理，和 Prettier 规则冲突

团队协作时格式化结果不一致，问题往往出在 `prettier` 版本或配置继承上

本地跑的是 Prettier v3.2，CI 里跑的是 v2.8，或者有人用 prettier.config.js 动态导出配置，而 VSCode 只读静态 JSON —— 这些都会导致格式化行为漂移。

实操建议：

锁定版本：在 package.json 的 devDependencies 中固定 prettier 版本（如 "prettier": "3.2.5"），避免 ^ 导致升级后规则变更
拒绝动态配置：不用 prettier.config.js 返回函数，改用 .prettierrc.json；VSCode 的插件不执行 JS 配置文件里的逻辑
加一条脚本到 package.json：
```
"format": "prettier --write \"src/**/*.{js,ts,vue,css,scss}\""
```
，CI 和本地统一走 CLI，不依赖编辑器行为