ESLint运行时报类内箭头函数存在意外token '=' 如何解决？

你使用的类内箭头函数写法属于类公共实例字段特性，该特性在ES2022才被正式纳入ECMAScript标准。ESLint v7.32.0默认的解析器（Espree）默认ECMAScript版本为2020，即便你配置了env.es2021: true也没有覆盖解析器的版本规则，因此无法识别该语法，就会抛出unexpected token '='报错。你的运行环境本身支持该特性，所以代码可以正常执行。

以下两种方案都可以保留你现有的箭头函数写法，不需要修改业务代码：

方案1：原生JS项目（未使用Babel转译） #

直接在eslintrc.json中新增parserOptions配置，将ECMAScript版本指定为2022或更高即可：

{
  "env": {
    "es2021": true
  },
  "parserOptions": {
    "ecmaVersion": 2022
  }
}

你也可以将ecmaVersion设为"latest"，自动匹配最新的ECMAScript版本规则。

方案2：使用Babel转译的项目 #

如果你的项目已经接入Babel做语法转译，可通过Babel专属的ESLint解析器兼容该语法：

• 首先安装所需依赖：
  npm install @babel/eslint-parser @babel/plugin-proposal-class-properties --save-dev
• 修改eslintrc.json配置如下：

{
  "env": {
    "es2021": true
  },
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "requireConfigFile": false,
    "babelOptions": {
      "plugins": ["@babel/plugin-proposal-class-properties"]
    }
  }
}

如果你项目本身已经有单独的Babel配置文件，并且已经开启了类属性插件，可删掉babelOptions字段的配置。

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