Upgrade/enforce Prettier

.eslintrc

@@ -8,7 +8,8 @@
     },
   },
   "plugins": [
-      "react"
+    "react",
+    "prettier"
   ],
   "settings": {
     "react": {
@@ -22,29 +23,67 @@
     "es6": true,
     "jest": true
   },
-
   "rules": {
-    "no-multiple-empty-lines": ["error", {"max": 2, "maxEOF": 0, "maxBOF": 0}],
-    "arrow-body-style": ["error", "as-needed"],
+    "no-multiple-empty-lines": [
+      "error",
+      {
+        "max": 2,
+        "maxEOF": 0,
+        "maxBOF": 0
+      }
+    ],
+    "arrow-body-style": [
+      "error",
+      "as-needed"
+    ],
     "arrow-spacing": "error",
     "block-scoped-var": "warn",
-    "brace-style": ["warn", "1tbs"],
+    "brace-style": [
+      "warn",
+      "1tbs"
+    ],
     "camelcase": "error",
-    "comma-dangle": ["error", "never"],
+    "comma-dangle": [
+      "error",
+      "never"
+    ],
     "comma-spacing": "error",
     "consistent-return": "warn",
     "constructor-super": "error",
-    "dot-notation": ["error", { "allowKeywords": false }],
+    "dot-notation": [
+      "error",
+      {
+        "allowKeywords": false
+      }
+    ],
     "eol-last": "error",
-    "eqeqeq": ["error", "smart"],
+    "eqeqeq": [
+      "error",
+      "smart"
+    ],
     "guard-for-in": "error",
-    "indent": ["error", 2, {"SwitchCase": 1}],
-    "jsx-quotes": ["error", "prefer-double"],
+    "indent": [
+      "error",
+      2,
+      {
+        "SwitchCase": 1
+      }
+    ],
+    "jsx-quotes": [
+      "error",
+      "prefer-double"
+    ],
     "key-spacing": "warn",
     "keyword-spacing": "error",
     "linebreak-style": "error",
-    "max-depth": ["warn", 4],
-    "max-params": ["warn", 5],
+    "max-depth": [
+      "warn",
+      4
+    ],
+    "max-params": [
+      "warn",
+      5
+    ],
     "new-cap": "error",
     "no-alert": "error",
     "no-caller": "error",
@@ -99,24 +138,43 @@
     "no-unreachable": "error",
     "no-unused-expressions": "error",
     "no-unused-vars": "error",
-    "no-use-before-define": ["error", "nofunc"],
+    "no-use-before-define": [
+      "error",
+      "nofunc"
+    ],
     "no-useless-rename": "error",
     "no-var": "error",
     "no-with": "error",
-    "object-curly-spacing": ["error", "always"],
+    "object-curly-spacing": [
+      "error",
+      "always"
+    ],
     "prefer-arrow-callback": "warn",
     "prefer-const": "error",
     "prefer-spread": "error",
     "prefer-template": "warn",
-    "quotes": ["error", "double", "avoid-escape"],
+    "quotes": [
+      "error",
+      "double",
+      "avoid-escape"
+    ],
     "radix": "error",
     "react/no-string-refs": "error",
     "react/jsx-boolean-value": "error",
-    "react/jsx-closing-bracket-location": ["error", "line-aligned"],
+    "react/jsx-closing-bracket-location": [
+      "error",
+      "line-aligned"
+    ],
     "react/jsx-curly-spacing": "error",
     "react/jsx-equals-spacing": "error",
-    "react/jsx-first-prop-new-line": ["error", "multiline"],
-    "react/jsx-indent": ["error", 2],
+    "react/jsx-first-prop-new-line": [
+      "error",
+      "multiline"
+    ],
+    "react/jsx-indent": [
+      "error",
+      2
+    ],
     "react/jsx-uses-react": "error",
     "react/jsx-uses-vars": "error",
     "react/prefer-stateless-function": "error",
@@ -125,12 +183,25 @@
     "react/require-render-return": "error",
     "react/self-closing-comp": "error",
     "semi": "error",
-    "space-before-function-paren": ["error", {"anonymous": "never", "named": "never"}],
+    "space-before-function-paren": [
+      "error",
+      {
+        "anonymous": "never",
+        "named": "never"
+      }
+    ],
     "space-infix-ops": "error",
-    "space-unary-ops": ["error", { "words": true, "nonwords": false }],
+    "space-unary-ops": [
+      "error",
+      {
+        "words": true,
+        "nonwords": false
+      }
+    ],
     "template-curly-spacing": "error",
     "use-isnan": "error",
     "valid-typeof": "error",
-    "wrap-iife": "error"
+    "wrap-iife": "error",
+    "prettier/prettier": "error"
   }
-}
+}

