VSCode保存时自动拆分HTML元素到新行是否规范？如何关闭？

该格式是否属于行业规范 #

这种将所有HTML元素、关联文本强制拆分到独立行的格式不属于通用行业强制规范，仅为Prettier插件的默认格式化规则。
当前行业主流HTML编码规范的普遍约定是：仅在单行代码长度超过设定阈值时才换行，<b>、<span>、<a>这类内联文本元素会和所属文本内容保留在同一行，避免打断段落文本的阅读连贯性。你提到的长段落嵌套元素下可读性下降的问题是普遍存在的，大部分团队都会主动修改这个默认规则。

排查格式化触发源 #

你可以先确认默认格式化器配置，判断触发主体：

• 打开VSCode设置页面（快捷键Ctrl+,/Cmd+,）
• 搜索editor.defaultFormatter，如果值为esbenp.prettier-vscode，则当前格式化行为由Prettier触发；如果值为VSCode内置的HTML语言服务，则为自带功能触发。

关闭自动拆行的配置方法 #

若使用Prettier作为格式化器 #

可以通过两种方式修改规则：

1. 项目级配置（推荐，所有项目成员共享统一规则）：在项目根目录新建.prettierrc文件，添加如下配置：

{
  "printWidth": 120,
  "htmlWhitespaceSensitivity": "css",
  "htmlInlineElements": ["b", "span", "i", "em", "strong", "a", "code"],
  "bracketSameLine": true
}

参数说明：

• printWidth：增大单行最大长度阈值，避免短行被强制拆分
• htmlWhitespaceSensitivity：按照CSS的display属性判断元素是否为内联元素，不对内联元素强制拆行
• htmlInlineElements：自定义不需要拆行的内联元素列表，可根据需求增减
• bracketSameLine：标签闭合尖括号和内容保持在同一行

2. 全局配置：直接在VSCode设置中搜索对应的Prettier配置项修改，修改后对所有本地项目生效。

若使用VSCode自带HTML格式化功能 #

在VSCode设置中修改对应配置即可：

• 搜索html.format.wrapLineLength，设置为0即可关闭自动换行
• 搜索html.format.contentUnformatted，添加不需要拆行的元素，比如b,span,a,i,em,strong
• 也可以单独修改HTML文件的默认格式化器，在设置中搜索[html]，调整对应editor.defaultFormatter的值即可。

内容的提问来源于stack exchange，提问作者Martin C. Wigley