VSCode如何一键格式化？Prettier插件深度配置【教程】-VSCode-PHP中文网

shift+alt+f无反应或保存不格式化，是因为vscode未将prettier设为默认格式器，需在项目根目录.vscode/settings.json中为各语言显式配置"editor.defaultformatter"并重启窗口。

vscode如何一键格式化？prettier插件深度配置【教程】

Shift+Alt+F 按下没反应，或者保存后代码不变形——不是插件没装，而是 VSCode 根本没让 Prettier 接管格式化动作。必须显式指定语言、触发时机和规则源，缺一不可。

VSCode 默认不把 Prettier 当成任何文件的格式化器，哪怕插件已安装。它只会用内置格式器（比如 vscode.typescript-language-features）处理 JS/TS 文件。

右下角状态栏打开一个 .js 文件，看是否显示 Prettier；若显示 ESLint 或 None，说明未绑定
按 Ctrl+Shift+P（Mac 为 Cmd+Shift+P），输入 Format Document With → Configure Default Formatter → 选 esbenp.prettier-vscode
更可靠的做法：在项目根目录建 .vscode/settings.json，写入 "editor.defaultFormatter": "esbenp.prettier-vscode"
注意："editor.defaultFormatter" 写在顶层 settings.json 里是无效的；必须配合语言块或确保没有更高优先级的覆盖

这个开关只对当前语言生效，且极易被语言专属设置覆盖。JS 文件没反应，很可能是因为 "[javascript]": { "editor.formatOnSave": false } 这种配置静默关掉了它。

VSCode

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

下载

检查工作区 .vscode/settings.json 中是否同时存在 "editor.formatOnSave": true 和语言块，例如："[javascript]": { "editor.formatOnSave": true }
别只配全局 "editor.formatOnSave": true —— 它在语言块存在时会被忽略
如果用了 ESLint 扩展，确认 "editor.codeActionsOnSave": { "source.fixAll": true } 已禁用，否则 ESLint 会抢在 Prettier 前“修复”，导致格式混乱
改完配置后，**必须重启 VSCode 窗口**（不是重载窗口），否则部分设置不生效

Prettier 插件默认只读取项目根目录下的配置文件，且对文件名、语法、导出方式极其敏感。一个逗号、一个 export default、一个错位的缩进，都会让它静默退回到内置默认值（如 semi: true, tabWidth: 2）。

推荐使用 .prettierrc.json（不能带注释，必须是合法 JSON）
若用 JS 文件，必须用 CommonJS 导出：module.exports = { semi: false, singleQuote: true };，ESM 的 export default 在多数 VSCode 版本中不识别
配置项优先级：项目根目录 .prettierrc.json > package.json 中的 prettier 字段 > VSCode 设置里的 prettier.* 项
Vue 单文件组件需 Prettier ≥ 2.8.0；旧版本跳过 <script setup></script>，看起来像“没格式化”

Prettier 插件默认只绑定 javascript、typescript、vue 等语言 ID，.json、.md、.yml 不在默认列表里，所以按 Shift+Alt+F 完全无响应。

在 .vscode/settings.json 中添加语言专属绑定："[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
注意方括号内是语言 ID（json、markdown、yaml），不是扩展名；markdown 对应 .md 和 .markdown
若同时用 .editorconfig，确保 indent_style 和 tab_width 与 .prettierrc 中的 useTabs、tabWidth 一致，否则编辑器缩进和格式化结果打架
本地没装 prettier 包时，插件会报 Failed to load module 'prettier' —— 必须运行 npm install --save-dev prettier（推荐项目级安装）