添加eslint代码格式校验

package.json

@@ -3,6 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
+    "lint": "eslint --fix src/",
     "start": "node node_modules/react-native/local-cli/cli.js start",
     "mockserver": "node mockserver/app.js",
     "ios": "node node_modules/react-native/local-cli/cli.js run-ios",
@@ -43,6 +44,15 @@
   "devDependencies": {
     "babel-jest": "23.0.1",
     "babel-preset-react-native": "4.0.0",
+    "eslint": "^4.19.1",
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-config-airbnb-base": "^12.1.0",
+    "eslint-import-resolver-webpack": "^0.10.0",
+    "eslint-loader": "^2.0.0",
+    "eslint-plugin-import": "^2.12.0",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-react": "^7.9.1",
+    "eslint-plugin-react-native": "^3.2.1",
     "immutable-devtools": "^0.1.3",
     "jest": "23.1.0",
     "react-test-renderer": "16.3.1"

src/components/common-form/inputs/Datepicker.js

@@ -28,7 +28,9 @@ export default class Datepicker extends React.Component {
   }
 
   render() {
-    const { iconSource, label, containerStyle, last, date, disabled, placeholder, ...others } = this.props;
+    const {
+      iconSource, label, containerStyle, last, date, disabled, placeholder, ...others
+    } = this.props;
     let dateString;
     if (Moment(date).isValid()) {
       dateString = Moment(date).format('YYYY年MM月DD日');
@@ -40,7 +42,7 @@ export default class Datepicker extends React.Component {
       <TouchableHighlight
         style={{ opacity: disabled ? 0.3 : null }}
         disabled={disabled}
-        underlayColor={'#ededed'}
+        underlayColor="#ededed"
       >
         <View style={[inputStyle, last && styles.last, containerStyle]} {...others} >
           {iconSource ? <Image style={styles.icon} source={iconSource} /> : null}
@@ -59,7 +61,7 @@ export default class Datepicker extends React.Component {
           />
           {
             Platform.OS === 'ios' ?
-              <Icon style={chevronBlockStyle} name={'chevron-right'} color={'#c2c2c2'} size={26} />
+              <Icon style={chevronBlockStyle} name="chevron-right" color="#c2c2c2" size={26} />
               : <View style={chevronBlockStyle} />
           }
         </View>

src/components/common-form/inputs/PhoneNumberInput.js

@@ -18,17 +18,19 @@ export default class PhoneNumberInput extends React.Component {
   }
 
   render() {
-    const { containerStyle, last, style, value, onChange, ...others } = this.props;
+    const {
+      containerStyle, last, style, value, onChange, ...others
+    } = this.props;
 
     return (
       <View style={[inputStyle, last && styles.last, containerStyle]}>
         <formatText style={[controlLabelStyle, styles.phoneLabel]}>{COUNTRY_NUMBER}</formatText>
         <TextInput
           onChangeText={onChange}
-          keyboardType={'numeric'}
-          underlineColorAndroid={'transparent'}
+          keyboardType="numeric"
+          underlineColorAndroid="transparent"
           style={[textboxStyle, styles.textInput, style]}
-          placeholderTextColor={'#c2c2c2'}
+          placeholderTextColor="#c2c2c2"
           value={value}
           {...others}
         />

src/components/common-form/inputs/RouteInput.js

@@ -21,21 +21,23 @@ export default class RouteInput extends React.Component {
   }
 
   render() {
-    const { iconSource, label, containerStyle, last, style, text, onNext, disabled, ...others } = this.props;
+    const {
+      iconSource, label, containerStyle, last, style, text, onNext, disabled, ...others
+    } = this.props;
 
     return (
       <TouchableHighlight
         style={{ opacity: disabled ? 0.3 : null }}
         disabled={disabled}
         onPress={onNext}
-        underlayColor={'#ededed'}
+        underlayColor="#ededed"
       >
         <View style={[inputStyle, last && styles.last, containerStyle]} {...others} >
           {iconSource ? <Image style={styles.icon} source={iconSource} /> : null}
           {label ? <Text style={controlLabelStyle}>{label}</Text> : null}
           {
             Platform.OS === 'ios' ?
-              <Icon style={chevronBlockStyle} name={'chevron-right'} color={'#c2c2c2'} size={26} />
+              <Icon style={chevronBlockStyle} name="chevron-right" color="#c2c2c2" size={26} />
               : <View style={chevronBlockStyle} />
           }
         </View>

src/components/common-form/inputs/TextArea.js

@@ -18,10 +18,10 @@ export default class TextArea extends React.Component {
         <TextInput
           style={styles.input}
           multiline={true}
-          underlineColorAndroid={'transparent'}
+          underlineColorAndroid="transparent"
           onChangeText={onChange}
-          placeholderTextColor={'#c2c2c2'}
-          returnKeyType={'done'}
+          placeholderTextColor="#c2c2c2"
+          returnKeyType="done"
           {...others}
         />
       </View>

src/components/common-form/inputs/TextBox.js

@@ -19,23 +19,25 @@ export default class TextBox extends React.Component {
   }
 
   render() {
-    const { label, hasError, containerStyle, defaultValue, last, style, onChange, ...others } = this.props;
+    const {
+      label, hasError, containerStyle, defaultValue, last, style, onChange, ...others
+    } = this.props;
     return (
       <View style={[inputStyle, last && styles.last, containerStyle]}>
         {label ? <formatText style={controlLabelStyle}>{label}</formatText> : null}
         <TextInput
           onChangeText={onChange}
-          underlineColorAndroid={'transparent'}
+          underlineColorAndroid="transparent"
           style={[textboxStyle, style]}
-          returnKeyType={'done'}
-          autoCapitalize={'none'}
+          returnKeyType="done"
+          autoCapitalize="none"
           defaultValue={`${defaultValue}`}
-          placeholderTextColor={'#c2c2c2'}
+          placeholderTextColor="#c2c2c2"
           {...others}
         />
         {
           hasError ?
-            <Icon style={errorBlockStyle} name={'error'} color={'#ee5930'} size={18} />
+            <Icon style={errorBlockStyle} name="error" color="#ee5930" size={18} />
           : <View style={errorBlockStyle} />
         }
       </View>

src/components/market-list-item.js

@@ -83,17 +83,17 @@ class MarketListItem extends Component {
   }
   render() {
     return (
-      <View style = {styles.container}>
+      <View style={styles.container}>
         <View style={styles.leftWarp} >
           <Image
-          style={styles.icon}
-          source={{url: this.props.item.pic}}
-          ></Image>
+            style={styles.icon}
+            source={{ url: this.props.item.pic }}
+          />
         </View>
         <View style={styles.rightWarp} >
-          <Text style={{fontSize: 14, color: '#242527'}} >{this.props.item.carName}</Text>
-          <Text style={{fontSize: 11, color: '#757E8B'}} >{this.formateDate(this.props.item.manufactureDate) + ' | ' + this.props.item.score + '万公里' }</Text>
-          <Text style={{fontSize: 11, color: '#757E8B'}} >当前<Text style={{fontSize: 14, color: '#F7634F'}} >{this.props.item.bidMaxPrice}</Text>万元</Text>
+          <Text style={{ fontSize: 14, color: '#242527' }} >{this.props.item.carName}</Text>
+          <Text style={{ fontSize: 11, color: '#757E8B' }} >{`${this.formateDate(this.props.item.manufactureDate)} | ${this.props.item.score}万公里` }</Text>
+          <Text style={{ fontSize: 11, color: '#757E8B' }} >当前<Text style={{ fontSize: 14, color: '#F7634F' }} >{this.props.item.bidMaxPrice}</Text>万元</Text>
         </View>
       </View>
     );
@@ -127,4 +127,4 @@ const styles = StyleSheet.create({
   rightWarp: {
     flex: 1,
   }
-});
\ No newline at end of file
+});

src/components/select.js

-'use strict';
 import React from 'react';
 import {
   StyleSheet,
   Modal,
   Text,
   Dimensions,
-  TouchableHighlight,
   TouchableWithoutFeedback,
   Platform,
   Picker,
@@ -28,32 +26,34 @@ export default class Select extends React.Component {
   }
 
   _setModalVisible(visible) {
-    this.setState({modalVisible: visible});
+    this.setState({ modalVisible: visible });
   }
 
   _onChange(key) {
-    this.setState({selectedKey: key});
+    this.setState({ selectedKey: key });
     this.props.onChange(key);
   }
 
   _close() {
-    this.setState({modalVisible: false});
+    this.setState({ modalVisible: false });
   }
 
   _renderAndroid() {
-    const { options=this.props.models, selectedKey, onChange, style, labelStyle, ...other } = this.props;
+    const {
+      options = this.props.models, style, labelStyle, ...other
+    } = this.props;
 
     return (
       <View style={[styles.selectContainer, style]} {...other}>
         <Text style={labelStyle} >
-          {options[this.state.selectedKey] ? options[this.state.selectedKey].label : ""}
+          {options[this.state.selectedKey] ? options[this.state.selectedKey].label : ''}
         </Text>
         <Picker
-          selectedValue={this.state.selectedKey ? this.state.selectedKey : ""}
+          selectedValue={this.state.selectedKey ? this.state.selectedKey : ''}
           onValueChange={this._onChange.bind(this)}
           style={[styles.androidPicker]}
         >
-          {Object.keys(options).map((key) => (
+          {Object.keys(options).map(key => (
             <Picker.Item
               key={key}
               value={key}
@@ -67,15 +67,17 @@ export default class Select extends React.Component {
   }
 
   _renderIOS() {
-    const { options=this.props.models, selectedKey, onChange, style, labelStyle, doneLabel, doneLabelColor, ...other } = this.props;
-    var modalBackgroundStyle = {
+    const {
+      options = this.props.models, style, labelStyle, doneLabel, doneLabelColor, ...other
+    } = this.props;
+    const modalBackgroundStyle = {
       backgroundColor: 'transparent',
     };
-    var innerContainerTransparentStyle = null;
+    const innerContainerTransparentStyle = null;
     return (
       <View style={[styles.selectContainer, style]} {...other}>
         <Text style={labelStyle} onPress={this._setModalVisible.bind(this, true)}>
-          {options[this.state.selectedKey] ? options[this.state.selectedKey].label : ""}
+          {options[this.state.selectedKey] ? options[this.state.selectedKey].label : ''}
         </Text>
         <Modal
           animationType="slide"
@@ -86,26 +88,30 @@ export default class Select extends React.Component {
             <View style={[styles.container, modalBackgroundStyle]}>
               <View style={styles.pickerBar}>
                 <Text
-                  style={{color: doneLabelColor}}
-                  onPress={this._close.bind(this)}>
-                  {doneLabel || "完成"}
+                  style={{ color: doneLabelColor }}
+                  onPress={this._close.bind(this)}
+                >
+                  {doneLabel || '完成'}
                 </Text>
               </View>
-              <View onStartShouldSetResponder={ (evt) => true }
-                    onResponderReject={ (evt) => {} }
-                    style={[styles.innerContainer, innerContainerTransparentStyle]}>
-                    <Picker selectedValue={this.state.selectedKey}
-                               onValueChange={this._onChange.bind(this)}
-                               style={styles.pickerIOS}
-                    >
-                      {Object.keys(options).map((key) => (
-                        <Picker.Item
-                          key={key}
-                          value={key}
-                          label={options[key].label}
-                        />
+              <View
+                onStartShouldSetResponder={evt => true}
+                onResponderReject={(evt) => {}}
+                style={[styles.innerContainer, innerContainerTransparentStyle]}
+              >
+                <Picker
+                  selectedValue={this.state.selectedKey}
+                  onValueChange={this._onChange.bind(this)}
+                  style={styles.pickerIOS}
+                >
+                  {Object.keys(options).map(key => (
+                    <Picker.Item
+                      key={key}
+                      value={key}
+                      label={options[key].label}
+                    />
                       ))}
-                    </Picker>
+                </Picker>
               </View>
             </View>
           </TouchableWithoutFeedback>
@@ -119,7 +125,7 @@ export default class Select extends React.Component {
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   selectContainer: {
     flex: 1,
     alignItems: 'flex-end',

src/containers/routes/index.js

 /* @flow weak */
-import { connect } from 'react-redux';
 import { createStackNavigator } from 'react-navigation';
 import TabRoutes from './tabRoutes';
 
@@ -8,8 +7,8 @@ import Setting from '../other/Setting';
 
 const AllRoutes = createStackNavigator({
   Tabs: TabRoutes,
-  Login: Login,
-  Setting: Setting
+  Login,
+  Setting
 }, {
   mode: 'card',
   headerMode: 'screen',

src/containers/routes/tabRoutes.js

 import { createBottomTabNavigator } from 'react-navigation';
 import React from 'react';
-import {
-  Image
-} from 'react-native';
+import { Image } from 'react-native';
 import Home from '../tabs/Home';
 import Market from '../tabs/Market';
 import Account from '../tabs/Account';
@@ -16,45 +14,46 @@ import mineIconPress from '../../img/tabbar/toolbar-mine-icon-press.png';
 
 
 const Tabs = createBottomTabNavigator({
-  Home: Home,
-  Market: Market,
-  Account: Account,
+  Home,
+  Market,
+  Account,
 }, {
   tabBarPosition: 'bottom',
   swipeEnabled: false,
   animationEnabled: false,
-	navigationOptions:({navigation}) => {
-		let tabIcon, labelName, tabIconPress;
-		switch (navigation.state.routeName) {
-			case 'Home':
-				tabIcon = homeIcon;
-				tabIconPress = homeIconPress;
-				labelName = '首页';
-				break;
-			case 'Market':
-				tabIcon = marketIcon;
-				tabIconPress = marketIconPress;
-				labelName = '长时拍';
-				break;
-			case 'Account':
-				tabIcon = mineIcon;
-				tabIconPress = mineIconPress;
-				labelName = '我的';
-				break;
-			default:
-		}
+  navigationOptions:({ navigation }) => {
+    let tabIcon,
+      labelName,
+      tabIconPress;
+
+    switch (navigation.state.routeName) {
+      case 'Home':
+        tabIcon = homeIcon;
+        tabIconPress = homeIconPress;
+        labelName = '首页';
+        break;
+      case 'Market':
+        tabIcon = marketIcon;
+        tabIconPress = marketIconPress;
+        labelName = '长时拍';
+        break;
+      case 'Account':
+        tabIcon = mineIcon;
+        tabIconPress = mineIconPress;
+        labelName = '我的';
+        break;
+      default:
+    }
     return {
-			tabBarIcon: ({ focused, tintColor }) => {
-				return (
-					<Image
-						source={ focused ? tabIconPress : tabIcon }
-						style={[{ width: 26, height: 26 }, { tintColor }]}
-					/>
-				);
-			},
-			tabBarLabel: labelName
-		}
-	},
+      tabBarIcon: ({ focused, tintColor }) => (
+        <Image
+          source={focused ? tabIconPress : tabIcon}
+          style={[{ width: 26, height: 26 }, { tintColor }]}
+        />
+      ),
+      tabBarLabel: labelName
+    };
+  },
   tabBarOptions: {
     activeTintColor: '#149DFF',
     showIcon: true,
@@ -71,16 +70,17 @@ const Tabs = createBottomTabNavigator({
 });
 
 const navTitleMap = {
-	Home: '首页',
-	Market: '长时拍',
-	Account: '我的',
-}
-Tabs.navigationOptions = ({navigation}) => {
-  let { routeName } = navigation.state.routes[navigation.state.index];
-  let headerTitle = navTitleMap[routeName];
+  Home: '首页',
+  Market: '长时拍',
+  Account: '我的',
+};
+
+Tabs.navigationOptions = ({ navigation }) => {
+  const { routeName } = navigation.state.routes[navigation.state.index];
+  const headerTitle = navTitleMap[routeName];
   return {
     headerTitle,
   };
-}
+};
 
 export default Tabs;

src/containers/tabs/Account.js

 import { connect } from 'react-redux';
 import React, { Component } from 'react';
 import {
-  TouchableOpacity,
   View,
-  Button,
   StyleSheet,
-  ScrollView,
-  Platform,
-  Alert
+  Platform
 } from 'react-native';
-import Icon from 'react-native-vector-icons/Ionicons';
+
 import CommonForm from '../../components/common-form';
 
 class Account extends Component {
@@ -18,7 +14,7 @@ class Account extends Component {
   }
 
   goPage(page) {
-    this.props.navigation.navigate(page)
+    this.props.navigation.navigate(page);
   }
 
   render() {
@@ -63,42 +59,3 @@ function mapDispatchToProps(dispatch) {
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(Account);
-
-const styles = StyleSheet.create({
-  avatar: {
-    width: 60,
-    height: 60,
-    borderRadius: 30,
-    marginHorizontal:20
-  },
-  avatarHeader: {
-    flexDirection: 'row',
-    height: 90,
-    alignItems: 'center',
-    backgroundColor: '#fff',
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderColor: '#ccc'
-  },
-  header: {
-    backgroundColor: '#fe6946'
-  },
-  arrow: {
-    flex: 3,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingHorizontal: 15
-  },
-  scrollView: Platform.select({
-    ios: {
-      backgroundColor: '#f5f5f5'
-    },
-    android: {}
-  }),
-  scrollViewContainer: Platform.select({
-    ios: {
-      flex: 1,
-      backgroundColor: '#f5f5f5'
-    },
-    android: {}
-  })
-});

src/containers/tabs/Home.js

@@ -13,6 +13,13 @@ class Home extends Component {
     super(props);
   }
 
+  onButtonPress() {
+    codePush.sync({
+      updateDialog: true,
+      installMode: codePush.InstallMode.IMMEDIATE
+    });
+  }
+
   render() {
     return (
       <View style={styles.container} >
@@ -22,12 +29,6 @@ class Home extends Component {
       </View>
     );
   }
-  onButtonPress() {
-    codePush.sync({
-        updateDialog: true,
-        installMode: codePush.InstallMode.IMMEDIATE
-    });
-  }
 }
 
 function mapStateToProps(state) {

src/containers/tabs/Market.js

@@ -4,25 +4,20 @@ import React, { Component } from 'react';
 import {
   Dimensions,
   StyleSheet,
-  WebView,
   View,
   FlatList,
-  TouchableOpacity,
-  Text,
 } from 'react-native';
 import { Map } from 'immutable';
 
-import FormatText from '../../components/format-text';
 import MarketListItem from '../../components/market-list-item';
 import * as auctionActions from '../../reducers/auction/auctionActions';
 
-var Screen = Dimensions.get('window');
+const Screen = Dimensions.get('window');
 
 class Market extends Component {
   constructor(props, context) {
     super(props);
     this.state = {
-      paused: true,
       refreshState: false,
     };
     this.refreshData = this.refreshData.bind(this);
@@ -33,24 +28,23 @@ class Market extends Component {
   }
 
   refreshData() {
-    this.setState({refreshState: true});
+    this.setState({ refreshState: true });
     setTimeout(() => {
-      this.setState({refreshState: false});
+      this.setState({ refreshState: false });
     }, 1000);
   }
 
 
   render() {
-    const { navigate } = this.props.navigation;
     const { listData } = this.props.auction;
 
     return (
-      <View style = {styles.container}>
+      <View style={styles.container}>
         <FlatList
           data={listData}
           onRefresh={this.refreshData}
           refreshing={this.state.refreshState}
-          renderItem={({item}) => <MarketListItem item={item}></MarketListItem>}
+          renderItem={({ item }) => <MarketListItem item={item} />}
         />
       </View>
     );

src/lib/configureStore.js

@@ -10,9 +10,7 @@ const devMiddleware = applyMiddleware(
   thunk,
   logger
 )(createStore);
-const proMiddleware = applyMiddleware(
-  thunk
-)(createStore);
+const proMiddleware = applyMiddleware(thunk)(createStore);
 const createStoreWithMiddleware = __DEV__ ? devMiddleware : proMiddleware;
 
 export default function configureStore(initialState) {

src/reducers/actionTypes.js

@@ -7,5 +7,5 @@ export default keyMirror({
   SET_VERSION: null,
   IS_DEV: null,
 
-	GET_LIST_SUCC: null
+  GET_LIST_SUCC: null
 });

src/reducers/auction/auctionInitialState.js

-import { Record, fromJS } from 'immutable';
+import { fromJS } from 'immutable';
 
 const InitialState = fromJS({
   listData: []

src/reducers/auction/auctionReducer.js

@@ -8,7 +8,7 @@ const { GET_LIST_SUCC } = require('../actionTypes').default;
 //   alert(error.errorMessage || '网络错误');
 // }
 
-export default function auctionReducer (state = initialState, action) {
+export default function auctionReducer(state = initialState, action) {
   switch (action.type) {
     case GET_LIST_SUCC: {
       const listData = fromJS(action.payload);

src/reducers/device/deviceReducer.js

@@ -13,7 +13,6 @@ const initialState = new InitialState();
 export default function deviceReducer(state = initialState, action) {
   if (!(state instanceof InitialState)) return initialState.merge(state);
   switch (action.type) {
-
     case SET_PLATFORM: {
       const platform = action.payload;
       return state.set('platform', platform);