如何在代码格式化时避免HTML标签属性自动换行？

1. 调整Prettier配置（常用格式化工具） #

如果使用Prettier做代码格式化，修改项目根目录的配置文件（.prettierrc 或 prettier.config.js），添加或调整以下参数：

• printWidth: 设置更大的数值（比如120或150），给属性预留足够的单行显示空间
• htmlWhitespaceSensitivity: 设为 "ignore"，减少因空格触发的自动换行
• singleAttributePerLine: 设为 false，强制多个属性在同一行展示

示例配置：

{
  "printWidth": 150,
  "htmlWhitespaceSensitivity": "ignore",
  "singleAttributePerLine": false
}

2. VS Code内置HTML格式化设置 #

打开VS Code设置（快捷键Ctrl+,），搜索并调整以下选项：

• HTML > Format: Wrap Attributes: 选择 "auto"（仅当单行超出限制时换行），或直接设为 "never" 强制属性不换行
• HTML > Format: Wrap Line Length: 调大数值，提升单行允许的字符上限

3. 其他编辑器/工具的通用处理思路 #

• 找到格式化工具的行宽限制选项，调高单行允许的字符数
• 关闭「强制每个属性单独占一行」的开关
• 开启工具针对HTML的「紧凑格式化」模式，减少不必要的换行

4. 临时应急处理 #

如果只是个别标签不想被换行，可以在格式化前给标签添加工具支持的特殊注释，或者格式化后手动调整回单行，但这种方法仅适合临时场景，优先通过配置工具解决更高效

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