vs code 保存时可自动用2个空格缩进html，需启用editor.formatonsave、html.format.enable，并配置"editor.tabsize": 2和"editor.insertspaces": true，禁用editor.detectindentation以确保缩进一致。
VS Code 保存时自动缩进 HTML
直接配好就能用，不用每次手动 Tab。关键不是“能不能缩”，而是缩得是否一致、是否符合团队规范。
打开 VS Code 设置（Ctrl+, 或 Cmd+,），搜索 editor.formatOnSave，勾选它；再搜 html.format.enable，确保为 true；最后配格式化器：在设置里加这三行：
"html.suggest.html5": true, "editor.tabSize": 2, "editor.insertSpaces": true
这样保存时会自动用 2 个空格缩进，且禁用 Tab 字符，避免不同编辑器显示错位。
-
editor.detectIndentation建议设为false，否则粘贴旧代码可能把整个文件缩进带偏 - 如果项目已有
.prettierrc，优先以它为准；Prettier 的tabWidth: 2和useTabs: false必须和上面设置一致 - 对内联 SVG 或模板字符串里的 HTML，内置格式化器常失效，此时要靠 Prettier 插件或手动加
/* prettier-ignore */
HTML 属性换行与对齐怎么控制
默认格式化器（包括 Prettier）通常把长标签所有属性堆在一行，可读性差。想让每个属性独占一行、并右对齐到起始标签后，得靠工具级配置。
例如这个标签：
<div class="card" id="main" data-id="123" aria-label="content"> <p>你希望它变成：</p> <pre class="brush:php;toolbar:false;"><div class="card" id="main" data-id="123" aria-label="content"> <p>方法是：在 Prettier 配置中启用 <code>htmlWhitespaceSensitivity: "ignore"</code>，并加 <code>html.format.wrapAttributes: "force-aligned"</code>（VS Code 内置 HTML 格式化器支持）；若用命令行工具 <code>tidy</code>，则需 <code>--indent-attributes yes</code> 参数。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7761" title="Article To Html"><img src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="overflowclass">Article To Html</a> <p class="overflowclass">文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p> </div> <a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li> <code>wrapAttributes: "auto"</code> 仅在超长时换行，不保证对齐</li> <li> <code>"force"</code> 换行但不对齐，视觉混乱</li> <li>属性名对齐依赖编辑器渲染宽度，终端里可能错位，CI 流水线建议统一用 <code>"force"</code> 避免 diff 波动</li> </ul> <h3>为什么 <code>text-indent</code> 在表格里不生效</h3> <p>不是写错了，是语义没对上。<code>text-indent</code> 只作用于块级盒的首行，而 <code><td> 默认是 <code>table-cell</code> 盒，不产生行盒（line box），自然不响应首行缩进。<p>常见现象：<code><td style="text-indent: 2em;">文字</td></code> 看不出变化，开发者工具里 <code>Computed</code> 显示 <code>text-indent: 2em</code> 却没效果。</p> <ul> <li>最稳方案：改用 <code>padding-left: 2em</code>，它直接推内容，不依赖渲染上下文</li> <li>若必须保留“首行”语义（如导出 PDF 时匹配印刷规范），就包一层 <code><div style="text-indent: 2em;">内容</div></code> </li> <li>千万别给 <code><table> 设 <code>text-indent</code> —— 它会继承到所有 <code><th>，表头也缩进，纯属误伤<li>短文本（如 “是/否”）即使加了 <code>text-indent</code> 也看不出，因为整段就一行，“缩了等于没缩”</li> <h3>手写 HTML 时缩进容易踩的坑</h3> <p>自动化工具再强，也救不了手写时的直觉错误。真正卡住人的，往往是那些“看起来没错”的缩进写法。</p> <p>比如这段：</p> <pre class="brush:php;toolbar:false;"><div> <p>第一段</p> <span>内联内容</span> </div>
表面看 <p></p> 缩进正确，但 <span></span> 和 <p></p> 同级，却没缩进到同一层级——浏览器能渲染，Git Diff 却会把这当成结构变更，Code Review 时极易漏看。
- 嵌套元素必须严格比父元素多一级缩进，哪怕它是
<img>或<input>这类自闭合标签 -
<pre class="brush:php;toolbar:false;"></pre>里的内容不参与 HTML 缩进逻辑，但它的子节点仍要缩进；否则<pre class="brush:php;toolbar:false;"><code>...</code></pre>会被误判为“<code>是<pre class="brush:php;toolbar:false;"></pre>的兄弟而非子元素” - 使用
flex或grid的容器里，子元素缩进再标准也没用——布局已由 CSS 控制，HTML 缩进只服务人，不服务渲染
缩进本质是给人读的，不是给浏览器解析的。但一旦团队协作或长期维护，那些“差不多就行”的缩进，就是未来三天查不出的 bug 来源。
