html.format.indentInnerHtml必须设为true，否则<head>和<body>与<html>同层缩进，破坏嵌套结构；设为true后才符合语义层级，且需配合editor.insertSpaces:true、editor.tabSize:2及关闭editor.detectIndentation以避免空格与Tab混用。
VSCode 的 HTML 格式化不是“开箱即用就整齐”，它默认行为保守，html.format.indentInnerHtml 默认是 false，html.format.preserveNewLines 虽为 true 但不等于“保留你想要的换行”——很多格式混乱，其实是配置没对上语言服务或缩进语义。
为什么 html.format.indentInnerHtml 必须设为 true
这个配置决定 <html>、<body> 等根级容器的子元素是否缩进。默认 false 时，VSCode 会把 <head> 和 <body> 与 <html> 写在同一缩进层，破坏嵌套直觉：
<html> <head></head> <body></body> </html>
设为 true 后才符合结构预期：
<html> <head></head> <body></body> </html>
- 仅影响 HTML 文件（需确保语言模式是
html，右下角状态栏显示“HTML”） - 不影响属性缩进，那是
html.format.wrapLineLength和html.format.wrapAttributes控制的 - 若项目混用 Prettier，该配置会被忽略——Prettier 有自己的缩进逻辑，优先级更高
editor.tabSize 和 editor.insertSpaces 必须配对设置
缩进错乱最常见原因不是“没缩进”，而是空格和 Tab 混用。VSCode 默认根据文件已有缩进自动探测（editor.detectIndentation），但探测失败时会回退到全局 tabSize，而该值可能和当前文件不一致。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 关闭自动探测：
"editor.detectIndentation": false - 强制统一为空格：
"editor.insertSpaces": true - 明确缩进宽度：
"editor.tabSize": 2（推荐 2，语义清晰且兼容多数 CSS/JS 规范） - 若在
[html]块中设置，只作用于 HTML 文件；全局设置则影响所有语言
哪些标签不该被自动换行？用 html.format.unformatted 排除
VSCode 默认会对所有标签内容换行缩进，但像 <code>、<pre>、<textarea> 这类内联或预格式化内容，一旦被拆行，可能破坏原始语义或 CSS 白空间处理（比如 white-space: pre-wrap）。
- 添加配置：
"html.format.unformatted": ["code", "pre", "textarea", "script", "style"] -
script和style加入排除列表，是因为其内部是 JS/CSS，不应由 HTML 格式化器处理 - 注意：该配置只跳过内容缩进，不跳过标签自身换行（如
<pre>标签仍可能被单独成行） - 如果用了 Prettier，它用的是
htmlWhitespaceSensitivity控制类似行为，二者不可混用
保存即格式化失效？检查 editor.defaultFormatter 是否被覆盖
即使开了 "editor.formatOnSave": true，格式化仍可能不触发——VSCode 会按语言找默认 formatter，而某些插件（如 Auto Rename Tag、Ember CLI）会悄悄注册自己的 formatter 并抢占优先级。
- 显式指定 HTML 官方服务：
"editor.defaultFormatter": "vscode.html-language-features" - 确认该 extension 已启用（VSCode 自带，无需安装）
- 若同时装了 Prettier，必须在项目级
.vscode/settings.json中加"[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }，否则全局设置会被忽略 - 命令面板执行
Format Document With...可临时验证当前生效的 formatter 是哪个
真正难的不是配哪几行，而是不同工具链（VSCode 原生、Prettier、ESLint、.editorconfig）之间缩进策略的隐式冲突。比如 .editorconfig 设了 indent_style = space 和 indent_size = 4，但 VSCode 的 editor.tabSize 是 2，又开了 detectIndentation，结果打开旧文件就自动切成了 4 空格——这种细节不盯住，协作时 Git diff 就全是空格变更。
