在Windows 10中用VS Code配合Prettier可实现保存时自动代码美化：先安装官方Prettier插件，设为默认格式化工具并启用“保存时格式化”，再按语言类型配置defaultFormatter，最后在项目根目录创建.prettierrc.json统一规则。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在Windows 10系统中使用VS Code配合Prettier实现代码风格统一和保存时自动美化，是前端团队协作的刚需——你不再需要反复手动调整缩进、引号或分号，也不用担心同事提交的代码突然变成4空格+双引号+无分号的混合体。只要配置正确，Ctrl+S那一刻，代码就自动对齐、换行、加空格，干净得像刚洗过一样。
安装官方Prettier插件
打开VS Code，按 Ctrl+Shift+X 进入扩展市场。
在搜索框输入 Prettier - Code formatter，认准发布者为 Esben Petersen、下载量超2000万的那个——别点“Prettier”“Prettier ESLint”这类名字近似的山寨插件，【装错会导致格式化后代码结构崩坏，且无法撤销】。
点击“安装”，完成后右下角会短暂弹出Prettier图标。
设为默认格式化工具并启用保存自动格式化
按下 Ctrl+, 打开设置界面，在搜索框输入 default formatter。
找到 Editor: Default Formatter，点击下拉菜单，选择 esbenp.prettier-vscode ——注意拼写必须完全一致，漏掉 -vscode 或写成 Prettier 都会失效。
接着在搜索框输入 format on save，勾选 Editor: Format On Save。
这一步做完，JS/TS文件保存时就会触发Prettier，但CSS、HTML、JSON等语言还没绑定——别急，下一步补全。
按语言类型精准绑定格式化器
打开命令面板：Ctrl+Shift+P → 输入 Preferences: Configure Language Specific Settings... → 回车。
在弹出的语言列表中依次选择：javascript → typescript → html → css → json。
通过本地 Codex 或 OpenClaw OAuth 凭证直接调用 ChatGPT/Codex Responses 的 image_generation 工具来生成或编辑光栅图像，然后保存
每选一个，VS Code会自动打开对应语言的设置JSON块，往里面粘贴这一行：
"editor.defaultFormatter": "esbenp.prettier-vscode"
这样做的原因是：VS Code的顶层 editor.defaultFormatter 只影响当前活动语言，而语言块配置能确保所有目标文件类型都被Prettier接管——否则你改完JS代码自动美化了，一打开.vue里的template却还是歪的。
创建项目级.prettierrc.json统一规则
在项目根目录（即包含package.json的文件夹）右键 → 新建文本文件，重命名为 .prettierrc.json（注意开头的点，不能漏）。
用记事本或VS Code打开它，粘贴标准配置：
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"printWidth": 80,
"trailingComma": "es5"
}
保存文件。VS Code会在右下角状态栏实时显示Prettier图标，且悬停时能看到当前生效的配置项——如果没反应，检查文件名是否多打了空格或用了.txt后缀。
验证配置是否真正生效
方法一：打开任意.js文件，随便敲几行不规范代码，比如 const a= {name:'test'}，然后按 Ctrl+S ——立刻变成 const a = { name: 'test' };。
方法二：右键 → Format Document With → 选 Prettier - Code formatter，看代码是否重排。
方法三：打开一个.vue文件，切换到 <script> 标签内，输入 function test(){return 1}，保存后应自动补分号、空格、换行——若没变化，说明 [vue] 语言块没配，回上一步补上。
