够用,但仅限简单场景;vscode内置vscode.html-language-features可处理基础嵌套与缩进,但不干预属性顺序、引号风格和空行逻辑,易致git冲突,而prettier基于ast提供可预测、跨项目一致的格式化结果。

VSCode 默认 HTML 格式化器够用吗?
够用,但仅限简单场景。VSCode 内置的 vscode.html-language-features 能正确处理标签嵌套、属性对齐和基础缩进,比如把 <div><p>text</p></div> 自动展开为多行结构。但它不解析语义,也不干预属性顺序、引号风格或空行逻辑——这些恰恰是团队协作中最容易引发 Git 冲突的地方。
Prettier 是当前最可靠的选择
不是“最强”,而是“最稳”。它把 HTML 当作 AST 处理,所有格式决策都基于配置而非启发式规则,结果可预测、跨项目一致。
-
tabWidth: 2和htmlWhitespaceSensitivity: "css"联合控制内联元素(如<span></span>)是否被换行,避免破坏视觉流 - 自动统一引号:默认用双引号,但设
singleQuote: true后,<div class="box"> 会变成 <code><div class="box"> <li>对 <code><pre class="brush:php;toolbar:false;"></pre>、<code>、<textarea></textarea>等标签默认跳过格式化,防止内容错乱 - 配合
.prettierrc+editor.formatOnSave: true,保存即生效,无需手动触发
Beautify 和 auto-close-tag 这类插件该不该装?
Beautify 适合老项目救急,尤其当 HTML 混着大量内联 JS/CSS 且结构松散时,它的容错率比 Prettier 高;但它无法与 ESLint / Stylelint 联动,配置项分散难维护。而 Auto Rename Tag 不是格式化插件,但属于“缩进感知型辅助”——改 <section></section> 开始标签时,它能精准定位并同步闭合标签,避免因手动删缩进而导致层级塌陷。
容易被忽略的关键点
格式化效果最终取决于三件事:语言模式是否为 HTML(右下角状态栏确认)、editor.defaultFormatter 是否指向你选的工具、以及 files.associations 是否把 .shtml 或 .vue 中的 template 块也纳入处理范围。少一个,就可能出现“点了格式化却没反应”或“只格式化了一半”的情况。











