[英]ESLint eslint-plugin-react arrow functions
我在使用eslint-plugin-react
插件的eslint-plugin-react
组件中使用ESLint和箭头功能时遇到了一些麻烦。 我只是执行以下命令:
npm i -g eslint eslint-plugin-react
eslint SignUpPage.jsx
这是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;
但是eslint的输出奇怪的是:
ubuntu@ETFly:/vagrant/client/src/containers$ eslint signuppage.jsx
/vagrant/client/src/containers/signuppage.jsx
31:16 error Parsing error: Unexpected token =
说changeUser
匿名函数上的=
符号是错误? 这是我的.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
}
}
好的,我似乎已经解决了。 当我意识到我的JSX扩展运算符也无法正常工作后,我在npm i --save-dev babel-eslint
安装了babel-eslint
。 这让我觉得ES6的所有东西都弄糟了。 因此,现在我刚刚在.eslintrc.json
文件的末尾添加了"parser": "babel-eslint"
从而添加了babel-eslint
解析器,一切都很好! 我想默认的eslint解析器不支持这些功能...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.