Question

当我尝试lint我的Es6类时，ESLint会抛出Parsing error: Unexpected token =错误。在eslint中启用胖箭头类方法我缺少什么配置参数？

示例类：

class App extends React.Component{
    ...
    handleClick = (evt) => {
        ...
    }
}

.eslint

{
  "ecmaFeatures": {
    "jsx": true,
    "modules":true,
    "arrowFunctions":true,
    "classes":true,
    "spread":true,

  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "rules": {
    "strict": 0,
    "no-underscore-dangle": 0,
    "quotes": [
      2,
      "single"
    ],
  }
}

Answer 1

如果要使用实验性功能（例如箭头作为类方法），则需要使用babel-eslint作为解析器。默认解析器（Espree）不支持实验性功能。

Answer 2

从我在错误消息Parsing error: Unexpected token =中读到的内容来看，它看起来像是一个解析器错误而不是linter一个。

假设您使用Babel作为JavaScript编译器/转换程序并使用babel-eslint作为ESLint解析器，可能是Babel抱怨语法，而不是ESLint。

问题不在于箭头功能，而在于更具实验性（ES7 ??），我认为它被称为property initializer或class instance field（或两者都是:)。

如果您想使用这种新语法/功能，则需要在Babel中启用preset-stage-1。此预设包括允许该语法的syntax-class-properties插件。

总结：

安装babel预设：
```
npm install babel-preset-stage-1
```
将此预设添加到您的es2015或{{3如果你使用webpack，则查询字段。
```
react
```

Answer 3

首先安装babel-eslint：

npm i -D babel-eslint

然后将以下内容添加到您的.eslintrc.json文件中：

"parser": "babel-eslint"

Answer 4

我今天遇到了同样的问题

和@dreyescat的回答对我有用。

默认情况下，babel使用3个预设：es2015，react，stage-2

Screenshot with "Parsing error: Unexpected token ="

然后，如果您还选择stage-1预设，则错误消失

Screenshot with no error

您可以自己在bebeljs.io网站上进行测试

Answer 5

首先安装这些插件：

npm i -D babel-eslint eslint-plugin-babel

然后将这些设置添加到您的eslint配置文件中：

.eslintrc.json

{
    "plugins": [ "babel" ],
    "parser": "babel-eslint",
    "rules": {
        "no-invalid-this": 0,
        "babel/no-invalid-this": 1,
    }
}

这样，您可以使用粗箭头类方法，而且不会从eslint中收到任何no-invalid-this错误。

快乐鳕鱼'

Answer 6

您的样本不是有效的ES6，因此无法配置eslint以允许它

如何配置ESLint以允许胖箭头类方法

6 个答案: