html属性换行由htmlwhitespacesensitivity控制，非printwidth；设为"strict"才按printwidth逐属性换行，且必须关闭vscode原生html格式化（html.format.enable: false）。
printWidth 本身不直接控制 HTML 属性换行
很多人以为调大 printWidth 就能让长 HTML 标签“按需换行”，或者调小它就能“强制每属性一行”——其实 printWidth 单独起不了这个作用。它只是换行的**触发条件之一**，真正决定“是否拆属性”“怎么拆”的是 htmlWhitespaceSensitivity。
常见错误现象：printWidth: 80 下，<div class="a" id="b" data-test="c"> 还是挤在一行；或者反过来，<code><span title="ok"></span> 被莫名其妙拆成两行。这都不是 printWidth 的问题，而是它和 htmlWhitespaceSensitivity 搭配不当导致的。
-
htmlWhitespaceSensitivity: "css"（默认）：Prettier 把 HTML 当作 CSS 选择器来理解空白，倾向保持单行，哪怕超了printWidth -
htmlWhitespaceSensitivity: "strict"：才真正启用printWidth作为换行依据——只要标签总长度（含空格、引号、等号）超限，就逐个属性折行 -
htmlWhitespaceSensitivity: "ignore"：基本放弃对 HTML 空白语义的判断，行为不可预测，不建议用
必须关掉 VSCode 原生 HTML 格式化
即使你配好了 printWidth 和 htmlWhitespaceSensitivity，只要 VSCode 自带的 html.format.enable 是 true，保存时就会先被它“压平”一次，再交给 Prettier 处理——结果就是所有属性又被塞回一行，配置全失效。
实操建议：
- 打开项目根目录下的
.vscode/settings.json - 确保包含：
"html.format.enable": false - 右下角状态栏点击“格式化工具”，手动选中
Prettier（不是Default Formatter或HTML Language Features）
printWidth 设多少才合理
printWidth 不是越大越好，也不是越小越细粒度。它得配合 htmlWhitespaceSensitivity: "strict" 才生效，且影响的是“整行长度判断”，不是单个属性。
- 设
100：能容纳大多数单属性标签（如<div class="header">），又能在多属性场景（比如带 <code>data-、aria-的组件）下合理折行 - 避免
80：HTML 属性名普遍比 JS 变量长，80容易让简单标签也被拆（例如<input type="text" name="q" required>就可能被拆） - 不要设
0或负数：Prettier 会忽略该值，退回到默认行为（相当于没配） - JSX 场景下注意：同样受这套规则影响，但额外受
jsxBracketSameLine干扰，纯 HTML 更可控 - 在需要保留单行的标签前加注释：
<!-- prettier-ignore --> - 注意是 HTML 注释语法，不是 JS 或 JSX 的
//或{/* */} - 只作用于紧随其后的单个标签，不影响后续内容
单属性标签还是被拆？优先用
就算 printWidth: 120 + htmlWhitespaceSensitivity: "strict" 都配好了，某些极短标签（比如 <img src="x" alt="">）仍可能被拆——这是 Prettier 内部解析逻辑决定的，无法通过全局配置绕过。
这时最干净的做法不是继续调参，而是局部豁免：
复杂点在于：这个注释本身也占字符宽度，如果写在行首缩进位置，可能干扰判断；最容易被忽略的是，它**不能跨标签生效**——想保三行按钮，就得写三遍 <!-- prettier-ignore -->。
