升级macOS Catalina 10.15.6后VS Code自动换行致编译失败求助

这种情况我之前也碰到过，大概率是格式化工具的配置被系统升级干扰了——毕竟macOS升级有时候会不小心重置插件缓存或者默认配置。试试下面这些方法：

1. 检查Prettier配置（如果你用了这个格式化插件） #

Prettier是前端常用的JS/JSX格式化工具，先排查它的规则：

• 打开VS Code设置（快捷键Cmd+,），搜索Prettier
• 重点调整这几个选项：
  • Prettier > Print Width：如果值设得太小，会强制代码换行，建议改成120或者更大
  • Prettier > JSX Bracket Same Line：勾选这个选项，它会让JSX的闭合标签和内容保持在同一行，避免<div>后莫名换行
• 更稳妥的方式是在项目根目录创建/检查.prettierrc文件，手动锁定规则，比如：

  {
    "printWidth": 120,
    "singleQuote": true,
    "jsxBracketSameLine": true,
    "trailingComma": "es5"
  }
  

2. 重置VS Code内置的JavaScript格式化器 #

如果没用到Prettier，可能是内置格式化工具的配置出了问题：

• 打开设置，搜索javascript.format.enable，先取消勾选，看看问题是否消失
• 如果问题解决了，再重新勾选，然后调整具体规则：
  • 搜索javascript.format.placeOpenBraceOnNewLineForControlBlocks，确保它是未勾选状态（避免大括号强制换行）
  • 检查javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces，确保配置符合你的代码风格

3. 清理VS Code插件缓存 #

系统升级可能导致插件缓存损坏，试试这个操作：

• 完全关闭VS Code
• 打开终端，执行这两条命令：

  rm -rf ~/Library/Application\ Support/Code/Cache
  rm -rf ~/Library/Application\ Support/Code/CachedData
  

• 重新打开VS Code，测试格式化效果

4. 检查ESLint规则（如果项目用了ESLint） #

如果你的项目依赖ESLint做代码检查和格式化，它的规则也可能引发冲突：

• 打开项目根目录的.eslintrc文件，查找react/jsx-wrap-multilines、linebreak-style这类规则，把react/jsx-wrap-multilines设为off，或者调整成允许不换行的配置

最后，记得保存所有设置后，打开你的JS文件，用Cmd+Shift+I手动格式化一次，看看换行问题是否解决。

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