VS Code中Prettier格式化导致标签内代码自动换行的解决方法

以下是几个可行的解决方向，按优先级尝试：

1. 检查本地Prettier配置文件优先级 #

VS Code的全局/工作区设置可能被项目根目录下的.prettierrc、.prettierrc.json或prettier.config.js等本地配置文件覆盖。打开这些文件，确认并调整以下设置：

{
  "printWidth": 120, // 设置为足够大的数值，避免因长度触发自动换行
  "wrapAttributes": "auto"
}

如果本地配置里wrapAttributes设为"force"或"force-aligned"，会强制属性换行，改成"auto"或"preserve"即可。

2. 调整VS Code中Prettier的Wrap Attributes设置 #

在VS Code设置中搜索Prettier: Wrap Attributes，根据需求选择对应值：

• preserve：完全保留你手动编写的换行/不换行格式，不会自动拆分标签内代码
• auto：仅当代码长度超过printWidth时才换行，需确保printWidth设为足够大的数值

3. 排除其他格式化工具冲突 #

如果项目同时使用ESLint等工具，可能存在规则冲突。检查ESLint配置中是否有强制属性换行的规则（比如react/jsx-max-props-per-line），若有则调整为与Prettier兼容的设置，或直接禁用：

{
  "rules": {
    "react/jsx-max-props-per-line": ["error", { "maximum": 0 }]
  }
}

4. 临时忽略特定代码块 #

若仅需让单个标签保持单行，可在标签上方添加Prettier忽略注释：

<!-- prettier-ignore -->
<div class="container" id="main" data-value="example" onclick="handleClick()">内容</div>

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