configure linter and add gulp task

Author: Brady Stilwell

.eslintrc.json

@@ -0,0 +1,64 @@
+{
+  "parser": "babel-eslint",
+  "rules": {
+    "indent": [
+      2,
+      2,
+      {
+        "SwitchCase": 1
+      }
+    ],
+    "quotes": [
+      2,
+      "single"
+    ],
+    "linebreak-style": [
+      2,
+      "unix"
+    ],
+    "prefer-const": 2,
+    "semi": [
+      2,
+      "always"
+    ],
+    "no-console": 0,
+    "no-unused-vars": [
+      2,
+      { "varsIgnorePattern": "React" }
+    ],
+    "react/jsx-uses-vars": [2]
+  },
+  "globals": {
+    "beforeEach": false,
+    "beforeAll": false,
+    "describe": false,
+    "it": false,
+    "xit": false,
+    "afterEach": false,
+    "afterAll": false,
+    "expect": false,
+    "spyOn": false,
+    "done": false,
+    "fail": false,
+    "React":false,
+    "ReactDOM":false,
+    "TestUtils":false,
+    "$": false,
+    "browser": false,
+    "jasmine": false
+  },
+  "env": {
+    "es6": true,
+    "node": true,
+    "browser": true
+  },
+  "extends": "eslint:recommended",
+  "ecmaFeatures": {
+    "jsx": true,
+    "experimentalObjectRestSpread": true,
+    "modules": true
+  },
+  "plugins": [
+    "react"
+  ]
+}

client/components/app.js

@@ -1,14 +1,14 @@
 import React from 'react';
-import Hello from './hello';
-import World from './world';
+import Hello from './Hello';
+import World from './World';
 
 export default class App extends React.Component {
   render () {
-   return (
+    return (
      <div>
        <Hello/>
        <World/>
      </div>
-   )
+    );
   }
 }

client/components/hello.js

@@ -2,6 +2,6 @@ import React from 'react';
 
 export default class Hello extends React.Component {
   render () {
-    return <h1>Hello</h1>
+    return <h1>Hello</h1>;
   }
 }

client/components/world.js

@@ -2,6 +2,6 @@ import React from 'react';
 
 export default class World extends React.Component {
   render () {
-    return <h1>World</h1>
+    return <h1>World</h1>;
   }
 }

client/main.js

@@ -1,5 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './components/app'
+import App from './components/App';
 
-ReactDOM.render(<App />, document.getElementById('container'));
+ReactDOM.render(<App />, document.getElementById('container'));

gulpfile.js

@@ -11,17 +11,9 @@ const webpackTestConfig = require('./spec/webpack.test.config');
 const webpackConfig = require('./webpack.config');
 const plumber = require('gulp-plumber');
 const gutil = require('gulp-util');
+const eslint = require('gulp-eslint');
 const nodemon = require('nodemon');
 
