VSCode内置HTML格式化器开箱即用但默认配置不适用真实项目，因indentInnerHtml默认false导致body内标签无缩进、wrapLineLength=120易破坏长属性结构，且与Prettier共存时需禁用html.format.enable并指定defaultFormatter。
VSCode 内置 HTML 格式化器开箱即用，但默认配置对真实项目往往不够友好——比如 html.format.indentInnerHtml 默认为 false，导致 <body> 内标签和 <head> 一样顶格，结构混乱；又比如 wrapLineLength 设为 120，但现代组件模板常含长属性，一折就碎。
为什么不能只靠“格式化文档”快捷键
VSCode 的 Shift + Alt + F（Windows/Linux）或 Shift + Option + F（macOS）触发的是语言服务级格式化，它依赖当前文件的 languageId（如 html）匹配对应规则。但问题在于：
- 若文件后缀是
.vue或.astro，默认不走 HTML 格式器，除非显式配置"html.format.enable": true在对应语言设置中 - 若项目里混用 Prettier，而没禁用 VSCode 默认 HTML 格式器，两者会打架：Prettier 可能删掉空行，HTML 格式器又强行加回缩进
- 未启用
editor.formatOnSave时，手动格式化容易遗漏，尤其在多人协作中，原始换行和属性顺序迅速失控
关键配置项怎么设才不翻车
直接改项目根目录下的 .vscode/settings.json，而非用户全局设置，避免污染其他项目：
-
"html.format.wrapLineLength"：建议设为0（禁用自动折行），把换行控制权交给语义（如属性分组、逻辑块）而非字符数 -
"html.format.indentInnerHtml"：必须设为true，否则<body>下所有标签和<head>同级缩进，破坏视觉层级 -
"html.format.preserveNewLines"：保持true，否则手写的空行会被清空，影响可读性分区 -
"html.format.unformatted"：追加["pre", "code", "textarea"]，防止代码块被错误缩进或换行
示例片段：
立即学习“前端免费学习笔记（深入）”；
{
"editor.formatOnSave": true,
"html.format.indentInnerHtml": true,
"html.format.wrapLineLength": 0,
"html.format.preserveNewLines": true,
"html.format.unformatted": ["pre", "code", "textarea"]
}
和 Prettier 共存时必须关掉什么
如果你已在项目中使用 prettier（比如通过 prettier.config.js 管理 HTML 规则），VSCode 的内置 HTML 格式器就成了冗余甚至冲突源：
- 必须在
.vscode/settings.json中关闭："html.format.enable": false - 同时确保
"editor.defaultFormatter"指向esbenp.prettier-vscode，且仅对html语言启用 - 检查
prettier.config.js是否包含htmlWhitespaceSensitivity: "ignore"，否则 Prettier 对空白敏感，可能误删换行
常见报错现象：Format on save failed: No formatter found for 'html' —— 这说明 Prettier 插件没启用，或 defaultFormatter 没正确绑定到 html 语言。
语义化标签缩进异常的真正原因
你写好 <header><nav><ul><li>，却看到 <nav> 和 <header> 缩进不一致？这不是 bug，而是 VSCode HTML 格式器对“语义容器”的识别逻辑有限：
- 它只对标准块级元素（如
<div>,<p>）做常规缩进，对<header>,<main>等语义标签默认不特殊处理 - 解决办法不是硬调缩进参数，而是统一用
html.format.wrapAttributes: "force-aligned"强制属性换行对齐，让嵌套结构靠属性位置暴露层级 - 更彻底的方案：改用
prettier+prettier-plugin-html，它对语义标签有原生支持，缩进行为更符合直觉
真正的难点不在配多少项，而在于理解：VSCode 的 HTML 格式器本质是“结构重排”，不是“风格统一”。想靠它实现团队级 HTML 风格收敛，迟早撞墙。
