Mac端VS Code保存ReactJS代码时JSX格式异常问题求助

嘿，我之前也碰到过一模一样的情况！这种保存后JSX格式乱掉的问题，大多是格式化工具冲突或者配置不对导致的，给你几个实用的排查和解决方向：

1. 确认默认格式化器是否正确 #

VS Code如果选了不支持JSX的格式化工具，保存时就会把代码搞乱。操作步骤：

• 打开VS Code设置（快捷键 Command+,）
• 搜索 "Default Formatter"
• 确保选中的是支持JSX的插件，比如 esbenp.prettier-vscode（Prettier）或者 dbaeumer.vscode-eslint（ESLint），这俩是React项目最常用的格式化工具。

2. 检查Prettier/ESLint的配置文件 #

如果你用了Prettier，先看看项目根目录有没有 .prettierrc 或 .prettier.config.js 文件，确保里面的规则适配JSX：

// .prettierrc 示例配置
{
  "printWidth": 100,
  "tabWidth": 2,
  "jsxSingleQuote": true,
  "semi": false,
  "trailingComma": "es5"
}

如果用ESLint，要确保已经安装了 eslint-plugin-react 插件，并且在 .eslintrc.js 里开启React相关规则：

// .eslintrc.js 示例配置
module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended'
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: ['react'],
  rules: {}
};

3. 禁用冲突的格式化插件 #

如果同时安装了多个格式化插件（比如Prettier和Beautify），它们会互相抢占文件格式化权限，导致格式混乱。可以：

• 打开VS Code的插件面板（Command+Shift+X）
• 暂时禁用除了Prettier/ESLint之外的其他格式化类插件
• 重新保存文件测试效果

4. 检查"保存自动格式化"的相关设置 #

有时候是VS Code的自动格式化设置出了问题：

• 打开设置，搜索 "Format On Save"，确保这个选项是勾选状态
• 再搜索 "Editor: Format On Save Mode"，选择 file 选项（避免只格式化修改部分导致整体格式混乱）

5. 重置VS Code设置（终极方案） #

如果上面的方法都没用，可以试试重置VS Code的设置，回到初始状态再重新配置：

• 打开命令面板（Command+Shift+P）
• 输入 "Preferences: Reset Settings"，确认重置
• 之后重新安装并配置Prettier/ESLint插件

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