神秘的 ESLint 解析错误答案

【问题标题】：Mysterious ESLint Parsing Error神秘的 ESLint 解析错误
【发布时间】：2016-03-11 13:23:47
【问题描述】：

在以下代码的第 4 行，ESLint 给我一个解析错误：

意外的令牌 =

我想知道为什么会这样？代码运行正常。我做错了什么？

import { Component, PropTypes } from 'react';

export default class MainApp extends Component {
  static propTypes = {
    children: PropTypes.any.isRequired
  }

  componentWillMount() {
    require('./styles/main.styl');
  }

  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}

【问题讨论】：

标签： javascript reactjs react-jsx eslint

【解决方案1】：

我能够通过以下方式解决此问题：

1) 安装 babel-eslint

$ npm i --save-dev babel-eslint

或

$ yarn add babel-eslint --dev

2) 配置 ESLint 以使用 babel-eslint 作为解析器

只需将 "parser": "babel-eslint", 添加到您的 .eslintrc 文件中即可。

示例 .eslintrc 以使用 babel-eslint 和带有一些自定义规则的 airbnb 配置：

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "rules": {
    "arrow-body-style": "off",
    "no-console": "off",
    "no-continue": "off"
  }
}

【讨论】：

如果您添加了 "parser": "babel-eslint" 并且仍然遇到同样的问题...确保您的 .babelrc 在插件中包含 "transform-class-properties"（确保您先添加它：yarn add babel-plugin-transform-class-properties -D）

【解决方案2】：

类中不能有属性，只能有方法。

参考：http://www.2ality.com/2015/02/es6-classes-final.html#inside_the_body_of_a_class_definition

【讨论】：

啊，我明白了。谢谢！我是 ES6 类的新手。
我使用的是 babel stage-0，它允许这种语法。我正在使用 eslint-config-airbnb，我想将此规则添加到 eslint。有没有办法做到这一点？
如何同时使用 babel-eslint 和 eslint-config-airbnb？我试图配置 eslint 来做到这一点无济于事。
请注意，ES7 将提供类属性，并且已经为它们提供了 babel-eslint 模块，当然还有转译器。
拒绝 b/c 这不再是常见的做法；例如，create-react-app 现在默认包含对象属性语法，它是常见的 Babel 包含。这个答案曾经是正确的，但现在已经过时了。