升级ESLint与Babel后，React短语法Fragment报解析错误

问题根源 #

你遇到的这个矛盾情况（ESLint提示用短语法但切换后报解析错误），核心原因是**babel-eslint版本太老**，和你升级后的ESLint 7.10.0完全不兼容。babel-eslint 8.x是对应Babel 6的版本，而你现在用的是Babel 7，这个老旧的解析器无法正确识别React短Fragment（<>）这类较新的JSX语法——尽管Babel本身能正常编译运行代码，但ESLint这边的解析环节直接失败了。

具体修复步骤 #

1. 卸载过时解析器，安装官方最新替代工具
   打开终端运行以下命令：

   npm uninstall babel-eslint
   npm install @babel/eslint-parser --save-dev
   

   划重点：babel-eslint已经被官方废弃，@babel/eslint-parser是Babel团队推出的新一代ESLint桥接工具，完全适配Babel 7+版本。

2. 更新ESLint配置中的解析器设置
   修改你的ESLint配置文件（比如.eslintrc或.eslintrc.json），替换解析器并补充必要配置：

   {
     "env": { "es6": true, "browser": true, "node": true, "jquery": true, "jest": true },
     "extends": ["plugin:react/recommended", "airbnb", "prettier", "prettier/react"],
     "parser": "@babel/eslint-parser", // 替换成新的解析器
     "parserOptions": {
       "ecmaFeatures": { "jsx": true },
       "ecmaVersion": 2018,
       "sourceType": "module",
       "babelOptions": { "configFile": "./babel.config.js" } // 明确指向你的Babel配置文件
     },
     "plugins": ["react"],
     "rules": {
       "indent": ["error", 4],
       "semi": "error",
       "arrow-body-style": 0,
       "no-console": ["error", { "allow": ["warn", "error"] }],
       "quotes": ["error", "single", { "avoidEscape": true }],
       "no-multi-spaces": "error",
       "react/jsx-indent": 0,
       "react/jsx-indent-props": 0,
       "react/jsx-filename-extension": 0
     },
     "globals": {}
   }
   

3. 清理冗余的旧Babel依赖
   你的依赖列表里有几个冲突/过时的包，会埋下潜在问题，建议一并清理：

   • 同时存在旧版babel-preset-env（1.6.0，对应Babel 6）和新版@babel/preset-env，卸载旧版：

     npm uninstall babel-preset-env
     

   • babel-preset-stage-1是Babel 6的阶段预设，Babel 7已经移除了这类预设，相关功能可通过@babel/preset-env或单独插件实现，建议卸载：

     npm uninstall babel-preset-stage-1
     

4. 重启ESLint服务
   关闭并重新打开编辑器的ESLint插件，或者重新运行lint命令，让新配置完全生效。

验证修复 #

完成以上操作后，再使用短Fragment语法<>，ESLint应该既不会再提示“偏好短语法”，也不会报解析错误了，同时代码依然能正常编译运行。

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