77

Parsing error: Unexpected token =当我尝试 lint 我的 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"
    ],
  }
}
4

7 回答 7

51

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

于 2015-12-13T16:14:39.940 回答
34

首先安装babel-eslint：

npm i -D babel-eslint

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

"parser": "babel-eslint"
于 2018-10-14T20:16:26.160 回答
9

首先安装这些插件：

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

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

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

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

于 2019-03-07T13:17:03.843 回答
8

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

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

问题不在于箭头函数，而是更具实验性的东西（ES7??），我认为它被称为属性初始化器或类实例字段（或两者兼而有之:)）。

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

加起来：

  1. 安装 babel 预设：

    npm install babel-preset-stage-1

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

    "presets": ["es2015", "stage-1", "react"]
于 2015-12-13T17:24:22.040 回答
5

我今天遇到了同样的问题

@dreyescat 的回答对我有用。

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

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

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

没有错误的截图

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

于 2016-03-27T07:09:01.200 回答
1

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

  1. 如有必要，请移除旧包装：yarn remove babel-eslint或npm uninstall babel-eslint
  2. yarn add --dev @babel/eslint-parser或者npm install --save-dev @babel/eslint-parser
  3. 在.eslintrc添加"parser": "@babel/eslint-parser"

可选地，此答案建议包括"requireConfigFile": falsein.eslintrc以防止 eslint 搜索不必要的配置文件：

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

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

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

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

  1. 为您的本地 eslint安装babel-eslint 以下 @spencer.sm 的答案。
  2. 从终端，检查是否从运行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 上安装了 eslint，而不是我当前的 Node 版本（我使用 nvm）。按照这些简单的步骤删除全局 eslint，您应该一切顺利！

于 2021-12-02T21:04:03.467 回答
-6

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

于 2015-12-12T23:03:31.790 回答