ESLint eslint-plugin-react Pfeilfunktionen

Question

Ich habe einige Probleme mit ESLint und Pfeilfunktionen in einer reaktiven Komponente mit dem eslint-plugin-react Plugin. Ich habe gerade diese Befehle:

1. npm i -g eslint eslint-plugin-react
2. eslint SignUpPage.jsx

Und hier ist SignUpPage:

/** 
* Created by jwilso37 on 4/5/2017. 
*/ 

import React from 'react'; 
import SignUpForm from '../components/landing/SignUpForm.jsx'; 
import 'whatwg-fetch' 


class SignUpPage extends React.Component { 

    constructor(props) { 
     super(props); 

     this.state = { 
      errors: {}, 
      user: { 
       email: '', 
       name: '', 
       password: '' 
      } 
     }; 
    } 

    /** 
    * Change the user object. 
    * 
    * @param {object} e - the JavaScript event object 
    */ 

    changeUser = (e) => { 
     const field = e.target.name; 
     const user = this.state.user; 
     user[field] = e.target.value; 

     this.setState({ 
      user 
     }); 
    }; 

    /** 
    * Handles processForm event and submits request to server. 
    * @param e 
    */ 
    processForm = (e) => { 
     e.preventDefault(); 
     const form = document.querySelector('form'); 
     const formData = new FormData(form); 

     fetch('/api/signup', { 
      method: 'POST', 
      body: formData 
     }).then(response => { 
      if (response.ok) { 
       this.setState({ 
        errors: {} 
       }); 
      } 
      else { 
       // returned > 300 status code 
       response.json().then(j => { 
        const errors = j.errors ? j.errors : {}; 
        errors.summary = j.message; 
        this.setState({ 
         errors: errors 
        }) 
       }) 
      } 
     }) 
    }; 


    /** 
    * Render the component. 
    */ 
    render() { 
     return (
      <SignUpForm 
       onSubmit={this.processForm} 
       onChange={this.changeUser} 
       errors={this.state.errors} 
       user={this.state.user} 
      /> 
     ); 
    } 

} 

export default SignUpPage; 

Aber die Ausgabe von eslint ist seltsam dies:

ubuntu@ETFly:/vagrant/client/src/containers$ eslint signuppage.jsx 

/vagrant/client/src/containers/signuppage.jsx 
    31:16 error Parsing error: Unexpected token = 

Sagen Sie, dass das = Zeichen an der anonymen changeUser Funktion ein Fehler ist? Hier ist mein .eslintrc.json:

{ 
    "plugins": [ 
    "react" 
    ], 
    "settings": { 
    "react": { 
     "createClass": "createClass", // Regex for Component Factory to use, default to "createClass" 
     "pragma": "React", // Pragma to use, default to "React" 
     "version": "15.0" // React version, default to the latest React stable release 
    } 
    }, 
    "parserOptions": { 
    "sourceType": "module", 
    "ecmaVersion": 6, 
    "ecmaFeatures": { 
     "jsx": true 
    } 
    }, 
    "extends": ["eslint:recommended", "plugin:react/recommended"], 
    "env": { 
    "browser": true 
    } 
} 

Answer 1

OK Ich schien es behoben zu haben. Ich installierte babel-eslint mit npm i --save-dev babel-eslint nachdem ich erkannte, dass mein JSX-Spread-Operator nicht so gut funktionierte. Es brachte mich dazu zu denken, dass alles ES6-Zeug versaut war. So, jetzt habe ich gerade babel-eslint Parser mit Hinzufügen "parser": "babel-eslint" an das Ende meiner .eslintrc.json Datei hinzugefügt und alles ist gut! Ich nehme an, der Standard-Eslint-Parser unterstützt diese Funktionen nicht ...