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

Posted 2023-02-22

【中文标题】如何配置 ESLint 以允许粗箭头类方法

【英文标题】：How do I configure ESLint to allow fat arrow class methods

【发布时间】：2016-03-18 15:02:17

【问题描述】：

当我尝试 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"
    ],
  

【问题讨论】：

您已经包含的arrowFunctions 应该涵盖它。这可能是不受支持的情况、错误或违反约定风格

是 ESLint 抛出错误还是转译器？

你试过使用 babel-eslint 吗？

这不是 ES6 类。这是一个实验性的 ES7 提议。

是的，这是一个 es7 提案（IMO 是一个明显的包含竞争者）。我通过使用 babel-eslint 作为我的 linter 解决了这个问题。它是 eslint 的替代品，最后有一个 babel 解析器。感谢所有参与进来的人。

【参考方案1】：

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

【讨论】：

更多细节在这里medium.com/@chestozo/…

确保你使用 babel-eslint >= 10.0.0

【参考方案2】：

先安装babel-eslint:

npm i -D babel-eslint

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

"parser": "babel-eslint"

【讨论】：

我使用了这个解决方案。只是，在安装之前我跑了 npm -g ls | grep 巴别 | grep eslint 发现我已经全局安装了模块，所以只做了 .eslintrc 的事情。

对我来说就像一个魅力！

【参考方案3】：

首先安装这些插件：

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

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

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

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

【参考方案4】：

从我在错误消息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 和 react 预设），在您的 .babelrc 或您的 babel-loader 查询字段中，如果您正在使用 webpack。

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

【参考方案5】：

我今天遇到了同样的问题

@dreyescat 的回答对我有用。

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

Screenshot with "Parsing error: Unexpected token ="

那么如果你也选择stage-1preset，错误就消失了

Screenshot with no error

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

【参考方案6】：

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"

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

  ...
  "parserOptions": 
    ...
    "requireConfigFile": false,
  

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

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

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

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

卸载全局 eslint

对于大多数人来说，以下命令应该使用 npm (uninstall global package with npm) 和 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，我了解到我在系统版本的 Node 上安装了 eslint，而不是我当前的 Node 版本（我使用 nvm）。关注 these simple steps 删除全局 eslint，你应该很高兴！

【参考方案7】：

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

【讨论】：

查看Arrow functions