"no-multi-spaces": 1, //禁止多個空格react
"jsx-quotes": 1, //此規則強制在JSX屬性中一導致用雙引號或單引號es6
"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的時候,省略該屬性的賦值bash
disabled=「true」 改爲 disabled
"react/wrap-multilines": 1,使用括號包裹多行JSX標籤curl
// 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'}