html缩进必须统一用空格、禁用tab，因tab在不同编辑器和git中显示宽度不一致，导致结构错位、审查困难、空白冲突；vscode需在项目级设置[html]块中启用insertspaces:true、tabsize:2并关闭detectindentation。

HTML中缩进应统一使用空格，禁用Tab字符——这是当前主流工程实践与协作安全的底线要求，不是风格偏好问题。

为什么空格是唯一可靠选择

Tab在不同编辑器、终端甚至Git diff中显示宽度不一致（比如VS Code设为4，Vim设为8），导致嵌套结构视觉错位、代码审查困难、版本控制频繁标记“空白变更”。而空格始终是1字符宽，所见即所得。HTML本身会忽略多余空白，所以“节省字节”对Tab的辩护不成立。

• 常见错误现象：git diff 显示大量 + 或 - 行，实际只是Tab/空格混用引发的空白差异
• 多人协作时，editor.detectIndentation 自动识别常误判，尤其当文件开头几行缩进不一致时
• Python开发者容易踩坑：把写Python的习惯带入HTML，但HTML没语法强制校验，问题更隐蔽

VSCode中必须配置的三项关键设置

仅改状态栏显示（如点“Tab Size: 4”）不生效，必须写入配置。推荐项目级语言专属设置，避免污染全局：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

• 在项目根目录 .vscode/settings.json 中写入：

  {
    "[html]": {
      "editor.tabSize": 2,
      "editor.insertSpaces": true,
      "editor.detectIndentation": false
    }
  }

• editor.tabSize 设为 2 是当前前端团队最广泛采用的值——足够区分层级，又不会让深层嵌套（如表单+列表+卡片）挤出80列视口
• 显式关闭 editor.detectIndentation，否则打开旧文件时VSCode可能覆盖你设定的 insertSpaces

style/script标签内的缩进容易被忽略

HTML规范明确要求：style 和 script 标签内部的首行缩进，必须与标签本身起始位置对齐，而非额外缩进一层。这是为了语义清晰，也方便CSS/JS工具链解析。

• 错误写法：

  <style>
    .btn { color: red; }
  </style>

  （.btn 行多缩进了2空格）
• 正确写法：

  <style>
  .btn { color: red; }
  </style>

  （.btn 与 <style></style> 左侧对齐）
• 若用Prettier，需确认其 htmlWhitespaceSensitivity 配置未干扰此行为；部分旧版Prettier会错误地对内联样式加缩进

真正难的不是选2空格还是4空格，而是让整个团队的编辑器在打开任意一个HTML文件时，按下Tab键输出的永远是相同数量的空格字符——这需要配置落地，而不是靠口头约定。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！