VSCode中React JS代码按Ctrl+S保存后语法变错问题求助

问题根因 #

该问题是VSCode自动格式化规则与React JSX语法不匹配导致的，具体原因如下：

1. 你当前使用的格式化插件（默认JS格式化工具、Prettier、Beautify等）将React代码识别为了普通JavaScript进行格式化。普通JS的格式化规则会把JSX里的<标签起始符识别为小于运算符，自动插入空格、拆分换行，直接破坏了JSX的语法结构，触发ESLint等校验工具的语法报错。而代码仍能正常运行的原因是Babel等转译工具的容错能力较强，仍能识别被拆分的JSX标签结构，完成代码转译。
2. 其他编程语言没有这类问题，是因为C++、HTML的语法识别规则独立，你安装的格式化插件对这类语法的适配正常，只有React相关文件的语言模式关联错误。

解决方案 #

• 临时修复单文件：点击VSCode右下角状态栏的语言模式标识（默认显示为JavaScript），手动选择为JavaScript React，再保存即可恢复正常。
• 全局永久生效：打开VSCode设置，搜索files.associations，添加关联规则：键为*.js，值为javascriptreact，后续所有.js后缀的文件都会默认按React JSX规则处理。
• 插件适配校验：如果你安装了第三方格式化插件，需要确保插件配置开启了JSX支持，不要启用「将<识别为普通运算符」的规则。可以在项目根目录新增.prettierrc配置文件，明确指定JSX相关格式化规则，示例如下：

{
  "jsxSingleQuote": true,
  "bracketSameLine": false,
  "semi": true,
  "trailingComma": "es5"
}

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