Add prettier (#58)

* Add prettier

* Add formatting check to travis

* Add re-formatted source code

* Update eslint config

* Update babel-eslint

Author: pronebird

.editorconfig

@@ -0,0 +1,13 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+charset = utf-8
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.{js,json,css,html}]
+indent_style = space
+indent_size = 2

.eslintrc

@@ -1,7 +1,8 @@
 {
   "extends": [
-    "eslint:recommended", 
-    "plugin:react/recommended"
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "prettier"
   ],
   "parser": "babel-eslint",
   "parserOptions": {
@@ -10,22 +11,17 @@
       "modules": true
     }
   },
-  "plugins": [ "react" ], 
+  "plugins": [ "react" ],
   "rules": {
-    "indent": [ 2, 2 ],
-    "quotes": [ 2, "single" ],
-    "linebreak-style": [ 2, "unix" ],
-    "semi": [ 2, "always" ],
-    "no-console": [ 0 ],
-    "no-loop-func": [ 0 ],
-    "new-cap": [ 0 ],
-    "no-trailing-spaces": [ 0 ],
-    "no-param-reassign": [ 0 ],
-    "func-names": [ 0 ],
-    "comma-dangle": [ 0 ],
-    "no-unused-expressions" : [ 0 ], // until fixed https://github.com/babel/babel-eslint/issues/158
-    "block-scoped-var": [ 0 ], // until fixed https://github.com/eslint/eslint/issues/2253
-    "react/prop-types": [ 0 ]
+    "prefer-const": "warn",
+    "no-console": "off",
+    "no-loop-func": "warn",
+    "new-cap": "off",
+    "no-param-reassign": "warn",
+    "func-names": "off",
+    "no-unused-expressions" : "error",
+    "block-scoped-var": "error",
+    "react/prop-types": "off"
   },
   "env": {
     "es6": true,

.prettierrc.yml

@@ -0,0 +1,10 @@
+# .prettierrc.yml
+# see: https://prettier.io/docs/en/options.html
+printWidth: 100
+semi: true
+singleQuote: true
+trailingComma: all
+bracketSpacing: true
+jsxBracketSameLine: true
+arrowParens: always
+proseWrap: always

.travis.yml

@@ -12,5 +12,6 @@ install:
   - npm install
 
 script:
+  - npm run check-format
   - npm run lint
   - npm test

app/actions/user.js

@@ -2,5 +2,5 @@ import { createAction } from 'redux-actions';
 
 export default {
   login: createAction('USER_LOGIN'),
-  logout: createAction('USER_LOGOUT')
+  logout: createAction('USER_LOGOUT'),
 };

app/app.js

@@ -8,7 +8,7 @@ import configureStore from './store';
 
 const syncHistoryWithStore = (store, history) => {
   const { routing } = store.getState();
-  if(routing && routing.location) {
+  if (routing && routing.location) {
     history.replace(routing.location);
   }
 };
@@ -22,9 +22,7 @@ const rootElement = document.querySelector(document.currentScript.getAttribute('
 
 ReactDOM.render(
   <Provider store={store}>
-    <ConnectedRouter history={routerHistory}>
-      {routes}
-    </ConnectedRouter>
+    <ConnectedRouter history={routerHistory}>{routes}</ConnectedRouter>
   </Provider>,
-  rootElement
+  rootElement,
 );

app/components/LoggedIn.js

@@ -3,13 +3,13 @@ import PropTypes from 'prop-types';
 
 export default class LoggedIn extends Component {
   static propTypes = {
-    onLogout: PropTypes.func.isRequired
+    onLogout: PropTypes.func.isRequired,
   };
 
   handleLogout = () => {
     this.props.onLogout({
       username: '',
-      loggedIn: false
+      loggedIn: false,
     });
   };
 

app/components/Login.js

@@ -3,25 +3,25 @@ import PropTypes from 'prop-types';
 
 export default class Login extends Component {
   static propTypes = {
-    onLogin: PropTypes.func.isRequired
+    onLogin: PropTypes.func.isRequired,
   };
 
   state = {
-    username: ''
+    username: '',
   };
 
   handleLogin = () => {
     this.props.onLogin({
       username: this.state.username,
-      loggedIn: true
+      loggedIn: true,
     });
-  }
+  };
 
   handleChange = (e) => {
     this.setState({
-      username: e.target.value
+      username: e.target.value,
     });
-  }
+  };
 
   render() {
     return (

app/containers/LoggedInPage.js

@@ -14,8 +14,11 @@ const mapDispatchToProps = (dispatch) => {
     onLogout: (data) => {
       user.logout(data);
       dispatch(push('/'));
-    }
+    },
   };
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(LoggedIn);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(LoggedIn);

app/containers/LoginPage.js

@@ -14,8 +14,11 @@ const mapDispatchToProps = (dispatch) => {
     onLogin: (data) => {
       user.login(data);
       dispatch(push('/loggedin'));
-    }
+    },
   };
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(Login);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(Login);

app/main.js

@@ -1,18 +1,15 @@
 import path from 'path';
 import url from 'url';
-import {app, crashReporter, BrowserWindow, Menu} from 'electron';
+import { app, crashReporter, BrowserWindow, Menu } from 'electron';
 
-const isDevelopment = (process.env.NODE_ENV === 'development');
+const isDevelopment = process.env.NODE_ENV === 'development';
 
 let mainWindow = null;
 let forceQuit = false;
 
 const installExtensions = async () => {
   const installer = require('electron-devtools-installer');
-  const extensions = [
-    'REACT_DEVELOPER_TOOLS',
-    'REDUX_DEVTOOLS'
-  ];
+  const extensions = ['REACT_DEVELOPER_TOOLS', 'REDUX_DEVTOOLS'];
   const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
   for (const name of extensions) {
     try {
@@ -27,7 +24,7 @@ crashReporter.start({
   productName: 'YourName',
   companyName: 'YourCompany',
   submitURL: 'https://your-domain.com/url-to-submit',
-  uploadToServer: false
+  uploadToServer: false,
 });
 
 app.on('window-all-closed', () => {
@@ -43,19 +40,21 @@ app.on('ready', async () => {
     await installExtensions();
   }
 
-  mainWindow = new BrowserWindow({ 
-    width: 1000, 
+  mainWindow = new BrowserWindow({
+    width: 1000,
     height: 800,
     minWidth: 640,
     minHeight: 480,
-    show: false 
+    show: false,
   });
 
-  mainWindow.loadURL(url.format({
-    pathname: path.join(__dirname, 'index.html'),
-    protocol: 'file:',
-    slashes: true
-  }));
+  mainWindow.loadURL(
+    url.format({
+      pathname: path.join(__dirname, 'index.html'),
+      protocol: 'file:',
+      slashes: true,
+    }),
+  );
 
   // show window once on first load
   mainWindow.webContents.once('did-finish-load', () => {
@@ -68,7 +67,7 @@ app.on('ready', async () => {
     // 2. Click on icon in dock should re-open the window
     // 3. ⌘+Q should close the window and quit the app
     if (process.platform === 'darwin') {
-      mainWindow.on('close', function (e) {
+      mainWindow.on('close', function(e) {
         if (!forceQuit) {
           e.preventDefault();
           mainWindow.hide();
@@ -78,7 +77,7 @@ app.on('ready', async () => {
       app.on('activate', () => {
         mainWindow.show();
       });
-      
+
       app.on('before-quit', () => {
         forceQuit = true;
       });
@@ -95,12 +94,14 @@ app.on('ready', async () => {
 
     // add inspect element on right click menu
     mainWindow.webContents.on('context-menu', (e, props) => {
-      Menu.buildFromTemplate([{
-        label: 'Inspect element',
-        click() {
-          mainWindow.inspectElement(props.x, props.y);
-        }
-      }]).popup(mainWindow);
+      Menu.buildFromTemplate([
+        {
+          label: 'Inspect element',
+          click() {
+            mainWindow.inspectElement(props.x, props.y);
+          },
+        },
+      ]).popup(mainWindow);
     });
   }
 });

app/reducers/user.js

@@ -1,11 +1,14 @@
 import { handleActions } from 'redux-actions';
 import actions from '../actions/user';
 
-export default handleActions({
-  [actions.login]: (state, action) => {
-    return { ...state, ...action.payload };
+export default handleActions(
+  {
+    [actions.login]: (state, action) => {
+      return { ...state, ...action.payload };
+    },
+    [actions.logout]: (state, action) => {
+      return { ...state, ...action.payload };
+    },
   },
-  [actions.logout]: (state, action) => {
-    return { ...state, ...action.payload };
-  }
-}, {});
+  {},
+);

app/store.js

@@ -11,19 +11,19 @@ export default function configureStore(initialState, routerHistory) {
 
   const actionCreators = {
     ...userActions,
-    push
+    push,
   };
 
   const reducers = {
     user,
-    routing
+    routing,
   };
 
-  const middlewares = [ thunk, router ];
+  const middlewares = [thunk, router];
 
   const composeEnhancers = (() => {
     const compose_ = window && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;
-    if(process.env.NODE_ENV === 'development' && compose_) {
+    if (process.env.NODE_ENV === 'development' && compose_) {
       return compose_({ actionCreators });
     }
     return compose;

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "babel-runtime": "^6.22.0",
     "history": "^4.6.3",
+    "prettier": "1.13.7",
     "prop-types": "^15.5.10",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
@@ -26,7 +27,7 @@
   "devDependencies": {
     "babel-cli": "^6.22.2",
     "babel-core": "^6.2.1",
-    "babel-eslint": "^8.2.2",
+    "babel-eslint": "^8.2.6",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-preset-es2015": "^6.1.18",
@@ -39,6 +40,7 @@
     "electron-devtools-installer": "^2.1.0",
     "electron-mocha": "^6.0.1",
     "eslint": "^4.3.0",
+    "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-react": "^7.1.0",
     "npm-run-all": "^4.0.1",
     "redux-mock-store": "^1.2.2",
@@ -49,6 +51,8 @@
     "develop": "npm run private:compile -- --source-maps true && run-p -r private:watch private:serve",
     "test": "electron-mocha --renderer -R spec --require babel-core/register test/**/*.spec.js",
     "lint": "eslint --no-ignore scripts app test *.js",
+    "format": "npm run private:format -- --write",
+    "check-format": "npm run private:format -- --list-different",
     "pack": "run-s private:clean private:compile private:build:all",
     "pack:mac": "run-s private:clean private:compile private:build:mac",
     "pack:win": "run-s private:clean private:compile private:build:win",
@@ -60,6 +64,7 @@
     "private:watch": "npm run private:compile -- --source-maps true --watch --skip-initial-build",
     "private:serve": "babel-node scripts/serve.js",
     "private:compile": "babel app/ --copy-files --out-dir build",
-    "private:clean": "rimraf build"
+    "private:clean": "rimraf build",
+    "private:format": "prettier \"scripts/*.js\" \"app/**/*.js\" \"test/**/*.js\""
   }
 }