IT技术 - 如何配置 ESLint 以允许粗箭头类方法 - 吾爱随笔录

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

IT技术 javascript reactjs ecmascript-6 eslint

2021-03-11 07:43:16

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

6个回答

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

确保你使用 babel-eslint >= 10.0.0

2021-04-30 07:43:16

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

2021-05-08 07:43:16

首先安装babel-eslint：

npm i -D babel-eslint

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

"parser": "babel-eslint"

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

2021-05-02 07:43:16

对我来说就像一个魅力！

2021-05-12 07:43:16

首先安装这些插件：

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得到任何错误。

快乐编码

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

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

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

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

加起来：

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

我今天遇到了同样的问题

@dreyescat 的答案对我有用。

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

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

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

没有错误的截图

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

其它你可能感兴趣的问题

上一篇.setAttribute("禁用", false); 将可编辑属性更改为 false 下一篇RXJS 等待数组中的所有 observables 完成（或错误）