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

Parsing error: Unexpected token =当我尝试整理Es6类时，ESLint引发错误。我缺少在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"
    ],
  }
}

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

首次安装babel-eslint：

npm i -D babel-eslint

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

"parser": "babel-eslint"

根据我在错误消息中看到的内容 Parsing error: Unexpected token =看到的内容来看，它比解析器更像是一个解析器错误。

假设您将Babel用作JavaScript编译器/编译器和babel-eslintESLint解析器，则很有可能是Babel在抱怨语法而不是ESLint。

问题不在于箭头函数，而是更多的实验性（ES7 ??），我认为它被称为属性初始值设定项或类实例字段（或两者都:)）。

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

加起来：

1. 安装babel预设：

   npm install babel-preset-stage-1
   

2. 将此预设添加到您或您的查询字段中的预设列表（我想您已经在使用es2015和react预设）中（如果您正在使用webpack）。.babelrcbabel-loader

   "presets": ["es2015", "stage-1", "react"]
   

首先安装以下插件：

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,
    }
}

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

快乐鳕鱼

我今天遇到了同样的问题

@dreyescat的答案对我有用。

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

带有“解析错误：意外的令牌=“的屏幕截图

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

屏幕截图无错误

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

您的示例不是有效的ES6，因此无法配置eslint允许它