ES6模板字符串保留原始缩进，需用trim()清除首尾空白；缩进应统一为2或4空格并配置VS Code与Prettier保持HTML风格一致；复杂结构建议拆分为变量组合。
ES6 模板字符串本身不干预缩进逻辑，但它的反引号语法天然保留空格、换行和缩进——这意味着你在代码里怎么写，最终拼出来的 HTML 就是什么样。所以关键不是“模板字符串怎么缩进”，而是你**怎么在模板中组织缩进，才能既保持源码可读，又不把多余空白注入 DOM**。
用 trim() 或 trimStart()/trimEnd() 清除首尾换行与空格
直接写多行模板时，第一行开头的换行和最后一行末尾的换行会变成真实字符：
- 比如
let html = `<div><p>内容</p></div>`是紧凑的；但换行后：
let html = `<br> <div><br> <p>内容</p><br> </div><br>`;
实际输出开头和结尾各带一个换行符，可能影响布局（尤其 inline 元素） - 推荐统一加
.trim()：
let html = `<br> <div><br> <p>内容</p><br> </div><br>`.trim();
- 若只想去掉开头缩进（保留内部换行），可用
.trimStart()配合手动对齐首行
缩进风格要和项目 HTML 规范一致（推荐 2 或 4 空格）
团队若约定 HTML 使用 4 空格缩进，模板里的标签层级也应严格遵循——这不只是美观问题，更是协作一致性：
- VS Code 中确保已开启：
"editor.insertSpaces": true（禁用 Tab）"editor.tabSize": 4"html.format.indentInnerHtml": true - 这样你在模板里按 Tab 键插入的其实是 4 个空格，和外部 .html 文件缩进完全对齐
- 避免混用 2 空格写 JS、4 空格写模板——视觉割裂会增加维护成本
嵌套结构建议用变量拆分，而非硬塞在单个模板里
超长 HTML 模板容易让缩进失控，也难复用和测试：
立即学习“前端免费学习笔记（深入）”；
- 不要这样写（难以缩进、难维护）：
const card = `<br> <article class="card"><br> <h3>${title}</h3><br> <div class="meta">${date} • ${author}</div><br> <p>${content.substring(0,100)}...</p><br> </article><br>`.trim(); - 推荐拆成小片段再组合：
const meta = `<div class="meta">${date} • ${author}</div>`.trim();<br> const contentPreview = `<p>${content.substring(0,100)}...</p>`.trim();<br> const card = `<br> <article class="card"><br> <h3>${title}</h3><br> ${meta}<br> ${contentPreview}<br> </article><br>`.trim();
配合 Prettier 自动格式化，避免手抖出错
人工缩进易遗漏或不均，Prettier 可统一处理模板字符串内的 HTML 结构：
- 在
.prettierrc中启用：{"htmlWhitespaceSensitivity": "css", "tabWidth": 4} - Prettier 会识别反引号内的 HTML 片段，并按规则缩进子标签（如自动给
<p>增加一级缩进） - 保存文件时自动对齐，无需反复手动调整空格数
