如何配置babel，才能使得es6 的class中可以使用箭头函数？

Question

如题，自己没事找事想在es6的class中使用箭头函数。（其实是想在react中组件类中使用箭头函数，这样就不用每个事件处理方法去bind（this）了）。

但是遇到代码报错问题让我非常头疼，我按照网上找的资料的说法大致对babel对配置做了如下处理，如presets选项增加stage-3，增加plugin等，可是报错问题还是存在。

请教各位有没有可以实现的解决方案？

Answer 1

第一张图应该是 vsc 编辑器自己的检查，在设置里面关掉就好，第二张图貌似代码写错了吧，ES6 里面 class 往实例上面加方法语法是：

class A {
  a = () => {}
}

往构造函数上面加静态方法是用 static 关键词，貌似不支持用冒号的写法。

如果还有问题可以贴一下 .babelrc 的配置

Answer 2

是我写法上的问题，应采用这样的写法，函数名后面跟=而不是：

class A {
  a = () => {}
}

此外，webpack中babel也得做配置，增加一个plugin，否则项目编译阶段仍然报错。

Answer 3

首先，你要知道在class中写箭头函数作为属性是react的语法。

基于此，如果你想阻止eslint的报错，你需要调整eslint对于react语法的检查。

这里用到babel-eslint

只需两步就可以了:

1. npm i babel-eslint -D / yarn add babel-eslint -D
2. 在你的.babelrc或package.json配置的babel内加入 "parser": "babel-eslint",

希望能帮到你

Answer 4

你大括号后面差个逗号

Answer 5

babel只负责转义！所以并非babel没用，这个只是编辑器语法检测报错了。

我所用的webstorm，需要设置语法环境。你可以查一下你的编辑器，看下哪里可以将语法设置为ES6 or react