插件'gulp-eslint'中的ESLintError-分析错误：意外令牌=

Question

我正在做一个ReactJs项目，我试图能够在ES7中编写代码，以便在我的React组件（特别是静态propTypes）中编写更优雅的代码。

我将Gulp与Babel，ESlint一起使用，但无法修复与我的静态propTypes相关的编译错误

这是我收到的错误消息

[11:12:34]插件'gulp-eslint'中的ESLintError消息：解析错误：意外的令牌=详细信息：fileName：[MYFOLDER] /client/components/app/article/asset/index.js lineNumber：5 [11： 12:36] [MYFOLDER] /client/components/app/article/asset/index.js 5:19错误解析错误：意外令牌=

并引用该行static propTypes = {

import React from 'react';

export default class Asset extends React.Component {

  static propTypes = {
    articleImageUrl: React.PropTypes.string.isRequired,
  };

  static defaultProps = {
    articleImageUrl: 'https://placeholdit.imgix.net/~text?txtsize=60&txt=640%C3%97480&w=640&h=480'
  };


  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="article__asset">
        <figure>
          <img src={this.props.articleImageUrl} />
        </figure>

      </div>
    );
  }
}

这是我的babel配置

return browserify({
            debug: true,
            entries: [`${NPM_DIR}/es5-shim/es5-shim.js`, CLIENT_DIR + '/index.js']
        })
        .transform(babelify.configure({
            sourceMapRelative: CLIENT_DIR,
            presets: ['react', 'es2015', 'stage-0'],
            plugins: ["transform-object-rest-spread", "transform-decorators-legacy", "transform-class-properties"]
        }))
        .bundle()
        .on('error', function(e){
            gutil.log(e);
        })
        .pipe(source('bundle.js'))
        .pipe(rename('bundle.min.js'))
        .pipe(gulp.dest(PUBLIC_DIR));

这是我的陪同配置

{
  "plugins": [
    "react"
  ],
  "extends":  ["eslint:recommended", "plugin:react/recommended"],
  "ecmaVersion": 7,
  "rules": {
    // rules
  },
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "blockBindings": true
    }
  }
}

我究竟做错了什么？非常感谢

Answer 1

在ESLint配置中使用babel-eslint解析器。

npm install babel-eslint --save

{
  "parser": "babel-eslint",
  "plugins": ["react"],
  ...
}