IntelliJ与VS Code无法识别React短片段语法，求解决办法

你装的@babel/code-frame只是Babel用来格式化错误提示的工具，根本不负责解析JSX短片段语法，这就是为什么只有VS Code的提示消失了，但IDE和浏览器还报错的原因。下面是具体修复步骤：

1. 安装正确的Babel依赖 #

React的<>短片段需要Babel的React JSX转换支持，直接装官方预设最稳妥：

npm install --save-dev @babel/preset-react

如果是用Create React App创建的项目，不用手动装Babel预设，直接升级react-scripts就行：

npm install react-scripts@latest

2. 配置Babel（非CRA项目） #

在项目根目录新建或修改babel.config.json，添加React预设：

{
  "presets": [
    "@babel/preset-react",
    // 如果你用了ES6+语法，记得加这个预设
    "@babel/preset-env"
  ]
}

3. 修复IntelliJ的语法报错 #

• 打开File > Settings > Languages & Frameworks > JavaScript，把JavaScript版本设置为React JSX
• 确认React支持已开启：Settings > Languages & Frameworks > JavaScript > React，勾选Enable React support
• 清除IDE缓存：File > Invalidate Caches...，选择Invalidate and Restart

4. 解决浏览器端报错 #

重启开发服务器：

npm start

如果还是报错，检查React版本是否低于16.2.0（短片段是16.2版本才引入的），执行npm list react查看版本，不够的话升级：

npm install react@latest react-dom@latest

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