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 <div>{this.state.hello}</div>;
  }
});

// good
class Listing extends React.Component {
  // ...
  render() {
    return <div>{this.state.hello}</div>;
  }
}

 

"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'}