vs code 默认 html 格式化存在属性挤行、缩进错乱、自闭合标签漏斜杠等问题，需禁用内置格式化器、安装 prettier 并通过 .prettierrc 和 .vscode/settings.json 双重配置才能正确工作。
VS Code 默认 HTML 格式化不能直接用，必须关掉它、装 Prettier、配项目级设置，否则属性挤成一行、缩进错乱、自闭合标签漏斜杠是常态。
为什么 Shift+Alt+F 总是把 class 和 id 挤在一行？
因为 VS Code 内置格式化器默认不拆长属性，html.format.wrapLineLength 虽设为 120，但对含多个 class、data-、aria- 的标签完全无效；它也不识别语义优先级，常把 id 排在 class 后面，违反通用约定。
更关键的是：html.format.indentInnerHtml 默认为 false，导致子元素和父元素缩进相同，结构模糊难读。
- 这不是你代码写得差，是引擎没配规则
- 快捷键没反应？先看右下角状态栏是否显示
HTML，不是就手动选；后缀是.htm或无后缀也不会触发 - 格式化不修复语法错误——漏闭合的
div会导致整段缩进崩坏，得先手修
Prettier 配置里这几个字段必须显式写
只装插件不够，Prettier 必须通过 .prettierrc 和项目级 .vscode/settings.json 双重锁定行为，否则和内置格式化器冲突，保存时反复重排。
项目根目录的 .prettierrc 至少包含：
{
"htmlWhitespaceSensitivity": "ignore",
"printWidth": 100,
"tabWidth": 2,
"useTabs": false,
"singleQuote": false,
"bracketSameLine": false
}
.vscode/settings.json 中必须写死 HTML 语言的格式化器：
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
- 别只在全局设置里开
formatOnSave，项目级才生效 -
tabWidth和editor.tabSize必须一致，否则缩进打架 -
htmlWhitespaceSensitivity: "ignore"是关键，否则 Prettier 会误删模板语法（如{{name}}）周围的空格
在线格式化工具能救急，但三类内容一粘就出事
像 beautifier.io 这类工具默认用 4 空格、强制换行所有属性、甚至把 <img src="a.jpg"> 改成 <img src="a.jpg">，看着整齐，实则埋雷。
- 含
data-、aria-或模板语法的代码，务必先试粘贴，看是否转义或删空格 - 带服务端 include 的注释（如
<!--#include file="header.html" -->）会被当成普通注释清掉 -
srcset、内联style属性极易被折行切碎，格式化后必须肉眼检查
<strong></strong>、<em></em> 这些标签不是“加粗斜体开关”
它们是语义标签，不是样式指令。用错场景会破坏可访问性：比如用 <b></b> 替代 <strong></strong>，屏幕阅读器不会加重语气；用 <i></i> 强调某词，反而被读作外语短语。
- 强调重要性 → 用
<strong></strong>，不是<b></b> - 语义重读 → 用
<em></em>，不是<i></i> - 标记拼写错误或专名号 → 用
<u></u>可行，但更推荐 CSStext-decoration: underline控制 - 价格变动对比 → 用
<del></del>+<ins></ins>，不是<s></s>+<u></u>，前者有修订语义
真正麻烦的从来不是怎么按快捷键，而是格式化后要不要再手动调 srcset 换行、要不要补回被清掉的服务器 include 注释、以及有没有人把 <em></em> 当成 <i></i> 乱用——这些细节，工具管不了，得人盯住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
