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”）不生效，必须写入配置。推荐项目级语言专属设置，避免污染全局：
- 在项目根目录
.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>左侧对齐） - 若用Prettier，需确认其
htmlWhitespaceSensitivity配置未干扰此行为；部分旧版Prettier会错误地对内联样式加缩进
真正难的不是选2空格还是4空格，而是让整个团队的编辑器在打开任意一个HTML文件时，按下Tab键输出的永远是相同数量的空格字符——这需要配置落地，而不是靠口头约定。
