React Native &Webpack: ESLint检测错误时令人困惑

对于React Native项目，我使用react-native-webpack-server, babel, eslint和webpack-hotloader

当ESLint检测到我的Javascript代码中的错误时，iOS模拟器仍然刷新应用程序并显示堆栈跟踪。而不是显示ESLint报告的错误，我已经从index.ios.bundle的错误，可能会令人困惑和难以调试。

例如:

'use strict';
import React, {
    StyleSheet,
    Text,
    View,
    TouchableHighlight,
    Component
} from 'react-native';
rger // This will cause an error.
export default class ContactsComponent extends Component {
  render() {
    return (
      <View>
        <Text>This is a simple application.</Text>
      </View>
    );
  }
}

我有ESLint报告的这个错误:

11:1   error    "rger" is not defined // Pretty straightforward

和这个错误报告的模拟器(所以React Native):

Invariant Violation: Application ContactsComponent has not been registered. This is either due to a require() error during initialization or failure to call AppRegistry.registerComponent.

这个错误信息不是很简单。

我想知道是否有一种更有效的方法来使用ESLint，也许是通过直接在模拟器中显示错误?

我的webpack.config.js:

var fs = require('fs');
var path = require('path');
var webpack = require('webpack');
var config = {
  debug: true,
  devtool: 'source-map',
  entry: {
    'index.ios': ['./javascript/ios.js'],
  },
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].js',
  },
  module: {
    loaders: [{
      test: /'.js$/,
      exclude: /node_modules/,
      loaders: ["babel?stage=0", "eslint"]
    }]
  },
  plugins: [],
};
// Hot loader
if (process.env.HOT) {
  config.devtool = 'eval'; // Speed up incremental builds
  config.entry['index.ios'].unshift('react-native-webpack-server/hot/entry');
  config.entry['index.ios'].unshift('webpack/hot/only-dev-server');
  config.entry['index.ios'].unshift('webpack-dev-server/client?http://localhost:8082');
  config.output.publicPath = 'http://localhost:8082/';
  config.plugins.unshift(new webpack.HotModuleReplacementPlugin());
  config.module.loaders[0].query.plugins.push('react-transform');
  config.module.loaders[0].query.extra = {
    'react-transform': {
      transforms: [{
        transform: 'react-transform-hmr',
        imports: ['react-native'],
        locals: ['module']
      }]
    }
  };
}
// Production config
if (process.env.NODE_ENV === 'production') {
  config.plugins.push(new webpack.optimize.OccurrenceOrderPlugin());
  config.plugins.push(new webpack.optimize.UglifyJsPlugin());
}
module.exports = config;

And .eslintrc:

{
  "parser": "babel-eslint",
  "plugins": [
    "react"
  ],
  "ecmaFeatures": {
    "jsx": true
  },
  "extends": "eslint:recommended",
  "rules": {
    "react/display-name": 1,
    "react/forbid-prop-types": 1,
    "react/jsx-boolean-value": 1,
    "react/jsx-closing-bracket-location": 1,
    "react/jsx-curly-spacing": 1,
    "react/jsx-indent-props": 1,
    "react/jsx-max-props-per-line": 1,
    "react/jsx-no-duplicate-props": 1,
    "react/jsx-no-literals": 1,
    "react/jsx-no-undef": 1,
    "react/jsx-quotes": 1,
    "react/jsx-sort-prop-types": 1,
    "react/jsx-sort-props": 1,
    "react/jsx-uses-react": 1,
    "react/jsx-uses-vars": 1,
    "react/no-danger": 1,
    "react/no-did-mount-set-state": 1,
    "react/no-did-update-set-state": 1,
    "react/no-direct-mutation-state": 1,
    "react/no-multi-comp": 1,
    "react/no-set-state": 1,
    "react/no-unknown-property": 1,
    "react/prop-types": 1,
    "react/react-in-jsx-scope": 1,
    "react/require-extension": 1,
    "react/self-closing-comp": 1,
    "react/sort-comp": 1,
    "react/wrap-multilines": 1,
    "strict": 0
  }
}

任何建议吗?