应配置"html.format.unformatted":"code,pre,em,strong,span"防止内联元素被错误折行，设"html.format.wrapLineLength":120避免短标签换行，禁用自动检测缩进并统一tabSize为2，同时确保自闭合标签使用XHTML风格、属性值用双引号、嵌套符合HTML5规范，并通过.editorconfig和.prettierrc统一团队格式。
嵌套过深时缩进容易错位，怎么稳住层级
VS Code 默认对 <div> 套 <div> 多层后可能缩进混乱，尤其混入 <span>、<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> 直接塞进 <p>，或者 <header> 放在 <div> 外面又没包 <body>，VS Code 格式化时会按错误结构缩进，越整越乱。
格式化不是万能胶，它只美化已有结构：
- 确认嵌套符合 HTML5 规范：查 MDN 的
<article>元素文档，看“Permitted parents”列表 - 用浏览器开发者工具的
Elements面板实时观察渲染树，比源码缩进更能暴露嵌套错误 - 如果
<main>下直接跟<div class="card">，没问题；但<main><h2>标题</h2><div>内容</div>缺少<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}"
格式化解决的是“怎么排”，不是“怎么写”。嵌套是否合理、标签是否语义正确、结构是否可访问——这些得靠人判断。工具只是把已知正确的结构，清晰地呈现出来。
