如何阻止VSCode保存时自动将React代码格式化折为多行？

该问题几乎都是Prettier的JSX默认格式化规则导致，少数情况为VSCode自带格式化规则、ESLint的JSX相关规则触发，可按以下方案逐一排查解决：

方案1：针对单行代码临时禁用格式化 #

如果仅希望这一行不被拆分，无需修改全局配置，在代码上方添加prettier忽略注释即可：

{/* prettier-ignore */}
<Title level={2} className="heading">Global Crypto Stats</Title>

方案2：修改Prettier全局配置 #

在项目根目录的.prettierrc、.prettierrc.json等Prettier配置文件中添加/修改以下参数：

{
  // 增大单行最大字符数，默认80，可根据需求调整为100/120
  "printWidth": 120,
  // 标签闭合尖括号和内容保持在同一行，Prettier 3.x用这个参数
  "bracketSameLine": true,
  // Prettier 2.x版本用jsxBracketSameLine替换上面的bracketSameLine
  // "jsxBracketSameLine": true,
  // 禁止单个属性单独占一行
  "singleAttributePerLine": false
}

修改配置后重启VSCode即可生效。

方案3：调整VSCode自带格式化规则 #

如果确认默认格式化工具不是Prettier，可修改VSCode自带格式化参数：

• 打开VSCode设置（快捷键Ctrl+,/Cmd+,）
• 搜索html.format.wrapLineLength，将数值调大到120或以上，也可设为0完全禁止自动换行
• 搜索javascript.format.wrapLineLength，同样调整为120或以上

方案4：关闭ESLint相关规则 #

如果项目开启了ESLint的JSX校验，可在.eslintrc配置文件中修改react/jsx-wrap-multilines规则，允许JSX内容单行显示：

{
  "rules": {
    "react/jsx-wrap-multilines": ["error", {
      "condition": "ignore",
      "logical": "ignore",
      "prop": "ignore"
    }]
  }
}

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