style: modify eslintrc

Author: Sven

.eslintrc

@@ -23,11 +23,17 @@
     "comma-dangle": "off", // standard 默认禁止使用拖尾逗号，但是ES8新特性支持拖尾逗号，所以关闭
     "jsx-quotes": [2, "prefer-double"], // JSX中使用双引号
     "max-len": [2, 120, 2], // 一行最长长度
+    "no-use-before-define": [2, { "functions": true, "classes": true }],
     "space-before-function-paren":[2,
       {"anonymous": "always", "named": "never", "asyncArrow": "always"}], // 函数圆括号之前有一个空格
     "object-curly-spacing": [2, "always"],  // 对象花括号总是包裹空格
     "react/jsx-curly-spacing": [2, {"when": "never", "children": true}], // 不要在JSX {} 引用括号里两边加空格
     "react/jsx-closing-bracket-location": [2, "line-aligned"],  // JSX对齐方式
-    "react/jsx-wrap-multilines": [2]  //JSX多行元素用()包裹
+    "react/jsx-wrap-multilines": 2,  //JSX多行元素用()包裹
+    "react/prefer-stateless-function": 2,
+    "react/jsx-boolean-value": 2,
+    "react/no-string-refs": 2,
+    "react/jsx-filename-extension": 2,
+    "react/default-props-match-prop-types": 2
   }
 }

package.json

@@ -8,7 +8,7 @@
     "compile": "node build/scripts/compile",
     "build": "npm run clean && cross-env NODE_ENV=production npm run compile",
     "start": "cross-env NODE_ENV=development node build/scripts/start",
-    "lint": "eslint .",
+    "lint": "eslint . --ext .js,.jsx",
     "lint:fix": "npm run lint -- --fix"
   },
   "repository": {

src/components/App.js renamed to src/components/App.jsx

@@ -2,14 +2,7 @@ import React from 'react'
 import { bool } from 'prop-types'
 import Spinner from 'react-spinkit'
 
-Loading.propTypes = {
-  isLoading: bool,
-  timedOut: bool,
-  pastDelay: bool,
-  error: bool
-}
-
-export default function Loading(props) {
+function Loading(props) {
   if (props.isLoading) {
     // While our other component is loading...
     if (props.timedOut) {
@@ -30,3 +23,12 @@ export default function Loading(props) {
     return null
   }
 }
+
+Loading.propTypes = {
+  isLoading: bool,
+  timedOut: bool,
+  pastDelay: bool,
+  error: bool
+}
+
+export default Loading

src/components/Loading.js renamed to src/components/Loading.jsx

@@ -3,12 +3,6 @@ import PropTypes from 'prop-types'
 import { Route, Redirect } from 'react-router-dom'
 import { connect } from 'react-redux'
 
-PrivateRoute.propTypes = {
-  isAuthenticated: PropTypes.bool.isRequired,
-  component: PropTypes.func.isRequired,
-  location: PropTypes.object.isRequired,
-}
-
 function PrivateRoute({ component: Component, isAuthenticated, ...rest }) {
   return (
     <Route {...rest} render={props => (
@@ -27,6 +21,12 @@ function PrivateRoute({ component: Component, isAuthenticated, ...rest }) {
   )
 }
 
+PrivateRoute.propTypes = {
+  isAuthenticated: PropTypes.bool.isRequired,
+  component: PropTypes.func.isRequired,
+  location: PropTypes.object.isRequired,
+}
+
 const mapStateToProps = (state) => ({
   isAuthenticated: state.isAuthenticated
 })

src/components/PrivateRoute.js renamed to src/components/PrivateRoute.jsx

@@ -4,12 +4,6 @@ import { Button } from 'reactstrap'
 
 // Stateless Functional Component
 // React style：https://github.com/airbnb/javascript/tree/master/react
-Counter.propTypes = {
-  counter: number.isRequired,
-  increment: func.isRequired,
-  doubleAsync: func.isRequired
-}
-
 function Counter({ counter, increment, doubleAsync }) {
   return (<div style={{ margin: '0 auto' }}>
     <h3>Counter: {counter}</h3>
@@ -23,4 +17,10 @@ function Counter({ counter, increment, doubleAsync }) {
   </div>)
 }
 
+Counter.propTypes = {
+  counter: number.isRequired,
+  increment: func.isRequired,
+  doubleAsync: func.isRequired
+}
+
 export default Counter