如何配置 ESLint 以允许 fat arrow class 方法

Question

当我尝试检查我的 Es6 classes 时，

ESLint 抛出一个 Parsing error: Unexpected token = 错误。我缺少什么配置参数来启用 eslint 中的 fat arrow class 方法？

样本class：

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

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

Answer 2

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

Answer 3

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

假设你使用 Babel as your JavaScript compiler/transpiler and babel-eslint 作为你的 ESLint 解析器，很可能是 Babel 抱怨语法，而不是 ESLint。

问题不在于箭头函数，而是一些更具实验性的东西（ES7？？），我认为它被称为 property initializer or class instance field（或两者都 :)）。

如果您想使用这个新的 syntax/feature，您需要启用允许该语法的 preset-stage-1 in Babel. This preset includes the syntax-class-properties 插件。

总结：

安装babel预设：
```
npm install babel-preset-stage-1
```
将此预设添加到您的预设列表中（我想您已经在使用 es2015 和 react 预设），在您的 .babelrc 或如果您使用的是 webpack，您的 babel-loader 查询字段。
```
"presets": ["es2015", "stage-1", "react"]
```

Answer 4

我今天遇到了同样的问题

@dreyescat 的回答对我有用。

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

Screenshot with "Parsing error: Unexpected token ="

然后如果你也select stage-1预设，错误就消失了

Screenshot with no error

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

Answer 5

第一次安装babel-eslint:

npm i -D babel-eslint

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

"parser": "babel-eslint"

Answer 6

首先安装这些插件：

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

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

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

这样你就可以使用 fat arrow class 方法而且你不会从 ESLint 得到任何 no-invalid-this 错误。

Answer 7

2021 更新：确保您使用的是 `@babel/eslint-parser` 而不是已弃用的 `babel-eslint`

必要时删除旧包：yarn remove babel-eslint 或 npm uninstall babel-eslint
yarn add --dev @babel/eslint-parser 或 npm install --save-dev @babel/eslint-parser
在.eslintrc中添加"parser": "@babel/eslint-parser"

可选地，建议在 .eslintrc 中包含 "requireConfigFile": false 以防止 eslint 搜索不必要的配置文件：

{
  ...
  "parserOptions": {
    ...
    "requireConfigFile": false,
  }
}

如果这仍然不起作用，请尝试检查您的系统是否正在使用全局安装的 eslint（并将其删除）。

我的另一个问题是 eslint 使用的是全局安装版本而不是我的本地版本，以及全局 eslint can't access my locally installed babel-eslint parser。此外，由于我全局安装的 eslint 安装在不同版本的节点上，因此删除它并非易事。

检查您的系统使用的是全局还是本地 eslint。

为您的本地 eslint 安装 babel-eslint 。
从终端检查运行ning eslint . 和 npx eslint . 的输出是否不同。如果你得到不同的输出，很可能是你的全局 eslint 运行ning 无法访问 babel-eslint。

正在卸载全局 eslint

对于大多数人来说，以下命令应该使用 npm (uninstall global package with npm) and yarn (uninstall global package with yarn) 卸载 eslint：

# npm
npm uninstall -g eslint
npm uninstall eslint

# yarn
yarn global remove eslint

接下来，运行 npx eslint . 看看是否可行。如果没有，那对我来说不是这样，你需要采取额外的步骤来删除全局安装的 eslint。

从 this answer, I learned that I had installed eslint on a system version of Node instead of my current version of Node (I use nvm). Follow these simple steps 删除全局 eslint，你应该可以开始了！

如何配置 ESLint 以允许 fat arrow class 方法

How do I configure ESLint to allow fat arrow class methods

javascript

eslint

class-fields

2021 更新：确保您使用的是 `@babel/eslint-parser` 而不是已弃用的 `babel-eslint`

如果这仍然不起作用，请尝试检查您的系统是否正在使用全局安装的 eslint（并将其删除）。

检查您的系统使用的是全局还是本地 eslint。

正在卸载全局 eslint

如何配置 ESLint 以允许 fat arrow class 方法

How do I configure ESLint to allow fat arrow class methods

javascript

eslint

class-fields

2021 更新：确保您使用的是 @babel/eslint-parser 而不是已弃用的 babel-eslint

如果这仍然不起作用，请尝试检查您的系统是否正在使用全局安装的 eslint（并将其删除）。

检查您的系统使用的是全局还是本地 eslint。

正在卸载全局 eslint

2021 更新：确保您使用的是 `@babel/eslint-parser` 而不是已弃用的 `babel-eslint`