Added linter

Author: Nelsie

README.md

@@ -275,16 +275,62 @@ $ git clone [email protected]:heroku/devcenter-embedded-tomcat.git
 ```
 
 
+
 ## Adding Client files
 If you have experience using `ReactJS`, `Redux`, `React Router` and `Webpack` then by going through the folder/files will give you the idea on how to accomplish this
 
 
+
+## Adding a Linter: [ESLint](https://eslint.org/)
+### Local installation
+```
+$ npm i eslint --save-dev
+```
+
+### Configuration file setup
+```
+$ ./node_modules/.bin/eslint --init
+```
+
+### ESLint prerequisites
+* [babel-eslint](https://github.com/babel/babel-eslint) - Lint all valid Babel code
+* [eslint-loader](https://github.com/MoOx/eslint-loader) - Linting JS files using eslint with webpack
+* [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react) - React specific linting rules for ESLint
+
+### Additional rules to get rid of React warnings
+```
+rules: {
+    ...
+    "react/jsx-uses-react": [2],
+    "react/jsx-uses-vars": [2],
+    ...
+}
+```
+
+### Additional environment to get rid of other warnings
+```
+env: {
+    ...
+    // Webpack module.hot
+    "commonjs": true,
+    // require()
+    "amd": true
+    ...
+}
+```
+
+
+
 ## References
 [For Java Web installation](https://devcenter.heroku.com/articles/create-a-java-web-application-using-embedded-tomcat)
 
 [For react/redux/react-router-dom integration](https://medium.com/@notrab/getting-started-with-create-react-app-redux-react-router-redux-thunk-d6a19259f71f)
 
 [For Webpack integration](https://medium.com/@rajaraodv/webpacks-hmr-react-hot-loader-the-missing-manual-232336dc0d96)
 
+[For configuring `eslint-loader` with Webpack](https://www.learnhowtoprogram.com/react/react-fundamentals/building-an-environment-automatic-linting-with-webpack)
+
+
+
 ## Dev Tools
 [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en)

src/main/webapp/client/.eslintrc.json

@@ -0,0 +1,33 @@
+{
+  "env": {
+    // Defines require() and define() as global variables as per the amd spec
+    "amd": true,
+    // window,document
+    "browser": true,
+    // Webpack module.hot
+    "commonjs": true,
+    "es6": true,
+    // Node process.env
+    "node": true
+  },
+  "extends": "eslint:recommended",
+  // Lint all valid Babel code
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    },
+    "sourceType": "module"
+  },
+  "plugins": ["react"],
+  "rules": {
+    "indent": ["error", 2],
+    "linebreak-style": ["error", "unix"],
+    "quotes": ["error", "double"],
+    // Get rid of React warnings
+    "react/jsx-uses-react": [2],
+    "react/jsx-uses-vars": [2],
+    "semi": ["error", "always"]
+  }
+}

src/main/webapp/client/app/components/App.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { Route, Link } from "react-router-dom";
 
 import Aux from "./Aux";
 import Header from "./header";

src/main/webapp/client/app/components/Routes.js

@@ -9,4 +9,3 @@ export default () => (
     <Route exact path="/about" component={About} />
   </Switch>
 );
-// render={() => System.import("./home").then(module => module.default)}

src/main/webapp/client/app/components/header/index.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { Link } from "react-router-dom";
 import Nav from "../nav";
 
 import "./style.scss";

src/main/webapp/client/app/components/home/style.scss

@@ -4,12 +4,12 @@
   &__note {
     color: $secondary-grey-color;
     font-size: 13px;
-    margin: 0 0 8px 20px;
+    margin: 0 0 8px 16px;
 
     &:before {
-      content: "//";
+      content: "#";
       float: left;
-      margin-left: -20px;
+      margin-left: -16px;
     }
   }
   &__footer {

src/main/webapp/client/app/components/material-button/index.js

@@ -1,6 +1,7 @@
 import React from "react";
 
 import MaterialRipple from "../material-ripple";
+
 import "./style.scss";
 
 const MaterialButton = props => (

src/main/webapp/client/app/components/nav/index.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { Link } from "react-router-dom";
 
 import MaterialRipple from "../material-ripple";
 

src/main/webapp/client/app/reducers/counter.js

@@ -2,33 +2,33 @@ import * as types from "../actions";
 
 export default (state = {}, action) => {
   switch (action.type) {
-    case types.INCREMENT_REQUESTED:
-      return {
-        ...state,
-        isIncrementing: true
-      };
+  case types.INCREMENT_REQUESTED:
+    return {
+      ...state,
+      isIncrementing: true
+    };
 
-    case types.INCREMENT:
-      return {
-        ...state,
-        count: state.count + 5,
-        isIncrementing: !state.isIncrementing
-      };
+  case types.INCREMENT:
+    return {
+      ...state,
+      count: state.count + 5,
+      isIncrementing: !state.isIncrementing
+    };
 
-    case types.DECREMENT_REQUESTED:
-      return {
-        ...state,
-        isDecrementing: true
-      };
+  case types.DECREMENT_REQUESTED:
+    return {
+      ...state,
+      isDecrementing: true
+    };
 
-    case types.DECREMENT:
-      return {
-        ...state,
-        count: state.count - 5,
-        isDecrementing: !state.isDecrementing
-      };
+  case types.DECREMENT:
+    return {
+      ...state,
+      count: state.count - 5,
+      isDecrementing: !state.isDecrementing
+    };
 
-    default:
-      return state;
+  default:
+    return state;
   }
 };

src/main/webapp/client/app/store/index.js

@@ -6,15 +6,17 @@ import rootReducer from "../reducers";
 
 export const history = createHistory();
 
+// To get rid of eslint warning
+/*global __INITIAL_STATE__*/
 const initialState = __INITIAL_STATE__ || {};
 const enhancers = [];
 const middleware = [thunk, routerMiddleware(history)];
 
-// if (process.env.NODE_ENV === "development") {
-if (typeof window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ === "function") {
-  enhancers.push(window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__());
+if (process.env.APP_ENV === "development") {
+  if (typeof window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ === "function") {
+    enhancers.push(window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__());
+  }
 }
-// }
 
 const composedEnhancers = compose(applyMiddleware(...middleware), ...enhancers);
 

src/main/webapp/client/package.json

@@ -22,12 +22,16 @@
   },
   "devDependencies": {
     "babel-core": "^6.26.0",
+    "babel-eslint": "^8.0.2",
     "babel-loader": "^7.1.2",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
     "clean-webpack-plugin": "^0.1.17",
     "css-loader": "^0.28.7",
+    "eslint": "^4.10.0",
+    "eslint-loader": "^1.9.0",
+    "eslint-plugin-react": "^7.4.0",
     "node-sass": "^4.5.3",
     "postcss-loader": "^2.0.8",
     "sass-loader": "^6.0.6",

src/main/webapp/client/webpack.dev.config.js

@@ -2,7 +2,6 @@ const path = require("path");
 const webpack = require("webpack");
 const CleanWebpackPlugin = require("clean-webpack-plugin");
 
-const BUILD_DIR = path.resolve(__dirname, "../public");
 const APP_DIR = path.resolve(__dirname, "./app");
 const SCSS_RESOURCES = path.resolve(__dirname, "./app/scss/resources/*.scss");
 
@@ -31,10 +30,7 @@ module.exports = {
     // Will output bundle.js
     filename: "bundle.js",
 
-    // Path of output files
-    path: BUILD_DIR,
-
-    // Required for webpack-dev-server
+    // Required by webpack-dev-server for outputting bundle
     publicPath: "/public/"
   },
 
@@ -68,11 +64,28 @@ module.exports = {
     new webpack.NamedModulesPlugin(),
 
     // Enable HMR globally; Generate hot update chunks
-    new webpack.HotModuleReplacementPlugin()
+    new webpack.HotModuleReplacementPlugin(),
+
+    new webpack.DefinePlugin({
+      "process.env.APP_ENV": JSON.stringify("development")
+    })
   ],
 
   module: {
-    loaders: [
+    rules: [
+      // Tell Webpack to detect errors/warnings but should still be able to build (but with warnings)
+      {
+        enforce: "pre", // specify as pre-loader; lint files not modified by other loaders (like babel-loader)
+        test: /\.js$/,
+        include: APP_DIR,
+        loader: "eslint-loader",
+        options: {
+          emitWarning: true, // instruct eslint-loader to output errors/warning in the console
+          configFile: "./.eslintrc.json" // points loader to ESLint config file
+        }
+      },
+
+      // Transpiling JS files using babel and webpack
       {
         test: /\.js$/,
         include: APP_DIR,
@@ -82,6 +95,7 @@ module.exports = {
           presets: ["es2015", "react", "stage-2"]
         }
       },
+
       {
         test: /\.scss$/,
         include: APP_DIR,
@@ -98,7 +112,16 @@ module.exports = {
           },
 
           // For auto prefixing
-          "postcss-loader",
+          // After installing ESLint, needed to add config here,
+          // thus config file (.postcssrc) is no longer in used
+          {
+            loader: "postcss-loader",
+            options: {
+              plugins: () => [
+                /* PostCSS Plugins */
+              ]
+            }
+          },
 
           // Compiles sass to css
           "sass-loader",