VS Code 默认 HTML 格式化效果差是因为内置引擎未启用关键规则；需禁用默认格式化器、安装 Prettier、配置 .prettierrc 和项目级 settings.json 才能实现可靠一键格式化。
VS Code 默认格式化对 HTML 效果有限，直接按 Shift + Alt + F（Windows/Linux）或 Shift + Option + F（macOS）常导致属性挤成一行、嵌套缩进错乱、自闭合标签不加斜杠——这不是你操作错了，是默认引擎没配好。
为什么 VS Code 默认格式化 HTML 总是“糊弄事”
VS Code 内置的 HTML 格式化器基于语言服务解析 AST，但默认不启用关键规则：比如不自动换行长属性、不强制 img 和 input 加尾部 /、不区分语义块空行。它只做最基础的缩进对齐，不处理可读性细节。
-
html.format.wrapLineLength默认值为120，但实际写个带 5 个 class 的div就超了，却不会自动分行 -
html.format.indentInnerHtml默认是false，导致内子元素和同级缩进，结构模糊 - 不识别
data-属性优先级，常把class排在id后面，违反通用约定
三步配好 Prettier，让 HTML 真正“一键就干净”
装 Prettier 不够，得关掉 VS Code 默认 HTML 格式化器，并设为项目级默认。否则两个格式化器打架，保存时反复重排。
- 安装插件
Prettier - Code formatter，重启编辑器 - 在项目根目录建
.prettierrc，内容至少包含：{ "htmlWhitespaceSensitivity": "ignore", "printWidth": 100, "tabWidth": 2, "useTabs": false, "singleQuote": false, "bracketSameLine": false } - 在项目
.vscode/settings.json中明确指定格式化器："[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true }注意：不要只在全局设置里开formatOnSave，项目级才可靠
在线格式化工具能救急，但别信“粘贴即用”
像 beautifier.io 或 htmlformatter.com 确实点一下就出结果，但它们默认用 4 空格、强制换行所有属性、甚至把
<br>改成
<br />——这些改动可能和你团队规范冲突，也容易破坏内联 SVG 或某些 CMS 输出的原始结构。
立即学习“前端免费学习笔记（深入）”；
- 用前先试粘贴一段含
data-*、aria-*和模板语法（如{{name}}）的代码，看是否误删或转义 - 避免处理含服务器端 include（如
<!--#include file="header.html" -->）的文件，这类注释会被当成普通注释清掉 - 格式化后务必检查
srcset、style属性是否被折行切碎——在线工具常在这里翻车
真正省时间的不是“一键”，而是“一次配好不再动”。很多人反复调快捷键、换插件，其实卡在没关掉默认格式化器或没写 .prettierrc。Prettier 的 htmlWhitespaceSensitivity 和 VS Code 的 indentInnerHtml 组合，才是控制空行与嵌套的关键开关，这点最容易被忽略。
