VS Code保存自动格式化不生效的根本原因是格式化链路未打通,需检查三处:editor.formatOnSave是否设为true且置于项目级settings.json中;.html文件是否明确配置html.format.enable为true及对应defaultFormatter;editor.codeActionsOnSave是否干扰格式化行为。

VS Code 保存自动格式化不生效?检查这三处配置
根本原因不是 Prettier 没装,而是格式化链路没打通。常见现象是:手动运行 Format Document 能成功,但 Ctrl+S 保存后毫无反应。
-
editor.formatOnSave必须设为true,且写在项目级.vscode/settings.json中(不是用户全局设置) -
[*.html]文件关联必须明确指定格式化工具:html.format.enable设为true,且editor.defaultFormatter于html类型下指向esbenp.prettier-vscode - 若启用了
editor.codeActionsOnSave,它可能覆盖格式化行为;建议先清空该字段再测试
prettier 和 vscode-html-languageservice 同时存在时怎么选?
二者不能共存为默认格式器,否则会互相干扰——比如一个处理缩进,另一个重写属性换行,结果就是标签错位、属性挤成一行或断行异常。
- 用
esbenp.prettier-vscode:适合团队已统一采用 Prettier 规则、需跨语言(HTML/JS/CSS)一致风格的场景 - 用
vscode.html-language-features(VS Code 内置):轻量、无需额外依赖,但配置粒度粗(如无法控制wrapAttributes对齐方式),且不兼容自定义元素或模板语法 - 切忌在
settings.json里同时启用两者;可通过命令面板Ctrl+Shift+P→Format Document With...确认当前激活的是哪一个
.prettierrc 和 .editorconfig 缩进冲突怎么办?
二者不互斥,但职责不同,顺序错会导致“看起来生效了,实际不对”。
-
.editorconfig的indent_size = 4只影响新敲回车时插入的缩进字符数;它不管已有代码重排 -
.prettierrc的tabWidth: 2才真正决定格式化时所有标签的缩进宽度 - 若两者值不一致,你会看到:保存后标签按 2 格缩进,但光标新起行却插 4 个空格(需手动删)
- 推荐做法:
.editorconfig仅保留charset、end_of_line、insert_final_newline;缩进全交给.prettierrc
含 Vue/React 模板语法的 HTML 文件格式化失败?
Prettier 默认 parser 不识别 <template> 内的指令(如 v-if、{% raw %}{{ }}{% endraw %}),强行格式化可能破坏结构或报错。
立即学习“前端免费学习笔记(深入)”;
- 确保
.prettierrc中显式指定"parser": "html"(不是vue或angular) - 禁用可能冲突的插件,例如
prettier-plugin-vue若未正确安装或版本不匹配,反而导致prettier --write报Cannot find module 'prettier-plugin-vue' - 对旧版 IE 条件注释(
<!--[if IE]><![endif]-->)这类非标准语法,必须在.prettierrc中加"ignore": ["**/ie-legacy.html"]
prettier --check 失败拦住 PR,比十次口头强调更管用。



















