根本原因是vs code默认未授权prettier接管html,需在.vscode/settings.json中显式配置"[html]": {"editor.defaultformatter": "esbenp.prettier-vscode"}、禁用html.format.enable,并确保tabwidth与editor.tabsize一致、htmlwhitespacesensitivity设为"css"。

VS Code 里 HTML 格式化在 Windows/macOS/Linux 上表现不一致,根本原因不是系统差异,而是 Prettier 没被真正授权接管 HTML —— 所有平台都默认走 VS Code 内置格式器,除非你手动给 [html] 语言块配好格式化器。
为什么不同系统保存 HTML 后缩进/换行结果不一样
表面看是跨平台问题,实际是配置没落地:VS Code 的 html.format.enable 在所有系统上默认为 true,它会覆盖 Prettier;而 editor.tabSize 和 editor.insertSpaces 若只设在用户设置里,团队成员本地值可能不同,导致 Git 提交里混着空格和 Tab。
- 检查当前文件右下角语言模式是否为
HTML(不是Plain Text或PHP) - 打开任意
.html文件 → 右键 →Format Document With…→ 看列表里有没有Prettier - Code formatter - 若只有
Configure Default Formatter…,说明[html]语言块完全没配 - 删掉或注释掉
"html.format.enable": true(全局或工作区 settings.json 中)
必须写进 .vscode/settings.json 的三行关键配置
不能靠用户设置或全局设置,项目级 .vscode/settings.json 才能保证所有人行为一致。这三行缺一不可:
{
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.tabSize": 2,
"editor.insertSpaces": true
}
-
"[html]"是语言专属配置块,VS Code 只认这个路径,editor.defaultFormatter顶层设了也不管 HTML -
editor.tabSize必须和.prettierrc里的tabWidth严格一致,否则保存后缩进错位(比如tabWidth: 2但 VS Code 设成 4,标签会多缩进一倍) -
editor.insertSpaces: true强制用空格,避免有人本地开了 Tab 导致 Git diff 出现大量空白变更
.prettierrc 里 HTML 相关参数必须显式声明
很多团队以为装了插件、写了 printWidth 就够了,其实 HTML 行为极度依赖这三个字段,漏一个就容易出渲染异常或属性乱折行:
{
"printWidth": 100,
"tabWidth": 2,
"htmlWhitespaceSensitivity": "css"
}
-
printWidth: 100:默认 80 太小,<div class="a b c" data-id="123" title="long text"> 会被硬拆成三四行,反而难读<li> <code>tabWidth: 2:必须和 VS Code 的editor.tabSize对齐,否则格式化后缩进“漂移” -
htmlWhitespaceSensitivity: "css":设成"strict"或"ignore"会导致<p><img>text</p>被错误换行,破坏行内元素渲染逻辑 - 在
.vscode/settings.json里加:"[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"} - 如果用了 Vetur,必须关掉它的 HTML 格式器:
"vetur.format.defaultFormatter.html": "prettier" - 命令行批量格式化时,
.vue文件要加--parser html参数,否则 Prettier 可能误判为 Vue SFC 解析失败 - 验证方式:
npx prettier --write --parser html src/components/Hello.vue,成功即表示解析器就绪
Vue / 微信小程序等混合文件怎么同步生效
.vue、.wxml 这类文件里的 HTML 片段不会继承 [html] 配置,必须单独声明语言块,否则保存时毫无反应:
最常被忽略的其实是 prettier.requireConfig: true —— 不设这个,同事没装 Prettier 插件或本地没 .prettierrc,VS Code 就会退化成内置格式器,Git 提交里全是无意义的格式抖动。