-function filterStack (stack) {
-  const jasmineCorePath = require.resolve('jasmine-core').split(path.sep).slice(0, -1).join(path.sep);
-  const superTestPath = require.resolve('supertest').split(path.sep).slice(0, -1).join(path.sep);
-  const superAgentPath = require.resolve('superagent').split(path.sep).slice(0, -1).join(path.sep);
-  return stack.split('\n').filter(function (stackLine) {
-    return stackLine.indexOf(jasmineCorePath) === -1 && stackLine.indexOf(superTestPath) === -1
-      && stackLine.indexOf(superAgentPath) === -1
-  }).join('\n');
-}
 const terminalReporter = new TerminalReporter({
   showColors: true,
   includeStackTrace: true,
@@ -30,6 +22,25 @@ const terminalReporter = new TerminalReporter({
   }
 });
 
+const filesToLint = [
+  'client/**/*.js',
+  'server/**/*.js',
+  'spec/client/**/*.js',
+  'spec/server/**/*.js'
+];
+
+gulp.task('runDev', [
+  'webpackWatch',
+  'serverWatch'
+]);
+
+gulp.task('lint', function () {
+  return gulp.src(filesToLint)
+    .pipe(eslint())
+    .pipe(eslint.format())
+    .pipe(eslint.failAfterError());
+});
+
 gulp.task('serverWatch', function () {
   nodemon({
     script: './server/utilities/runServer.js',
@@ -43,10 +54,6 @@ gulp.task('webpackWatch', function () {
     .pipe(gulp.dest('public/'));
 });
 
-gulp.task('runDev', [
-  'webpackWatch',
-  'serverWatch'
-]);
 
 gulp.task('jasmine', function () {
   process.env.NODE_ENV = 'test';
@@ -69,7 +76,7 @@ gulp.task('serverSpecs', function () {
 });
 
 gulp.task('specs', function () {
-  runSequence('unitSpecs', 'serverSpecs', function (err) {
+  runSequence('unitSpecs', 'serverSpecs', 'lint', function (err) {
     // avoids the cluttering error runSequence throws
     if (err) {
       process.exit(1)
@@ -98,4 +105,14 @@ function bundleAssets(config, options) {
     .on('error', function (err) {
       gutil.log(gutil.colors.red('Bundling test assets failed'), gutil.colors.red(err));
     });
+}
+
+function filterStack (stack) {
+  const jasmineCorePath = require.resolve('jasmine-core').split(path.sep).slice(0, -1).join(path.sep);
+  const superTestPath = require.resolve('supertest').split(path.sep).slice(0, -1).join(path.sep);
+  const superAgentPath = require.resolve('superagent').split(path.sep).slice(0, -1).join(path.sep);
+  return stack.split('\n').filter(function (stackLine) {
+    return stackLine.indexOf(jasmineCorePath) === -1 && stackLine.indexOf(superTestPath) === -1
+      && stackLine.indexOf(superAgentPath) === -1
+  }).join('\n');
 }

package.json

@@ -22,12 +22,18 @@
   },
   "devDependencies": {
     "babel-core": "^6.13.2",
+    "babel-eslint": "^7.1.0",
     "babel-loader": "^6.2.5",
     "babel-preset-es2015": "^6.13.2",
     "babel-preset-react": "^6.11.1",
     "babel-register": "^6.14.0",
     "body-parser": "^1.15.2",
+    "eslint": "^3.9.1",
+    "eslint-config-standard": "^6.2.1",
+    "eslint-plugin-react": "^6.6.0",
+    "eslint-plugin-standard": "^2.0.1",
     "gulp": "^3.9.1",
+    "gulp-eslint": "^3.0.1",
     "gulp-jasmine": "^2.4.0",
     "gulp-jasmine-browser": "^1.6.0",
     "gulp-plumber": "^1.1.0",

server/controllers/zipCodeController.js

@@ -3,7 +3,7 @@ const request = require('request-promise');
 module.exports = (req, res) => {
   return getDelegates()
     .then(legislators => {
-      res.status(200).json(legislators)
+      res.status(200).json(legislators);
     })
     .catch(() => {
       res.status(200).send('Sunlight Labs is hosed');
@@ -22,7 +22,7 @@ function getDelegates () {
         reject(new Error(`Status code: ${response.statusCode}`));
       }
       else {
-        resolve(response.body)
+        resolve(response.body);
       }
     }).catch(err => {
       reject(err);

server/server.js

@@ -1,8 +1,6 @@
-const path = require('path');
 const express = require('express');
 const bodyParser = require('body-parser');
 const getLogger = require('./utilities/logger');
-const logger = getLogger();
 const webpack = require('webpack');
 const config = require('../webpack.config.js');
 const zipCodeController = require('./controllers/zipCodeController');
@@ -34,12 +32,11 @@ module.exports = {
       });
     });
 
-    return app
+    return app;
   },
 
   start: function (port) {
     const logger = getLogger();
-
     const app = this.getApp();
     return new Promise((resolve) => server = app.listen(port, () => {
       logger.info('Server has started on port: ' + port);

spec/client/components/helloSpec.js

@@ -1,9 +1,9 @@
-import Hello from '../../../client/components/hello'
+import Hello from '../../../client/components/Hello';
 
 describe('Hello', function () {
   it('should render an h1', function () {
     this.render(<Hello/>);
-    expect(this.$container.find('h1').text()).toEqual('Hello')
+    expect(this.$container.find('h1').text()).toEqual('Hello');
   });
 });