HTML缩进必须统一用4个空格并禁用Tab，因Tab宽度不一致易致协作错位；需在VSCode中配置"editor.insertSpaces":true、"editor.tabSize":4、"[html]":{...}并关闭detectIndentation，辅以.editorconfig和Prettier固化规则。
HTML格式化中空格与制表符必须分离处理：编辑器缩进用空格（insertSpaces: true），页面内空白显示用 或white-space，混用会导致代码混乱且渲染失真。
VSCode里HTML文件默认缩进设为空格
很多团队协作时出现缩进错位，根源是编辑器把Tab当制表符插入，而不同人设置的tabSize不一致。VSCode默认对HTML启用detectIndentation，会读取文件首行缩进自动判断——但一旦混入Tab和空格，它就容易误判为“useTabs”，后续格式化全乱。
实操建议：
- 在
settings.json中显式关闭自动检测："editor.detectIndentation": false - 强制HTML使用4空格：
"[html]": { "editor.tabSize": 4, "editor.insertSpaces": true } - 状态栏点击“Spaces: 4”可临时切换当前文件，但不推荐——它不写入配置，下次打开又回退
批量清理已有HTML文件中的制表符
接手老项目时，\t常藏在<script></script>块、注释或深层嵌套标签里，仅靠肉眼难发现。直接全局替换\t为空格有风险：比如console.log("\t")里的制表符是逻辑需要，不该动。
立即学习“前端免费学习笔记（深入）”；
安全做法：
- 只对HTML结构部分操作：用正则
]*>|<!--[\s\S]*?-->|\{[^}]*\}先排除标签、注释、JS字符串 - 再对剩余文本执行
\t →替换（注意：这是页面渲染用的，不是编辑器缩进） - 更稳妥的是用Prettier：配置
"useTabs": false+"tabWidth": 4，然后右键“Format Document”——它只处理结构缩进，不动内容里的\t
浏览器里显示多个空格不能靠敲空格键
直接在<p>hello world</p>里敲4个空格，浏览器只会渲染1个。这不是bug，是HTML规范行为。想让多个空格生效，必须绕过默认空白合并机制。
选哪种方案取决于场景：
- 纯文本微调（如对齐冒号）：
- 整段保留格式（如代码块、地址）：
<pre class="brush:php;toolbar:false;"></pre>简单粗暴，但字体固定为等宽，需额外加style="font-family: inherit;" - 动态内容或响应式布局：
white-space: pre-wrap兼顾换行与空格，且支持继承字体 - 绝对禁止换行（如ID卡号）：
white-space: nowrap+
editorconfig比个人设置更可靠
单靠VSCode设置无法约束团队其他成员，尤其当有人用Sublime、WebStorm或Vim时。编辑器读取.editorconfig的优先级高于自身默认，且支持分语言精确控制。
关键点：
-
[*.html]段落必须顶格写，不能缩进，否则VSCode插件会忽略 -
indent_style = space和indent_size = 4要成对出现，缺一不可 - 别漏掉
end_of_line = lf：Windows默认crlf，Git diff里会因换行符差异标红，干扰空格问题排查
真正麻烦的从来不是“怎么加空格”，而是“哪一层空格该由谁负责”——编辑器管缩进，CSS管渲染，HTML实体管语义占位。三者边界模糊时，问题就会在格式化、Git提交、甚至SEO解析时突然爆发。
