Question

我正在使用箭头功能并且它抱怨解析错误：

Parsing Error: Unexpected token =

但是我的代码是有效的（请告诉我，如果我弄错了）。另外，我已将.eslintrc设置设置为使用es6解析：

.eslintrc

{
    "parserOptions": {
        "ecmaVersion": 6,
    }
}

这是我的代码：

class foo() {
     // Doesn't like the line below
     // even though it is valid:
     namedFunction = () => {

     }

}

有办法解决这个错误吗？这在特定函数的this值方面有很大的不同。

Answer 1

您正在使用类字段（a.k.a.属性初始值设定项）语法，该语法不是ECMAScript 2015（ES6）的一部分，也不是ES2016或2017的一部分，因此ESLint不支持。它目前是Stage 3 proposal。如果要将其与ESLint一起使用，则需要使用babel-eslint。该页面描述了如何使用它，但要点是：

安装
$ npm install eslint babel-eslint --save-dev
# or
$ yarn add eslint babel-eslint -D
注意： babel-eslint需要babel/core@>=7.2.0并运行有效的Babel配置文件。如果您尚未设置此功能，请参阅Babel Usage Guide。

设置

要使用babel-eslint，必须在ESLint配置文件中将"babel-eslint"指定为parser（有关详细信息，请参阅here）。

<强> .eslintrc.js
module.exports = {
  parser: "babel-eslint",
};
设置解析器后，可以按照Configuring ESLint文档中的说明配置您的配置。

Answer 2

根据 the GitHub repo 的说法，2021 年 babel-eslint 似乎已被弃用，取而代之的是 @babel/eslint-parser：

<块引用>

注意：babel-eslint 现在是 @babel/eslint-parser 并且已经进入了 Babel monorepo。

因此，要更新其他答案中的说明，您需要：

npm i eslint @babel/eslint-parser --save-dev

然后确保您在 parser 中配置了 .eslintrc 键：

{
  "parser": "@babel/eslint-parser",
  ...
}

顺便说一句，由于 OP 没有提到运行时，我在 Node 12 中运行，所以我不需要 babel 来转译我的代码，但是 ESlint 确实需要 babel 来整理代码代码（听起来很奇怪，但这是我的理解）。所以我还需要一个基本的 babel 配置，babel.config.json:

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "node": "12"
        }
      }
    ]
  ]
}

Answer 3

我遇到了非常相似的问题。就目前而言，接受的答案是正确的，并且非常有帮助。但是我使用的是 eslint 配置的 json 版本，而不是 javascript 版本，因此一旦使用以下方法安装了 babel-eslint：

npm i eslint babel-eslint --save-dev

我不得不更改我的 json 配置。现在看起来像这样：

.eslintrc.json

{
  "parserOptions": {
    "es6": true,
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "parser": "babel-eslint",
  "rules": {
    "no-unused-vars": 0
  },
  "env": {
    "browser": true,
    "node": true
  }
}

Eslint - “解析错误：意外的令牌=`指定的胖箭头/属性初始值设定项的错误

3 个答案:

安装

设置