Reactjs 当我运行它时,它会给出很多语法/lint错误。为什么?
这甚至可能不是吞咽的东西。这可能是我担心的网页配置,也可能是我的linting设置。我认为必须有一个适当的ES或TS Lint,我需要连接到Gulp中,这样当它为这个React Asp.net核心应用程序构建我的客户端和服务器生成的Js文件时,它就不会如此挑剔了。我使用的是VisualStudio代码,通常只需右键单击并格式化文档就可以解决像这样的小问题,但当我运行gulp时,它会在这个新项目上变得疯狂。这是一些小错误,在我看来,对于间距和其他方面过于挑剔。有人有这方面的经验吗Reactjs 当我运行它时,它会给出很多语法/lint错误。为什么?,reactjs,gulp,webpack,lint,eslint,Reactjs,Gulp,Webpack,Lint,Eslint,这甚至可能不是吞咽的东西。这可能是我担心的网页配置,也可能是我的linting设置。我认为必须有一个适当的ES或TS Lint,我需要连接到Gulp中,这样当它为这个React Asp.net核心应用程序构建我的客户端和服务器生成的Js文件时,它就不会如此挑剔了。我使用的是VisualStudio代码,通常只需右键单击并格式化文档就可以解决像这样的小问题,但当我运行gulp时,它会在这个新项目上变得疯狂。这是一些小错误,在我看来,对于间距和其他方面过于挑剔。有人有这方面的经验吗 9:18 er
9:18 error A space is required after '{' object-curly-spacing
9:28 error A space is required before '}' object-curly-spacing
14:1 error Trailing spaces not allowed no-trailing-spaces
9:18 error A space is required after '{' object-curly-spacing
9:28 error A space is required before '}' object-curly-spacing
14:1 error Trailing spaces not allowed no-trailing-spaces
15:3 error handleChange should be placed after componentDidMount react/sort-comp
下面是这个错误示例的来源示例
import React, { Component } from 'react';
import Helmet from 'react-helmet';
// import { connect } from 'react-redux';
import { } from 'react-bootstrap';
export default class Test extends Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
componentDidMount() { }
render() {
return (
<div>
<Helmet title="Test" />
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
</div>
);
}
}
import React,{Component}来自'React';
从“反应头盔”导入头盔;
//从'react redux'导入{connect};
从'react bootstrap'导入{};
导出默认类测试扩展组件{
建造师(道具){
超级(道具);
this.state={value:''};
this.handleChange=this.handleChange.bind(this);
this.handleSubmit=this.handleSubmit.bind(this);
}
手变(活动){
this.setState({value:event.target.value});
}
handleSubmit(事件){
警报(“已提交名称:”+this.state.value);
event.preventDefault();
}
componentDidMount(){}
render(){
返回(
姓名:
);
}
}
感谢您的建设性意见,我能够更好地理解我的eslinter配置。事实上,在这种情况下,规则对我的需求可能有点敏感。我改变了规则,这样他们就不会用Gulp生成我的客户端和服务器js文件。这对我来说都是新鲜事。我不知道为什么在VisualStudio代码中,右键单击格式不能解决这些问题。我安装了最新的eslint插头,因此我认为它应该是最新的。以下是我的.eslintrc文件中的当前规则
"rules": {
"comma-dangle": 0, // not sure why airbnb turned this on. gross!
"indent": 0,
"object-curly-spacing": 0,
"no-trailing-spaces": 0,
"react/prefer-stateless-function": 0,
"react/prop-types": 0,
"react/jsx-closing-bracket-location": 0,
"react/jsx-indent": 0,
"no-console": 0,
"prefer-template": 0,
"max-len": 0,
"no-underscore-dangle": [2, {"allow": ["__data"]}],
"global-require": 0,
"no-restricted-syntax": 0,
"linebreak-style": 0,
"react/jsx-filename-extension": 0,
"import/imports-first": 0
},
谢谢@Daniel Beck和@CriCri谢谢你的建设性评论,我能够更好地理解我的eslinter配置。事实上,在这种情况下,规则对我的需求可能有点敏感。我改变了规则,这样他们就不会用Gulp生成我的客户端和服务器js文件。这对我来说都是新鲜事。我不知道为什么在VisualStudio代码中,右键单击格式不能解决这些问题。我安装了最新的eslint插头,因此我认为它应该是最新的。以下是我的.eslintrc文件中的当前规则
"rules": {
"comma-dangle": 0, // not sure why airbnb turned this on. gross!
"indent": 0,
"object-curly-spacing": 0,
"no-trailing-spaces": 0,
"react/prefer-stateless-function": 0,
"react/prop-types": 0,
"react/jsx-closing-bracket-location": 0,
"react/jsx-indent": 0,
"no-console": 0,
"prefer-template": 0,
"max-len": 0,
"no-underscore-dangle": [2, {"allow": ["__data"]}],
"global-require": 0,
"no-restricted-syntax": 0,
"linebreak-style": 0,
"react/jsx-filename-extension": 0,
"import/imports-first": 0
},
谢谢@Daniel Beck和@CriCri没有引起错误的代码,很难帮助您。您可以在问题中包含问题部分吗?您的linter配置了与您格式化代码的方式不匹配的样式规则。要么更改代码样式,要么重新配置linter以删除规则“对象卷曲间距”和“无尾随空格”。@Aurora0001,我添加了代码。如果你看到什么,请告诉我。谢谢。Gulp和webpack只是工具跑步者;他们会使用你要求他们使用的任何工具。在本例中,包括ESLint。转到并查找您实际想要包括的规则,并相应地更改您的ESLint配置文件。如果您没有定义配置文件,您将得到更严格的筛选。此外,TS linter还提供了除上面链接中的选项之外的其他选项。如果没有引发错误的代码,那么很难提供帮助。您可以在问题中包含问题部分吗?您的linter配置了与您格式化代码的方式不匹配的样式规则。要么更改代码样式,要么重新配置linter以删除规则“对象卷曲间距”和“无尾随空格”。@Aurora0001,我添加了代码。如果你看到什么,请告诉我。谢谢。Gulp和webpack只是工具跑步者;他们会使用你要求他们使用的任何工具。在本例中,包括ESLint。转到并查找您实际想要包括的规则,并相应地更改您的ESLint配置文件。如果您没有定义配置文件,您将得到更严格的筛选。此外,TS过梁可容纳除上述链接中的选项之外的其他选项。