プラグイン 'gulp-eslint'のESLintError - 解析エラー：予期しないトークン=

Question

私はReactJsプロジェクトに取り組んでいます。私はReactコンポーネントの中でより洗練されたコードを書くためにES7でコードを書くことを試みています具体的には、静的propタイプです。

これは私が

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

を取得し、それはラインと呼ばれるエラーメッセージです

私はバベル、ESlintでがぶ飲みを使用しますが、私は私の静的propTypesに関連するコンパイルエラーを修正することはできません静的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> 
    ); 
    } 
} 

これは私のバベル構成

です

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

あなたのESLint設定でbabel-eslint parserを使用してください。

npm install babel-eslint --save 

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