当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《如何配置ESLint以允许胖箭头类方法》经验,为你挑选了4个好方法。

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

Ilya Volodin.. 38

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



1> Ilya Volodin..:

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


一些更多详细信息在这里https://medium.com/@chestozo/fixing-eslint-no-invalid-this-error-for-fat-arrow-class-methods-a56908ca8bb6

2> spencer.sm..:

首先安装babel-eslint:

npm i -D babel-eslint

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

"parser": "babel-eslint"



3> dreyescat..:

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

假设您使用Babel作为JavaScript编译器/转换器以及babel-eslint您的ESLint解析器,可能是Babel抱怨语法,而不是ESLint.

问题不是关于箭头函数,而是更实验性的(ES7 ??),我认为它被称为属性初始化器或类实例字段(或两者:)).

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

加起来:

    安装babel预设:

    npm install babel-preset-stage-1
    

    如果您使用的是webpack ,请将此预设添加到预设列表中(我假设您已经在使用es2015react预设),或者在您.babelrcbabel-loader查询字段中或在您的查询字段中.

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



4> 小智..:

我今天遇到了同样的问题

和@dreyescat的回答对我有用.

默认情况下,巴贝尔使用3个预设:es2015,react,stage-2

屏幕截图"Parsing error:Unexpected token ="

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

屏幕截图没有错误

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

推荐阅读
手机用户2402852307
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有