js/components/ActionButtons.js

@@ -2,15 +2,14 @@ import React from "react";
 import { connect } from "react-redux";
 import { play, pause, stop } from "../actionCreators";
 
-const ActionButtons = props => (
+const ActionButtons = props =>
   <div className="actions">
     <div id="previous" />
     <div id="play" onClick={props.play} />
     <div id="pause" onClick={props.pause} />
     <div id="stop" onClick={props.stop} />
     <div id="next" />
-  </div>
-);
+  </div>;
 
 const mapStateToProps = state => state.media;
 

js/components/Balance.js

@@ -11,7 +11,7 @@ const offsetFromBalance = balance => {
   return offset;
 };
 
-const Balance = ({ balance, handleChange, showMarquee, hideMarquee }) => (
+const Balance = ({ balance, handleChange, showMarquee, hideMarquee }) =>
   <input
     id="balance"
     type="range"
@@ -23,8 +23,7 @@ const Balance = ({ balance, handleChange, showMarquee, hideMarquee }) => (
     onChange={handleChange}
     onMouseDown={showMarquee}
     onMouseUp={hideMarquee}
-  />
-);
+  />;
 
 const mapStateToProps = state => state.media;
 

js/components/Band.js

@@ -18,7 +18,7 @@ export const spriteOffsets = number => {
 
 const Handle = () => <div className="rc-slider-handle" />;
 
-const Band = ({ value, backgroundPosition, id, onChange }) => (
+const Band = ({ value, backgroundPosition, id, onChange }) =>
   <div id={id} className="band" style={{ backgroundPosition }}>
     <Slider
       type="range"
@@ -30,8 +30,7 @@ const Band = ({ value, backgroundPosition, id, onChange }) => (
       onChange={onChange}
       handle={Handle}
     />
-  </div>
-);
+  </div>;
 
 const mapStateToProps = (state, ownProps) => {
   const value = state.equalizer.sliders[ownProps.band];

js/components/Character.js

@@ -3,11 +3,10 @@ import React from "react";
 export const characterClassName = char =>
   `character-${char.toString().toLowerCase().charCodeAt(0)}`;
 
-const Character = ({ children: char, id }) => (
+const Character = ({ children: char, id }) =>
   <div id={id} className={`character ${characterClassName(char)}`}>
     {char}
-  </div>
-);
+  </div>;
 
 Character.propTypes = {
   children: React.PropTypes.oneOfType([

js/components/CharacterString.js

@@ -6,11 +6,11 @@ const CharacterString = props => {
   const chars = text.split("");
   return (
     <div {...props}>
-      {chars.map((character, index) => (
+      {chars.map((character, index) =>
         <Character key={index + character}>
           {character}
         </Character>
-      ))};
+      )};
     </div>
   );
 };

js/components/ClutterBar.js

@@ -4,7 +4,7 @@ import classnames from "classnames";
 
 import { SET_FOCUS, TOGGLE_DOUBLESIZE_MODE, UNSET_FOCUS } from "../actionTypes";
 
-const ClutterBar = props => (
+const ClutterBar = props =>
   <div id="clutter-bar">
     <div id="button-o" />
     <div id="button-a" />
@@ -16,8 +16,7 @@ const ClutterBar = props => (
       onMouseDown={props.handleMouseDown}
     />
     <div id="button-v" />
-  </div>
-);
+  </div>;
 
 const mapStateToProps = state => ({
   doubled: state.display.doubled

js/components/ContextMenu.js

@@ -53,14 +53,14 @@ class ContextMenu extends React.Component {
                 Load Skin...
               </li>
               <li className="hr"><hr /></li>
-              {SKINS.map(skin => (
+              {SKINS.map(skin =>
                 <li
                   key={skin.file}
                   onClick={this.props.setSkin.bind(null, skin.file)}
                 >
                   {skin.name}
                 </li>
-              ))}
+              )}
             </ul>
             Skins
           </li>

js/components/EqGraph.js

@@ -116,7 +116,7 @@ class EqGraph extends React.Component {
     return (
       <canvas
         id="eqGraph"
-        ref={node => this.canvas = node}
+        ref={node => (this.canvas = node)}
         width="152"
         height="32"
       />

js/components/EqToggleButton.js

@@ -4,13 +4,12 @@ import classnames from "classnames";
 
 import { TOGGLE_EQUALIZER_WINDOW } from "../actionTypes";
 
-const EqToggleButton = props => (
+const EqToggleButton = props =>
   <div
     id="equalizer-button"
     className={classnames({ selected: props.equalizer })}
     onClick={props.handleClick}
-  />
-);
+  />;
 
 const mapStateToProps = state => ({
   equalizer: state.windows.equalizer

js/components/EqualizerWindow.js

@@ -47,14 +47,14 @@ const EqualizerWindow = props => {
       <div id="plus12db" onClick={props.setEqToMax} />
       <div id="zerodb" onClick={props.setEqToMid} />
       <div id="minus12db" onClick={props.setEqToMin} />
-      {BANDS.map(hertz => (
+      {BANDS.map(hertz =>
         <Band
           key={hertz}
           id={bandClassName(hertz)}
           band={hertz}
           onChange={props.setHertzValue(hertz)}
         />
-      ))}
+      )}
     </div>
   );
 };

js/components/Kbps.js

@@ -3,10 +3,9 @@ import { connect } from "react-redux";
 
 import CharacterString from "./CharacterString";
 
-const Kbps = props => (
+const Kbps = props =>
   <CharacterString id="kbps">
     {props.kbps}
-  </CharacterString>
-);
+  </CharacterString>;
 
 export default connect(state => state.media)(Kbps);

js/components/Khz.js

@@ -3,10 +3,9 @@ import { connect } from "react-redux";
 
 import CharacterString from "./CharacterString";
 
-const Khz = props => (
+const Khz = props =>
   <CharacterString id="khz">
     {props.khz}
-  </CharacterString>
-);
+  </CharacterString>;
 
 export default connect(state => state.media)(Khz);

js/components/MonoStereo.js

@@ -2,14 +2,13 @@ import React from "react";
 import { connect } from "react-redux";
 import classnames from "classnames";
 
-const MonoStereo = props => (
+const MonoStereo = props =>
   <div className="mono-stereo">
     <div
       id="stereo"
       className={classnames({ selected: props.channels === 2 })}
     />
     <div id="mono" className={classnames({ selected: props.channels === 1 })} />
-  </div>
-);
+  </div>;
 
 export default connect(state => state.media)(MonoStereo);

js/components/Repeat.js

@@ -4,13 +4,12 @@ import classnames from "classnames";
 
 import { toggleRepeat } from "../actionCreators";
 
-const Repeat = props => (
+const Repeat = props =>
   <div
     id="repeat"
     className={classnames({ selected: props.repeat })}
     onClick={props.handleClick}
-  />
-);
+  />;
 
 const mapStateToProps = state => ({
   repeat: state.media.repeat

js/components/Shuffle.js

@@ -3,13 +3,12 @@ import { connect } from "react-redux";
 import classnames from "classnames";
 import { toggleShuffle } from "../actionCreators";
 
-const Shuffle = ({ shuffle, handleClick }) => (
+const Shuffle = ({ shuffle, handleClick }) =>
   <div
     id="shuffle"
     className={classnames({ selected: shuffle })}
     onClick={handleClick}
-  />
-);
+  />;
 const mapStateToProps = state => ({
   shuffle: state.media.shuffle
 });

js/mediaMiddleware.js

@@ -18,83 +18,81 @@ import {
   UPDATE_TIME_ELAPSED
 } from "./actionTypes";
 
-export default media =>
-  store => {
-    media.addEventListener("timeupdate", () => {
-      store.dispatch({
-        type: UPDATE_TIME_ELAPSED,
-        elapsed: media.timeElapsed()
-      });
+export default media => store => {
+  media.addEventListener("timeupdate", () => {
+    store.dispatch({
+      type: UPDATE_TIME_ELAPSED,
+      elapsed: media.timeElapsed()
     });
+  });
 
-    media.addEventListener("ended", () => {
-      store.dispatch({ type: IS_STOPPED });
+  media.addEventListener("ended", () => {
+    store.dispatch({ type: IS_STOPPED });
+  });
+
+  media.addEventListener("playing", () => {
+    store.dispatch({ type: IS_PLAYING });
+  });
+
+  media.addEventListener("waiting", () => {
+    store.dispatch({ type: START_WORKING });
+  });
+
+  media.addEventListener("stopWaiting", () => {
+    store.dispatch({ type: STOP_WORKING });
+  });
+
+  media.addEventListener("fileLoaded", () => {
+    store.dispatch({
+      type: SET_MEDIA,
+      kbps: "128",
+      khz: Math.round(media.sampleRate() / 1000).toString(),
+      channels: media.channels(),
+      name: media.name,
+      length: media.duration()
     });
+  });
 
-    media.addEventListener("playing", () => {
-      store.dispatch({ type: IS_PLAYING });
-    });
-
-    media.addEventListener("waiting", () => {
-      store.dispatch({ type: START_WORKING });
-    });
-
-    media.addEventListener("stopWaiting", () => {
-      store.dispatch({ type: STOP_WORKING });
-    });
-
-    media.addEventListener("fileLoaded", () => {
-      store.dispatch({
-        type: SET_MEDIA,
-        kbps: "128",
-        khz: Math.round(media.sampleRate() / 1000).toString(),
-        channels: media.channels(),
-        name: media.name,
-        length: media.duration()
-      });
-    });
-
-    return next =>
-      action => {
-        switch (action.type) {
-          case PLAY:
-            media.play();
-            break;
-          case PAUSE:
-            media.pause();
-            break;
-          case STOP:
-            media.stop();
-            break;
-          case SET_VOLUME:
-            media.setVolume(action.volume);
-            break;
-          case SET_BALANCE:
-            media.setBalance(action.balance);
-            break;
-          case TOGGLE_REPEAT:
-            media.toggleRepeat();
-            break;
-          case TOGGLE_SHUFFLE:
-            media.toggleShuffle();
-            break;
-          case SEEK_TO_PERCENT_COMPLETE:
-            media.seekToPercentComplete(action.percent);
-            break;
-          case LOAD_AUDIO_URL:
-            media.loadFromUrl(action.url, action.name);
-            break;
-          case LOAD_AUDIO_FILE:
-            media.loadFromFileReference(action.file.fileReference);
-            break;
-          case SET_BAND_VALUE:
-            if (action.band === "preamp") {
-              media.setPreamp(action.value);
-            } else {
-              media.setEqBand(action.band, action.value);
-            }
-            break;
+  return next => action => {
+    switch (action.type) {
+      case PLAY:
+        media.play();
+        break;
+      case PAUSE:
+        media.pause();
+        break;
+      case STOP:
+        media.stop();
+        break;
+      case SET_VOLUME:
+        media.setVolume(action.volume);
+        break;
+      case SET_BALANCE:
+        media.setBalance(action.balance);
+        break;
+      case TOGGLE_REPEAT:
+        media.toggleRepeat();
+        break;
+      case TOGGLE_SHUFFLE:
+        media.toggleShuffle();
+        break;
+      case SEEK_TO_PERCENT_COMPLETE:
+        media.seekToPercentComplete(action.percent);
+        break;
+      case LOAD_AUDIO_URL:
+        media.loadFromUrl(action.url, action.name);
+        break;
+      case LOAD_AUDIO_FILE:
+        media.loadFromFileReference(action.file.fileReference);
+        break;
+      case SET_BAND_VALUE:
+        if (action.band === "preamp") {
+          media.setPreamp(action.value);
+        } else {
+          media.setEqBand(action.band, action.value);
         }
-        return next(action);
-      };
+        break;
+    }
+    return next(action);
   };
+};

package.json

@@ -43,11 +43,12 @@
     "css-loader": "^0.28.0",
     "eslint": "3.19.0",
     "eslint-config-prettier": "^1.5.0",
+    "eslint-plugin-prettier": "^2.1.1",
     "eslint-plugin-react": "6.10.3",
     "file-loader": "^0.11.0",
     "gzip-size-cli": "^2.0.0",
     "jest-cli": "^19.0.2",
-    "prettier": "^1.0.2",
+    "prettier": "^1.4.1",
     "pretty-bytes-cli": "^2.0.0",
     "react-test-renderer": "^15.4.2",
     "style-loader": "^0.16.1",