vs code 必须识别为 html 语言模式，否则 html.format.* 配置不生效；需确保文件后缀为 .html、右下角显示“html”、无错误的 files.associations 覆盖，并配置 "htmlwhitespacesensitivity": "css" 和 .editorconfig 缩进规则。
直接上手就能用的 HTML 格式化，不是靠手动对齐空格，而是靠 VS Code + Prettier + EditorConfig 三件套自动完成——配置错一个地方，formatOnSave 就会失效，或者 <div>text</div> 被错误折成两行破坏内联布局。
VS Code 必须识别为 HTML 语言模式
右下角状态栏显示“Plain Text”或“JavaScript”时，html.format.* 配置完全不生效。这是新手最常卡住的第一步。
- 按
Ctrl+K再按M（macOS 是Cmd+K→M），从弹出列表选HTML - 确保文件后缀是
.html，别用.htm或无后缀 - 如果项目里有
.vscode/settings.json，检查是否误加了"files.associations": {"*.htm": "plaintext"}这类覆盖规则
prettier --write 和 editor.formatOnSave 别混用
保存时自动格式化和提交前批量修复是两件事，混在一起会导致本地代码和 Git 暂存区内容不一致，协作时 diff 全是缩进变更。
-
editor.formatOnSave开启即可，它只作用于你当前编辑的文件 -
prettier --write "**/*.html"只该放在lint-staged的pre-commit钩子里，用于统一全量文件风格 - 切勿在
pre-commit里写prettier --write后再git add—— 这会让同事拉代码后看到“未暂存更改”，极其干扰协作
"htmlWhitespaceSensitivity": "css" 是关键开关
没配这项，Prettier 会把 <span>Hello <strong>world</strong></span> 格式化成多行，导致 white-space: nowrap 失效、按钮文字断开、搜索框输入框错位。
- 必须显式写在
.prettierrc里，不能依赖默认值 - 值只能是
"css"或"strict"，"ignore"已废弃 - 搭配
"html.format.wrapLineLength": 120使用更稳妥，避免长 URL 或 data-url 折行
EditorConfig 管缩进，Prettier 不管缩进
Prettier 会忽略 editor.tabSize 和 editor.insertSpaces，它只认 .editorconfig 里的 indent_size 和 indent_style。
-
.editorconfig必须存在且含这两行：indent_size = 2、indent_style = space - VS Code 设置里的
editor.tabSize只影响未启用格式化的场景，比如临时粘贴代码 - 如果团队用 4 空格，改
indent_size = 4即可，但务必全项目统一，别一半 2 一半 4
真正容易被忽略的是：Prettier 的 HTML 格式化能力依赖语言服务，而语言服务又依赖文件关联和 html.format.enable 开关；三者缺一，Shift+Alt+F 就只是个摆设。别调半天 settings.json，先看右下角是不是写着 HTML。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
