beautify、auto rename tag、htmlhint、eslint(未配prettier-eslint)等插件会干扰html/js/ts自动缩进,因它们劫持格式化请求导致shift+alt+f或保存时缩进错乱;beautify默认绑定html/javascript语言id,启用后vscode不再调用prettier或内置格式器,常见现象包括换行光标停行首、editor.autoindent设为"full"无效、保存时缩进被重置;定位方法:打开developer tools查看console日志中formatting with xxx提示,或禁用所有格式化类插件后测试是否恢复;禁用后需清理settings.json中残留的editor.defaultformatter配置,并确保editor.formatonsave为true、editor.autoindent为"full"、语言专属defaultformatter指向目标插件,同时保留volar等语言服务插件以保障vue/svelte等框架文件缩进正常。

哪些插件会干扰 HTML/JS/TS 的自动缩进?
Beautify、Auto Rename Tag、HTMLHint、ESLint(未配 prettier-eslint)等插件常在后台劫持格式化请求,导致 Shift+Alt+F 或保存时缩进错乱。尤其 Beautify 默认绑定 html 和 javascript 语言 ID,一旦启用,VSCode 就不再调用 Prettier 或内置格式器。
常见现象包括:
- 按
Enter换行后光标停在行首,而非自动缩进到父级层级 -
editor.autoIndent设为"full"却无反应 - 保存时缩进被“重置”成 4 空格,哪怕项目要求 2 空格
怎么快速定位冲突插件?
打开命令面板(Ctrl+Shift+P),执行 Developer: Toggle Developer Tools,切换到 Console 面板,再触发一次格式化(如 Shift+Alt+F)。如果看到类似 Formatting with Beautify 或 Formatting with ESLint 的日志,就说明当前格式化流程已被该插件接管。
更直接的验证方式:
- 禁用所有已安装的格式化类插件(搜索关键词:format、beautify、prettier、eslint、stylelint)
- 重启 VSCode 窗口
- 打开一个
.js或.html文件,手动执行Shift+Alt+F - 若此时缩进恢复正常,说明问题出在插件冲突上
禁用插件后还要检查什么?
禁用插件只是第一步。VSCode 会缓存语言默认格式化器设置,即使插件已禁用,editor.defaultFormatter 可能仍指向它。打开 settings.json,搜索并删除或注释掉类似这样的配置:
{"[html]": {"editor.defaultFormatter": "hookyqr.beautify"}}
否则下次启用 Beautify 时,VSCode 会“记住”旧绑定,再次抢走控制权。
同时确认以下三项都处于激活状态:
-
editor.formatOnSave为true -
editor.autoIndent为"full"(不是"none"或"advanced") - 对应语言的
editor.defaultFormatter明确指向你真正想用的插件,例如"esbenp.prettier-vscode"
Vue/Svelte/React 等框架文件要特别注意
这类文件依赖语言服务插件(如 volar、svelte-vscode)提供分段识别能力。如果禁用了它们,editor.autoIndent 对 <template></template> 或 <script setup></script> 就完全失效——不是缩进不准,而是压根不缩进。
所以禁用原则是:
- 只禁用纯格式化工具(Beautify、Prettier Code Formatter 等非官方别名)
- 保留语言服务类插件(Volar、Svelte for VS Code、TypeScript Vue Plugin)
- 确保
editor.defaultFormatter在[vue]、[svelte]等语言块中指向支持该语法的 formatter(如esbenp.prettier-vscode并配"prettier.parser": "vue")
defaultFormatter”和“语言服务是否就绪”。删插件容易,但删完忘了清配置、或误删了语言服务,反而让缩进彻底失能。











