如何配置VSCode快捷键进行全局代码美化？Prettier配合指南-VSCode-PHP中文网

vscode快捷键format document无反应，根本原因是未将当前文件交由prettier处理；需确保右下角语言模式正确（如javascript）、pretterr插件启用、项目含有效配置文件（.prettierrc或prettier.config.js），并为对应语言在settings.json中显式设置"editor.defaultformatter": "esbenp.prettier-vscode"。

如何配置vscode快捷键进行全局代码美化？prettier配合指南

为什么快捷键 Format Document 没反应

不是快捷键失效，而是 VSCode 根本没把当前文件交给 Prettier 处理。常见表现：按 Shift+Alt+F 后代码纹丝不动，右下角状态栏不显示 Prettier 标识，甚至显示 None 或 ESLint。

检查右下角语言模式——打开 .js 文件，必须显示 JavaScript，而非 Plain Text；点击它手动切换
确认插件已启用：扩展面板搜索 Prettier - Code formatter，发布者是 esbenp，状态为“已启用”
终端执行 npx prettier --version，有输出才说明 CLI 可用，插件底层调用链完整
若项目根目录无 .prettierrc 或 prettier.config.js，Prettier 会退回到极简默认规则，但部分格式（如单引号、分号）可能和你预期不符，容易误判为“没生效”

如何设置全局快捷键触发 Prettier

VSCode 默认的 Shift+Alt+F 是“格式化文档”，但它是否调用 Prettier，取决于语言绑定和默认格式化器配置。不能只靠快捷键本身。

必须在 settings.json 中为每种目标语言显式声明格式化器：
"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}
"[typescript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}
"[css]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}
editor.defaultFormatter 的值必须是扩展 ID：esbenp.prettier-vscode，写成 prettier 或 Prettier 都会失败
如果同时装了 ESLint 插件，保存或格式化时 VSCode 可能弹出“选择默认格式化工具”提示——必须点选 Prettier - Code formatter，否则它永远不接管
快捷键 Ctrl+K Ctrl+F（格式化选中内容）同样依赖上述语言绑定，未配置语言块时对选中代码也无效

微信小程序 WXML/JS/JSON 文件怎么一并美化

WXML 不是标准 HTML，Prettier 默认不识别。JS 和 JSON 虽然支持，但需确保语言模式正确，否则格式化器不会触发。

VSCode

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

下载

WXML 文件：安装微信官方插件 WXML - Language Services，它会让 VSCode 把 .wxml 文件识别为 wxml 语言模式；再加一条配置：
"[wxml]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}
JS 文件：确认后缀是 .js，且状态栏显示 JavaScript；小程序逻辑层常混用 require 和 export，只要语法合法，Prettier 就能处理
JSON 文件：VSCode 默认识别 .json 为 JSON 模式，但若文件含注释或 trailing comma，需在 .prettierrc 中设 "jsonRecursive": true（仅 v3.0+ 支持），否则可能报错退出
避免冲突：不要同时给 [javascript] 和 [json] 都配 editor.formatOnSave: true，JSON 文件被当作 JS 解析时会格式化失败

配置文件写错导致快捷键静默失效

.prettierrc 语法错误不会报红，而是让 Prettier 直接跳过该配置，回退到内置默认规则——你改了配置却看不到效果，大概率卡在这步。

JSON 格式必须严格：末尾不能多逗号，键名必须双引号包裹，布尔值不能加引号——{"semi": true} ✅，{"semi": "true"} ❌
若用 prettier.config.js，导出方式要匹配项目模块系统：
ESM 项目用 export default { semi: true }，
CommonJS 项目用 module.exports = { semi: true }
tabWidth 设为 2，但 editor.tabSize 还是 4？编辑器缩进和格式化结果会打架，光标跳动、折叠异常都可能出现
微信小程序项目常含 miniprogram/ 子目录，若想统一格式化，.prettierignore 里别漏写 node_modules 和 dist，否则格式化时卡住或报错

实际生效的关键不在快捷键本身，而在语言模式、格式化器绑定、配置文件三者是否严丝合缝。少一个环节，Shift+Alt+F 就只是个摆设。