应配置"html.format.unformatted":"code,pre,em,strong,span"防止内联元素被错误折行，设"html.format.wraplinelength":120避免短标签换行，禁用自动检测缩进并统一tabsize为2，同时确保自闭合标签使用xhtml风格、属性值用双引号、嵌套符合html5规范，并通过.editorconfig和.prettierrc统一团队格式。
嵌套过深时缩进容易错位，怎么稳住层级
VS Code 默认对 <div> 套 <code><div> 多层后可能缩进混乱，尤其混入 <code><span></span>、<em></em> 等内联元素时，自动换行会把内容切开，破坏语义和视觉结构。
关键不是“多缩进几格”，而是让编辑器知道哪些标签不该被拆开：
- 在
settings.json中添加："html.format.unformatted": "code,pre,em,strong,span"，防止内联内容被错误折行 - 把
"html.format.wrapLineLength"设为120或更高，避免短标签被强行换行 - 禁用自动检测缩进：
"editor.detectIndentation": false，再统一设"editor.tabSize": 2
自闭合标签和空格混用导致格式化失败
格式化工具（如 Prettier 或 VS Code 内置）遇到 <img src="a.jpg"> 这种没斜杠的写法，有时会拒绝处理整段，或在 <br> 后多插空行。
这不是 bug，是解析器对语法严谨性的反馈：
- 所有自闭合标签统一写成 XHTML 风格：
<img src="a.jpg" alt="">、<input type="text"> - 属性值必须用双引号：
class="header-nav"，不能是class='header-nav'或无引号 - 格式化前先用 W3C Validator（
validator.w3.org）粘贴检查，修复Unclosed element类报错
语义化标签嵌套不合法，格式化后反而更难读
比如把 <article></article> 直接塞进 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill2570" title="Baoyu Markdown To Html"><img
src="https://img.php.cn/upload/skill/000/000/081/178918939167217.jpg" alt="Baoyu Markdown To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill2570" title="Baoyu Markdown To Html" class="overflowclass">Baoyu Markdown To Html</a>
<p class="overflowclass">将 Markdown 转换为微信兼容的样式化 HTML，支持代码高亮、数学公式、PlantUML、脚注、提示框、信息图以及可选机器人...</p>
</div>
<a rel="nofollow" href="/xiazai/skill2570" title="Baoyu Markdown To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>，或者 <header></header> 放在 <div> 外面又没包 <code>，VS Code 格式化时会按错误结构缩进，越整越乱。
格式化不是万能胶，它只美化已有结构：
- 确认嵌套符合 HTML5 规范：查 MDN 的
<article></article>元素文档，看“Permitted parents”列表 - 用浏览器开发者工具的
Elements面板实时观察渲染树，比源码缩进更能暴露嵌套错误 - 如果
<main></main>下直接跟<div class="card">，没问题；但 <code><main><h2>标题</h2> <div>内容</div></main>缺少<section></section>包裹，虽不报错，但格式化后层级感弱团队协作中格式化规则不一致怎么办
有人用 2 空格，有人用 4 空格；有人习惯每行一个属性，有人把所有属性堆在一行——格式化快捷键一按，冲突立刻爆发。
靠口头约定没用，得靠机器强制：
- 项目根目录加
.editorconfig文件，明确写死：indent_style = space、indent_size = 2、end_of_line = lf - 配合
.prettierrc（哪怕只配"htmlWhitespaceSensitivity": "css"）统一空格敏感策略 - 禁止提交未格式化代码：用 husky + lint-staged，在
pre-commit钩子里跑prettier --write "**/*.{html,css,js}"
格式化解决的是“怎么排”，不是“怎么写”。嵌套是否合理、标签是否语义正确、结构是否可访问——这些得靠人判断。工具只是把已知正确的结构，清晰地呈现出来。
- 项目根目录加
