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

Question

ESLint 抛出Parsing error: Unexpected token = error when I try to lint Es6 classes。 我缺少什么配置参数来启用 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

首先安装babel-eslint ：

npm i -D babel-eslint

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

"parser": "babel-eslint"

Answer 3

首先安装这些插件：

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 4

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

假设你使用Babel作为你的 JavaScript 编译器/转译器和babel-eslint作为你的 ESLint 解析器，很可能是 Babel 抱怨语法，而不是 ESLint。

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

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

加起来：

1. 安装 babel 预设：

    npm install babel-preset-stage-1

2. 将此预设添加到您的预设列表中（我想您已经在使用es2015和react预设），无论是在您的.babelrc还是在您使用 webpack 的babel-loader查询字段中。

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

Answer 5

我今天遇到了同样的问题

@dreyescat 的答案对我有用。

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

带有“解析错误：意外标记 =”的屏幕截图

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

没有错误的截图

你可以自己在bebeljs.io网站上测试一下

Answer 6

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

我的问题是 eslint 使用的是全局安装的版本而不是我的本地版本，并且全局 eslint 无法访问我本地安装的 babel-eslint parser 。 此外，由于我全局安装的 eslint 安装在不同版本的节点上，因此删除它并非易事。

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

1. 按照@spencer.sm对本地 eslint的回答安装babel-eslint eslint。
2. 在终端中，检查运行eslint .是否得到不同的输出eslint . 和npx eslint . . 如果你得到不同的输出，很可能是你的全局 eslint 无法访问 babel-eslint。

卸载全局 eslint

对于大多数人来说，以下命令应该使用 npm 卸载 eslint（使用 npm卸载全局包）和 yarn（ 使用 yarn 卸载全局包）：

# npm
npm uninstall -g eslint
npm uninstall eslint

# yarn
yarn global remove eslint

接下来，运行npx eslint . 看看事情是否奏效。 如果不是，这对我来说不是，您需要采取额外的步骤来删除全局安装的 eslint。

从这个答案中，我了解到我在 Node 的系统版本而不是我当前版本的 Node 上安装了 eslint（我使用的是 nvm）。 按照这些简单的步骤删除全局 eslint，你应该很高兴！

Answer 7

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