Add linting and nicer output

Author: gaearon

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "airbnb"
+}

devServer.js

@@ -5,8 +5,22 @@ var config = require('./webpack.config.dev');
 new WebpackDevServer(webpack(config), {
   publicPath: config.output.publicPath,
   historyApiFallback: true,
-  colors: true,
-  noInfo: true
+  stats: {
+    hash: false,
+    version: false,
+    timings: false,
+    assets: false,
+    chunks: false,
+    modules: false,
+    reasons: false,
+    children: false,
+    source: false,
+    publicPath: false,
+    colors: true,
+    errors: true,
+    errorDetails: true,
+    warnings: true,
+  }
 }).listen(3000, 'localhost', function (err, result) {
   if (err) {
     return console.log(err);

package.json

@@ -16,6 +16,12 @@
     "babel-preset-react": "^6.11.1",
     "cross-env": "^2.0.0",
     "css-loader": "^0.23.1",
+    "eslint": "^2.13.1",
+    "eslint-config-airbnb": "^9.0.1",
+    "eslint-loader": "^1.4.1",
+    "eslint-plugin-import": "^1.10.3",
+    "eslint-plugin-jsx-a11y": "^1.5.5",
+    "eslint-plugin-react": "^5.2.2",
     "html-webpack-plugin": "^2.22.0",
     "postcss-loader": "^0.9.1",
     "react": "^15.2.1",

src/App.js

@@ -1,12 +1,10 @@
-import React, { Component } from 'react';
+import React from 'react';
 import './App.css';
 
-export default class App extends Component {
-  render() {
-    return (
-      <div className='App'>
-        Hello!
-      </div>
-    );
-  }
+export default function App() {
+  return (
+    <div className="App">
+      Hello world!
+    </div>
+  );
 }

webpack.config.dev.js

@@ -13,6 +13,13 @@ module.exports = {
     publicPath: '/'
   },
   module: {
+    preLoaders: [
+      {
+        test: /\.js$/,
+        loader: 'eslint-loader',
+        include: path.resolve(__dirname, 'src')
+      }
+    ],
     loaders: [
       {
         test: /\.css$/,

webpack.config.prod.js

@@ -14,6 +14,13 @@ module.exports = {
     publicPath: '/'
   },
   module: {
+    preLoaders: [
+      {
+        test: /\.js$/,
+        loader: 'eslint-loader',
+        include: path.resolve(__dirname, 'src')
+      }
+    ],
     loaders: [
       {
         test: /\.css$/,