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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何配置ESLint以允许胖箭头类方法相关的知识,希望对你有一定的参考价值。

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

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

另一答案

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

假设您使用Babel作为javascript编译器/转换程序并使用babel-eslint作为ESLint解析器,可能是Babel抱怨语法,而不是ESLint。

问题不在于箭头功能,而是更具实验性的(ES7 ??),我认为它被称为property initializerclass instance field(或两者:))。

如果要使用此新语法/功能,则需要在Babel中启用preset-stage-1。此预设包括允许该语法的syntax-class-properties插件。

加起来:

  1. 安装babel预设: npm install babel-preset-stage-1
  2. 如果您使用的是webpack,请将此预设添加到预设列表中(我假设您已经在使用es2015react预设),在.babelrcbabel-loader查询字段中。 "presets": ["es2015", "stage-1", "react"]
另一答案

首先安装babel-eslint

npm i -D babel-eslint

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

"parser": "babel-eslint"
另一答案

我今天遇到了同样的问题

和@dreyescat的回答对我有用。

默认情况下,babel使用3个预设:es2015reactstage-2

Screenshot with "Parsing error: Unexpected token ="

然后,如果您还选择stage-1preset,则错误消失

Screenshot with no error

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

另一答案

首先安装这些插件:

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错误。

快乐的鳕鱼

另一答案

您的样本无效ES6,因此无法配置eslint以允许它

以上是关于如何配置ESLint以允许胖箭头类方法的主要内容,如果未能解决你的问题,请参考以下文章

对类方法使用胖箭头语法时,我可以使用 TypeScript 重载吗?

CoffeeScript:如何使用胖箭头和这个?

CoffeeScript:如何同时使用胖箭头和 this?

如何将胖箭头AngularJS转换为coffeescript

如何使用咖啡脚本使用`this`和`_this`(胖箭头)?

如何使用私有方法正确配置 ES6 类的 eslint?