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) => {

});
"react/self-closing-comp": 1,//当标签没有子元素的时候,始终使用自闭合的标签
// bad
<Foo className="stuff"></Foo>

// good
<Foo className="stuff" />
"react/sort-comp": 1,//按照具体规范的React.createClass 的生命周期函数书写代码
 
"react/jsx-pascal-case": 1,//拓展名:React组件使用.jsx扩展名;文件名:文件名使用帕斯卡命名:HomePage.jsx; 引用命名:React组件使用帕斯卡命名,引用实例采用驼峰式命名
// bad
import reservationCard from './ReservationCard';

// good
import ReservationCard from './ReservationCard';

// bad
const ReservationItem = <ReservationCard />;

// good
const reservationItem = <ReservationCard />;
"template-curly-spacing": [1,"always"], 此规则可根据样式指南强制花括号对内使用间距

"quotes"//强制一致使用反引号,双引号,单引号。
      "quotes": [
        1,
        "single",
        {
          "avoidEscape": true
        }
      ],
"semi": [1,"never",{"beforeStatementContinuationChars": "always"}],//不加分号,"beforeStatementContinuationChars": "always"要求在声明的末尾加分号,如果下一行开头[(/+,或-
 
"prefer-const": 1,//如果是不变的,提示用常量const声明会更好
 
"react/prefer-es6-class": 1,//如果组件拥有内部的state或者refs时,更推荐使用class extends Component,除非有更好的理由使用mixin。
// bad
const Listing = React.createClass({
  // ...
  render() {
    return &lt;div&gt;{this.state.hello}&lt;/div&gt;;
  }
});

// good
class Listing extends React.Component {
  // ...
  render() {
    return &lt;div&gt;{this.state.hello}&lt;/div&gt;;
  }
}
"react/jsx-filename-extension": [1, {"extensions": [".js", ".jsx"]}],//文件是.js还是.jsx
function MyComponent() {
  return <div />;
}

// bad 
组件名: MyComponent.js

// good
组件名: MyComponent.jsx
"react/jsx-curly-spacing": [1, "always"],//在jsx属性和表达式中强制空格。
"react/no-deprecated":1,//不使用弃用的方法
"react/jsx-no-undef":1,//在jsx中禁止未声明的变量
"no-undef": 1,//不能有未定义的变量
"react/jsx-no-duplicate-props": 1,//防止在jsx中重复的props
"react/jsx-key": 1,//子数组和迭代器中验证jsx具有key属性
"react/prop-types": [1,{"ignore": ["match"]}],//防止在React组件定义中丢失props验证,这里不针对match验证
"react/no-array-index-key": 1,//防止在数组中遍历中使用数组key做索引
"class-methods-use-this": 1,//该规则旨在标记不使用的类方法this
"no-empty": 1,//块语句中的内容不能为空
"no-case-declarations": 1,//不允许在 case 子句中使用词法声明
"no-return-assign": 1,//禁止在 return 语句中使用赋值语句
"no-param-reassign": 1,不允许对function对参数重新赋值
"no-shadow": 1,//禁止 var 声明 与外层作用域的变量同名
"camelcase": 1,//强制使用骆驼拼写法命名约定
"no-unused-vars": 1,//禁止出现未使用过的变量
 
"react/jsx-closing-tag-location": 1,//强制执行多行JSX元素的结束标记位置
"react/jsx-no-literals":1,//在JSX中使用文字字符串时,您可以将其包装在JSX容器中{'TEXT'}
原文地址:https://www.cnblogs.com/wang715100018066/p/10536104.html