React项目使用sonar-scanner遇Unexpected token =错误（espree模块模式）

这个Unexpected token =错误很常见，根源是你代码里的类属性箭头函数语法（也就是handleClick = () => {}这种写法）属于ES2022的特性，而默认的Espree解析器配置或者SonarQube的JavaScript版本设置没跟上，导致解析器不认识这个语法。

下面是几个可行的解决方案，按优先级排序：

1. 升级SonarQube配置，启用ES2022支持 #

首先检查项目根目录的sonar-project.properties文件，添加或修改以下配置，明确告诉SonarQube使用ES2022版本解析JavaScript：

sonar.javascript.ecmascriptVersion=ES2022

如果你的项目还用了自定义ESLint规则，同时要在.eslintrc（或.eslintrc.json）里更新Espree的解析器选项：

{
  "parser": "espree",
  "parserOptions": {
    "ecmaVersion": "latest", // 或者直接写2022
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true // 因为你的代码是React项目，必须开启JSX支持
    }
  }
}

2. 升级SonarJS插件和Sonar-Scanner版本 #

旧版本的SonarJS插件（低于9.0版本）对ES2022的类字段语法支持不完善，建议：

• 把SonarQube服务器上的SonarJS插件升级到9.0及以上
• 同时确保本地的sonar-scanner命令行工具是最新版本，可以通过sonar-scanner --version检查，直接去官网下载最新包更新即可

3. 切换到Babel解析器（如果项目已用Babel） #

如果你的React项目本来就用Babel编译代码，直接让SonarQube用Babel的解析器来处理代码会更顺畅，因为它能完美兼容Babel预设支持的所有语法：
首先安装必要依赖：

npm install @babel/eslint-parser @babel/preset-react @babel/preset-env --save-dev

然后修改.eslintrc配置：

{
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "babelOptions": {
      "presets": ["@babel/preset-react", "@babel/preset-env"]
    }
  }
}

验证解决效果 #

完成配置后，先清理一下本地缓存（比如删除项目根目录下的.sonar目录），然后重新运行sonar-scanner命令，应该就能正常解析所有带箭头函数的文件了。

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