VSCode代码格式化插件_VSCode自动对齐代码技巧【指南】-VSCode-PHP中文网

vs code 保存时自动格式化需同时满足：插件启用、language-specific editor.defaultformatter 正确配置、文件类型被支持；右下角状态栏显示格式器名称（如pretterr）才表示生效，否则需手动配置默认格式器并确保prettier cli已安装。

vscode代码格式化插件_vscode自动对齐代码技巧【指南】

VS Code 保存时自动格式化代码对齐，不是开了 editor.formatOnSave 就能生效——它必须同时满足：插件已安装并启用、editor.defaultFormatter 按语言正确指定、且当前文件类型被该格式化器支持。缺一不可。

打开一个 .js 文件，右下角状态栏显示什么？如果是 Prettier，说明配置基本到位；如果显示 None 或 JavaScript Language Features，那说明 VS Code 根本没把 Prettier 当成这个文件的格式化器。

点击状态栏语言标识（如 “JavaScript”），选 Configure Default Formatter for 'javascript'，再选 Prettier
不要只依赖 GUI 勾选 Format On Save，直接编辑 settings.json 更可靠，避免工作区设置覆盖用户级设置
检查是否误配了全局 editor.defaultFormatter：VS Code 不允许一个格式化器通吃所有语言，.py 文件遇到 esbenp.prettier-vscode 会静默失败或报错

esbenp.prettier-vscode 插件只是个“调度员”，它需要本地或全局安装的 prettier 包来干活。没装包，就会在开发者工具 Console 里看到类似 Failed to load module 'prettier' 的报错。

VSCode

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

下载

推荐在项目根目录运行 npm install --save-dev prettier（或 yarn add -D prettier），保证版本和团队一致
全局安装（npm install -g prettier）在 macOS + nvm 或某些 Linux 环境下容易路径找不到，不建议
插件不会自动降级使用内置格式器，它要么调用你装的 prettier，要么直接失败

.vue 文件里 <script></script> 块能格式化但 <template></template> 不动，常见原因是 Prettier 没注册对 vue 语言的支持，或者你只配了 [javascript] 却没配 [vue]。

在 settings.json 中显式声明："[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
确保文件右下角语言模式是 Vue，不是 HTML；如果不是，点击它 → Configure File Association for '.vue' → 选 Vue
.scss 同理，要配 [scss]，不能指望 [css] 自动继承

保存后缩进从 2 变 4 再变回 2，本质是两个工具都在抢格式化控制权。禁用某一方不是解法，关键是让它们各干各的活。

Prettier 负责样式：缩进、引号、换行、逗号——关掉它的 ESLint 集成："prettier.requireConfig": true（新版已移除 prettier.eslintIntegration）
ESLint 负责逻辑：变量未使用、函数命名、安全规则——关掉它的格式化能力："eslint.format.enable": false
项目级配置优先于 VS Code 设置：.prettierrc 或 package.json 里的 prettier 字段才真正生效，VS Code 的 prettier.* 设置项只是 fallback

最常被忽略的一点：格式化行为最终由语言服务决定，而语言服务依赖文件后缀、语言关联、插件启用状态三者共同触发。哪怕配置全对，只要右下角语言模式错了，就等于没配。