vs code 保存时自动格式化 html 需关闭 editor.detectindentation 并配置 tabsize、formatonsave 等项；prettier 比内置格式化器更可靠，因其规范自闭合标签、属性换行与顺序；需防范缩进混用、模板字符串绕过格式化及注释缩进误导等问题。
VS Code 保存时自动格式化 HTML 的关键配置
不装插件也能用，但必须关掉 editor.detectIndentation，否则粘贴或生成的代码会把缩进搞乱。VS Code 默认会“猜”你用空格还是 Tab，这个猜测经常错。
推荐配置项直接写进 settings.json：
{
"editor.tabSize": 2,
"editor.detectIndentation": false,
"editor.formatOnSave": true,
"html.format.indentInnerHtml": true,
"html.suggest.html5": true
}
-
editor.tabSize设为2是多数前端项目的事实标准，比 4 空格更紧凑，又比 1 空格易识别 -
html.format.indentInnerHtml开启后，和会比多缩进一层，结构更直观 - 如果项目已用 Prettier，需额外指定
"editor.defaultFormatter": "esbenp.prettier-vscode"，否则内置格式化器可能忽略.prettierrc
为什么 Prettier 插件比内置格式化器更可靠
VS Code 内置的 HTML 格式化器对自闭合标签（如 <img>、<input>）和属性换行支持弱，容易把多属性挤在一行，可读性差。Prettier 则按规则强制换行，并统一闭合风格。
常见问题对比：
- 内置格式化器可能输出：
<input type="text" name="q" id="search" class="form-control"> - Prettier 默认输出（启用
htmlWhitespaceSensitivity: "ignore"后）：<input type="text" name="q" id="search" class="form-control">
- 属性顺序不一致时，Prettier 可配合
eslint-plugin-html或自定义规则校验，内置格式化器完全不处理
选中代码手动缩进/反缩进的快捷键陷阱
很多人习惯选中几行按 Tab 缩进，但若光标停在某行末尾再按 Tab，VS Code 会插入一个制表符而非整体缩进——这会导致混用空格与 Tab，Git 提交时显示异常缩进差异。
安全做法：
- 始终先全选要调整的行（
Ctrl+L选当前行，Ctrl+Shift+L多行光标），再按Tab或Shift+Tab - 禁用
editor.insertSpaces以外的任何 Tab 相关行为，确保Tab键只做缩进，不做插入 - 在设置里打开
editor.renderWhitespace，让空格和 Tab 可视化，一眼看出混用
团队协作时缩进冲突的真实来源
缩进混乱很少来自“谁按了 Tab”，更多是模板字符串、服务器端渲染或构建工具（如 Vite + Vue SFC）输出未格式化的 HTML 片段。这些内容被直接插入到 .html 或 .vue 文件中，绕过了编辑器格式化流程。
应对方式不是靠人盯，而是加一道检查：
- CI 流程中加入
npx prettier --check "**/*.html"，失败则阻断合并 - 本地 Git hook（如
pre-commit）调用prettier --write自动修正 - 禁止在
<script></script>或<template></template>块内手写多层嵌套 HTML——这类结构极易被格式化器误判层级
最常被忽略的一点：HTML 注释里的缩进不会被格式化器处理，但会影响开发者对真实嵌套关系的判断。比如 <!-- <div> --> 这种嵌套注释，即使格式化后依然错位，得人工核对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
