VS Code中React项目App.js代码格式化异常求助

检查VS Code默认格式化器设置 #

• 打开VS Code设置（快捷键Ctrl+,），搜索Default Formatter，确认选择的是esbenp.prettier-vscode（Prettier官方插件），而非其他格式化工具。
• 搜索Format On Save并勾选，确保保存时自动触发格式化。

排查Prettier配置冲突 #

• 检查项目根目录的.prettierrc、.prettierrc.json或prettier.config.js文件，若存在错误配置（比如过小的printWidth值），先备份后删除，测试格式是否恢复正常。
• 搜索VS Code的Prettier: Print Width设置，确保值合理（默认80），避免因宽度限制导致强制换行混乱。

处理ESLint与Prettier的冲突 #

• 若项目使用ESLint，需安装eslint-config-prettier和eslint-plugin-prettier，让ESLint兼容Prettier规则。
• 在ESLint配置文件（如.eslintrc.json）中调整配置：

  {
    "extends": [
      "react-app",
      "prettier"
    ],
    "plugins": ["prettier"],
    "rules": {
      "prettier/prettier": "error"
    }
  }
  

排查插件与设置干扰 #

• 禁用其他可能影响格式化的插件，重启VS Code后测试。
• 若以上无效，打开命令面板（Ctrl+Shift+P），输入Preferences: Reset Settings重置用户设置，再重新配置Prettier选项。

确认文件语言模式 #

• 打开React文件后，查看VS Code右下角的语言模式，确保是JavaScript React，若不是则切换为该模式，避免格式化工具套用错误规则。

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