如何配置Prettier使单个属性的HTML标签不自动格式化为多行

你遇到的单属性标签被强制拆成多行的问题，绝大多数情况是误开了singleAttributePerLine配置，按以下方式调整即可满足需求：

• 打开项目下的Prettier配置文件（支持.prettierrc、prettier.config.js、package.json内的prettier字段三种形式）
• 找到singleAttributePerLine配置项，将值设置为false（该配置默认值就是false，如果之前手动设为true，会强制所有标签的每个属性单独占一行，哪怕标签只有一个属性）
• 保留你原本设置的合理printWidth数值即可，不需要刻意调大。

调整后的格式化逻辑完全符合你的预期：

• 仅含单个属性的标签，只要开标签总长度不超过设定的printWidth，就会保持你写的单行格式，比如<div class="header_info">不会被拆分
• 包含多个属性、总长度超过printWidth的长标签，依然会自动按规则拆分为多行，保留长标签的易读性。

特殊场景处理 #

如果已经将singleAttributePerLine设为false，仍有个别单属性标签被折行，说明该标签的开标签总长度（含标签名、属性、前后尖括号）超过了你设置的printWidth阈值。原生Prettier目前没有提供针对单属性标签的独立折行开关（Prettier的设计原则是尽量减少细碎配置，保证不同人写的代码格式化后风格统一），可通过两种方式处理：

• 适当微调printWidth到你能接受的数值，比如从默认的80调整到100，绝大多数单属性标签（哪怕class名稍长）都不会触发折行，同时多属性长标签依然会正常换行
• 对个别长度特别长、你刻意想保留单行的单属性标签，可在标签上方添加<!-- prettier-ignore -->注释，让Prettier跳过该标签的格式化，手动保留单行写法即可。

注意：bracketSameLine配置仅控制多行属性场景下，结尾的>是否单独占一行，和单属性是否折行无关，不需要调整该项。

内容的提问来源于stack exchange，提问作者Cur Fromsky