React+Gatsby项目配置babel-eslint后ESLint仍报Unexpected token解析错误

问题本质 #

你遇到的解析报错，核心原因不是ESLint规则没开，也不是业务代码的语法问题——毕竟你反馈过完全移除ESLint之后项目的运行、构建都完全正常。报错来源是ESLint解析链路本身的配置问题：实际运行的ESLint解析器根本没有加载你配置的babel解析能力，用了默认的无语法扩展支持的espree解析器，自然无法识别类公开字段、可选catch子句这类语法。你之前配置的babel-eslint没有生效，本质是踩了版本不兼容、框架内置配置覆盖的常见坑。

分步修复操作 #

• 替换停更的旧解析器
  • 原配置使用的babel-eslint已经在Babel 7.8版本后停止官方维护，旧版本的包本身就不支持类属性绑定、可选catch这类ES2022语法，哪怕正确配置了也会报解析错误。
  • 执行命令替换为官方维护的新版解析器：

    npm uninstall babel-eslint
    npm install -D @babel/eslint-parser
    

  • 修改.eslintrc里的parser配置为"parser": "@babel/eslint-parser"。注意这个包依赖本地的@babel/core，Gatsby项目默认已经内置该依赖，如果执行报错提示缺失，单独补装即可。
• 修正parserOptions的配置，开启需要的语法识别能力
  替换你原来.eslintrc里的parserOptions段，移除冗余配置，补充对应语法的解析开关：

  "parserOptions": {
    "requireConfigFile": false,
    "ecmaVersion": "latest",
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "classProperties": true,
      "optionalCatchBinding": true
    }
  }
  

  这里classProperties对应你写的类属性箭头函数语法，optionalCatchBinding对应无参数的可选catch子句语法。
• 解决Gatsby插件的配置覆盖问题
  如果你项目里用了gatsby-plugin-eslint，旧版本插件会强制使用内置的解析器，直接覆盖你.eslintrc里的配置。需要：
  1. 升级gatsby-plugin-eslint到最新版本
  2. 在gatsby-config.js的插件配置里显式指定解析器优先级，避免插件自带的默认配置覆盖你的自定义设置
• 解释ESLint禁用注释不生效的原因
  解析报错发生在ESLint的文件读取解析阶段，还没走到规则匹配、校验执行的流程，所以不管是写禁用行的注释还是整个文件的禁用注释，都不会被执行。只有换对解析器，让文件能被正常解析，禁用注释才会生效。

配置验证方法 #

改完所有配置后，不要直接靠Gatsby dev server的反馈判断是否生效，先在项目根目录执行本地校验命令：

npx eslint src/你之前报错的具体文件路径

如果这个命令能正常执行、不抛解析类的错误，就说明配置已经生效，再重启Gatsby开发服务就不会出现原来的bundle生成报错了。

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