应配置Vetur的wrap_attributes为"force"并确保使用js-beautify-html格式化器，具体为："vetur.format.defaultFormatter.html": "js-beautify-html"且"wrap_attributes": "force"置于vetur.format.defaultFormatterOptions.js-beautify-html内。
HTML标签属性堆成一行，怎么让它自动换行？
不是靠编辑器“自动换行”（editor.wordWrap），而是靠格式化工具在保存或手动格式化时把长属性拆到多行。关键在 Vetur 或插件的 wrap_attributes 配置。
常见错误是只开了 editor.wordWrap: "on"，结果 <div class="a b c" id="xxx" data-foo="bar" ...> 还是一整行——那只是视觉折行，不改变源码结构，也无法提升可读性或 Git diff 可读性。
-
wrap_attributes: "auto"：只在超出行宽（默认 120）时才换行，但单个属性很长（比如长 URL、内联 JSON）可能仍不拆 -
wrap_attributes: "force"：每个属性独占一行，最彻底，适合组件模板或严格审查场景 -
wrap_attributes: "force-expand-multiline"：比force更智能，对 class、style 等多值属性会进一步按空格拆分（如class="a b c"→ 每个 class 单独一行），但需js-beautify-html支持
Vetur + js-beautify-html 的正确配置方式
如果你用 Vue 项目（Vetur 是主流），直接改 settings.json，别只依赖 UI 设置界面——很多选项 UI 不暴露或不生效。
必须确保三件事同时满足：
立即学习“前端免费学习笔记（深入）”；
-
"vetur.format.defaultFormatter.html": "js-beautify-html"（不能是prettier或空） -
"vetur.format.defaultFormatterOptions"下嵌套"js-beautify-html"对象 -
"wrap_attributes"写在"js-beautify-html"里，不是顶层
示例有效配置片段：
{
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force",
"wrap_line_length": 120
}
}
}
注意：wrap_line_length 只对 "auto" 生效；选 "force" 时它被忽略。
Emmet 展开时 inline 元素不换行？改 emmet.syntaxProfiles
写 a*10 回车后生成 10 个 <a></a> 还挤在同一行？这是 Emmet 默认把内联元素当“一行内容”处理。
解决方法是显式告诉 Emmet：HTML 中的内联标签展开时，每生成一个就换行。
- 在
settings.json中添加："emmet.syntaxProfiles": { "html": { "inline_break": 1 } } -
inline_break: 1是当前默认值（截至 2025 年），但某些旧版 VSCode 或自定义 profile 可能覆盖为 0 - 该设置只影响 Emmet 展开行为，不影响保存时的格式化
为什么 prettier 不听 wrap_attributes？
Prettier 原则上不支持 wrap_attributes 这类细粒度控制——它只认 printWidth 和 htmlWhitespaceSensitivity。如果你已启用 Prettier 作为 HTML 格式化器，上面所有 wrap_attributes 配置都无效。
验证方式：打开一个 .vue 或 .html 文件，右下角看格式化器图标。如果是 Prettier，那就得换方案：
- 删掉
"prettier"相关的html格式化配置，退回 Vetur + js-beautify-html - 或改用
prettier的printWidth+htmlWhitespaceSensitivity: "ignore"，靠缩进和宽度间接诱导换行（效果弱且不可控） - Vue 3 + Volar 用户注意：Volar 已取代 Vetur，其默认格式化器是
prettier，需额外安装prettier-plugin-vue并确认它支持htmlWhitespaceSensitivity
真正起作用的永远是当前激活的格式化器，不是你装了多少插件。
