create-react-app项目中的eslint

"no-multi-spaces": 1, //禁止多个空格

"jsx-quotes": 1, //此规则强制在JSX属性中一致使用双引号或单引号

 

"react/jsx-closing-bracket-location": 1, //有多行属性的话, 新建一行关闭标签,为JSX语法使用下列的对齐方式

// bad
<Foo superLongParam="bar"
     anotherSuperLongParam="baz" />

// good
<Foo
  superLongParam="bar"
  anotherSuperLongParam="baz"
/>

// 如果组件的属性可以放在一行就保持在当前一行中，（个人觉得如果只有一个属性就放在一行）
<Foo bar="bar" />

 

react/jsx-boolean-value": 1,//当属性值等于true的时候，省略该属性的赋值

disabled=“true” 改成 disabled

 

"react/wrap-multilines": 1,使用括号包裹多行JSX标签

// bad
render() {
  return <MyComponent className="long body" foo="bar">
               <MyChild />
             </MyComponent>
}

// good
render() {
  return (
    <MyComponent className="long body" foo="bar">
      <MyChild />
    </MyComponent>
  );
}

// good, when single line
render() {
  const body = <div>hello</div>;
  return <MyComponent>{body}</MyComponent>;
}

"react/no-string-refs": 1,react 项目中给指定元素加事件，使用到 react 的 ref 属性

常用方法（会报错）

<Form ref="form1"></Form>

this.refs.form.validate((valid) => {

});

正确方法：

<Form ref={ e => { this.form1 = e } }></Form>

this.form1.validate((valid) => {

});