VSCode安装Prettier插件代码洁癖必备VSCode自动格式化-VSCode-PHP中文网

prettier插件安装后不自动格式化，主因是未将esbenp.pretterr-vscode设为默认格式化器；需手动在设置中指定，并确保language-specific设置未禁用formatonsave，同时检查.prettierrc路径及解析器配置。

vscode安装prettier插件代码洁癖必备vscode自动格式化

Prettier 插件装了 ≠ 自动格式化生效，90% 的人卡在默认格式化器没设对这一步。

为什么保存代码后 Prettier 完全没反应

VSCode 不会因为插件已安装就自动把 Prettier - Code formatter 设为默认格式化器。它默认可能用内置的 JavaScript 格式器、ESLint，甚至 Vetur（Vue 项目里常见），导致你按 Ctrl+S 后缩进没变、引号没统一、分号没加——压根没走 Prettier 流程。

打开设置 → 搜索 default formatter → 点击下拉框，必须手动选中 esbenp.prettier-vscode（名称带短横线和空格，不是 prettier 或其他简称）
如果下拉列表里没有这个选项，说明插件未启用，或项目根目录下缺少 prettier 包（npm install --save-dev prettier 补上）
多根工作区中，每个子文件夹若独立项目，需各自有 node_modules/prettier 或配置文件，否则插件找不到运行时

JS/TS 文件保存不格式化？检查语言专属设置是否覆盖了全局

即使 editor.formatOnSave 是 true，VSCode 允许按语言单独关掉格式化。JavaScript 和 TypeScript 很容易被 [javascript] 或 [typescript] 的局部设置静默禁用。

VSCode

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

下载

搜索设置项 format on save，找到带方括号的语言特定条目（如 [javascript]），确认其值不是 false

更稳妥：直接在 settings.json 中显式声明：

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

Vue 文件还要额外加 [vue] 块，否则 <script></script> 里的 JS 不会被触发格式化

.prettierrc 配置文件不生效？路径和解析器是关键

Prettier 插件只认独立配置文件（.prettierrc、prettier.config.js 等），**完全忽略 package.json 里的 prettier 字段**。而且它对文件类型和解析器的推断很机械。

配置文件必须放在 VSCode 工作区根目录（即你执行 code . 打开的那个文件夹），插件默认只向上查找一级
.js 默认用 babel 解析器，.ts 用 typescript，但遇到 export type、JSX 或 Vue SFC 时容易误判，报错或跳过
解决办法：在 .prettierrc 中强制指定 "parser": "typescript"，让所有 .ts 和 .tsx 文件都走 TS 解析器

和 ESLint / Vetur 一起用时，格式化冲突怎么破

ESLint 和 Prettier 规则重叠（比如分号、引号、逗号），同时开启 eslint.enable 和 editor.formatOnSave 极易互相覆盖，出现“保存后又变回原样”或“格式化两次”的现象。

推荐方案：关闭 editor.formatOnSave，改用 ESLint 的 eslint.format.enable: true，再把 Prettier 集成进 ESLint 规则（通过 eslint-config-prettier）
Vue 项目若装了 Vetur，它自带格式化能力，会和 Prettier 冲突；必须在 settings.json 中禁用 Vetur 的格式化：
```
"vetur.format.enable": false
```
如果坚持双工具并存，至少确保 prettier.requireConfig: true，避免无配置时 fallback 到 VSCode 内置规则

真正麻烦的从来不是装插件，而是配置加载顺序、语言覆盖优先级、解析器误判这三者叠加——一个没对齐，整套自动格式化就静音了。