VSCode内置HTML格式化器够用，但团队协作或复杂项目必须配Prettier；在线工具仅适合临时救急。内置格式器能解析AST、缩进标签、对齐属性、折行长行，但默认不缩进body子元素，且不处理自定义属性；Prettier则统一JS/CSS/HTML风格，需配置.prettierrc并显式绑定[html]语言块，关键项为htmlWhitespaceSensitivity和indentInnerHtml。
VSCode 内置格式化器够用，但团队协作或复杂项目必须配 Prettier；在线工具只适合临时救急，不能替代本地配置。
VSCode 默认 HTML 格式化器能做什么
VSCode 自带的 HTML 格式化器基于 TypeScript 语言服务，能解析 AST 并按层级缩进标签、对齐属性、折行长行。但它默认不缩进 html 和 body 的直接子元素，且对自定义属性（如 v-if、data-testid）不做特殊处理。
- 启用方式：设置
"editor.formatOnSave": true+ 快捷键Shift + Alt + F（Windows/Linux） - 关键配置项：
html.format.indentInnerHtml（设为true才会缩进body下第一层） - 默认缩进风格是制表符（
tab），但多数前端项目要求空格 —— 必须显式设"editor.insertSpaces": true和"editor.tabSize": 2 - 不支持属性排序、自动引号标准化、JSX/模板语法兼容等高级行为
Prettier 是团队项目的事实标准
当项目里有 Vue、React 模板，或需要统一 JS/CSS/HTML 风格时，Prettier 不是“可选”，而是必须。它把 HTML 当作“代码”而非“标记”来处理，所有规则由单一配置驱动。
- 安装扩展
Prettier - Code formatter后，需在项目根目录加.prettierrc，例如：{ "tabWidth": 2, "useTabs": false, "htmlWhitespaceSensitivity": "ignore", "printWidth": 100 } -
htmlWhitespaceSensitivity很关键：设为"ignore"才不会误删模板中用于控制空白的换行（比如<div><span>A</span><span>B</span></div>中的换行） - 和 ESLint 冲突常见于引号、分号、结尾逗号 —— 推荐禁用 ESLint 的格式类规则，只留
eslint-config-prettier - 保存即生效，且支持 Git Hook（如 Husky + lint-staged）做提交前校验
FreeFormatter 这类在线工具只适合单次调试
像 https://www.freeformatter.com/html-formatter.html 这类网页工具，优势是零配置、实时预览、错误高亮，但本质是“粘贴-点一下-复制”，无法集成进开发流。
立即学习“前端免费学习笔记（深入）”；
- 适合场景：排查别人发来的乱码 HTML 片段、快速查看未闭合标签、验证某段内联 JS 是否被格式化破坏
- 注意：它会把
<script>console.log('x')</script>中的 JS 当纯文本缩进，可能破坏原始逻辑缩进 - 不识别
.vue或.tsx中的 template 块，只吃纯 HTML 字符串 - 隐私风险虽低（宣称本地处理），但含敏感业务逻辑的 HTML 切勿上传
别忽略 .editorconfig 的协同价值
即使用了 Prettier，.editorconfig 仍是跨编辑器兜底方案。它不负责格式化，只声明“这个项目用 2 空格、LF 换行、UTF-8 编码”，连 Sublime 或 Vim 用户也能对齐。
- 内容示例：
root = true [*] end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true <p>[*.html] indent_style = space indent_size = 2
- VSCode 需装
EditorConfig for VS Code插件才生效 - 它比
settings.json更可靠：前者随项目走，后者是用户级配置，新人 clone 仓库后开箱即用 - 和 Prettier 不冲突 ——
.editorconfig管“编辑器行为”，Prettier 管“保存时重写”
真正容易被忽略的是 htmlWhitespaceSensitivity 和 indentInnerHtml 这两个开关：一个设错导致页面布局塌陷，一个关着让团队 HTML 层级永远不对齐。它们不像缩进空格数那么直观，但影响更隐蔽也更顽固。
