reactjs - 插件 'gulp-eslint' 中的 ESLintError - 解析错误 : Unexpected token

Question

我正在开发一个 ReactJs 项目，我正在使用 ES7 编写代码，以便在我的 React 组件中编写更优雅的代码，特别是静态 propTypes。

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

这是我收到的错误消息

[11:12:34] ESLintError in plugin 'gulp-eslint'Message:Parsing error: Unexpected token =Details:fileName: [MYFOLDER]/client/components/app/article/asset/index.jslineNumber: 5[11:12:36][MYFOLDER]/client/components/app/article/asset/index.js5:19 error Parsing error: Unexpected token =

它被引用为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));

这是我的 eslint 配置

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

我做错了什么？非常感谢

Answer 1

使用babel-eslint parser在您的 ESLint 配置中。

npm install babel-eslint --save

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