html属性换行由htmlwhitespacesensitivity控制,非printwidth或tabwidth;默认"css"不换行,设为"strict"才按printwidth逐属性换行,且需关闭vscode原生html格式化。

HTML属性换行靠htmlWhitespaceSensitivity,不是printWidth
很多人以为调大printWidth或改tabWidth就能让长HTML标签换行,其实根本不管用。真正起作用的是htmlWhitespaceSensitivity,它控制Prettier如何理解HTML里的空格和换行语义。
默认值是"css",这时Prettier会尽量保持单行——哪怕属性堆到15个也硬塞进去;改成"strict"后,只要总长度超printWidth(比如80),就会把每个属性拆成独立一行。
-
"strict":属性强制每行一个,无视是否“视觉上可读”,适合团队强规范场景 -
"ignore":完全忽略空白敏感性,行为接近旧版Prettier,换行极不积极 -
"css"(默认):按CSS选择器逻辑判断换行,对HTML标签最不友好
VSCode里必须关掉html.format.enable
VSCode自带的HTML格式化(由html.format.enable控制)和Prettier冲突。即使你配好了Prettier,只要这个原生格式化开着,保存时就会先被VSCode“压平”一次,再被Prettier处理,结果就是属性全挤在一行、换行失效。
- 打开VSCode设置(Ctrl+,),搜
html.format.enable - 把它设为
false,或者在.vscode/settings.json里加:"html.format.enable": false
- 确认Prettier是当前工作区的默认格式化工具(右下角点击“格式化工具”,选Prettier)
printWidth要配合htmlWhitespaceSensitivity: "strict"才生效
printWidth本身对HTML属性换行没直接作用,但它和htmlWhitespaceSensitivity: "strict"组合起来才触发换行逻辑:Prettier会计算“标签名 + 所有属性字符串总长度”,超过printWidth就逐个属性折行。
- 建议设为
80或100,太小会导致简单标签也换行(比如<div class="a" id="b">就可能拆两行) <li>不要设<code>printWidth: 0或负数——Prettier会忽略,退回到默认行为 - 注意:JSX里同样适用这套规则,但React组件属性换行还受
jsxSingleQuote等影响,HTML纯标签更干净 - 检查有没有
.prettierrc,内容类似:{ "htmlWhitespaceSensitivity": "strict", "printWidth": 100 } - 如果用
prettier.config.js,确保导出对象里明确写了htmlWhitespaceSensitivity - 临时调试可在命令行跑:
npx prettier --write --html-whitespace-sensitivity strict index.html,验证是否真生效
配置文件优先级:项目级.prettierrc > VSCode设置
VSCode的GUI设置或settings.json里写的Prettier选项,会被项目根目录下的.prettierrc(或prettier.config.js)覆盖。如果你改了VSCode设置却没生效,大概率是项目里有配置文件锁死了行为。
htmlWhitespaceSensitivity这个配置项名字不直观,又容易被VSCode原生格式化覆盖,实际调的时候八成会卡在这两处。











