Dx/add prettier code (#188)

* Added prettier for front-end code formatting.

* Prettier runs on JSX too now

Modified supported extensions for running prettier.

* Added some documentation in the README about prettier, husky and lint-staged.

* package-lock.json updated.

* Keep lint-staged package-manager agnostic (#196)

* Remove code-breaking comma

.eslintrc.js

@@ -1,9 +1,10 @@
 module.exports = {
-  "extends": "airbnb-base/legacy",
-  "env": {
-    "browser": true,
+  extends: ['airbnb-base/legacy', 'prettier'],
+  parserOptions: {
+    ecmaVersion: 6,
   },
-  "plugins": [
-    "ignore-erb"
-  ]
+  env: {
+    browser: true,
+  },
+  plugins: ['ignore-erb'],
 };

.prettierignore

@@ -0,0 +1,2 @@
+package.json
+package-lock.json

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "waderyan.nodejs-extension-pack",
+    "esbenp.prettier-vscode",
+    "donjayamanne.git-extension-pack"
+  ]
+}

README.md

@@ -131,7 +131,11 @@ Caveat: `bin/rspec` is not equipped with Spring because it affect Simplecov's re
 
 This project follows [Bbatsov's Ruby Style Guide](https://github.com/bbatsov/ruby-style-guide), using [Rubocop](https://github.com/bbatsov/rubocop) along with [Rubocop-Rspec](https://github.com/backus/rubocop-rspec) as the code analyzer. If you have Rubocop installed with your text editor of choice, you should be up and running. Settings can be edited in `.rubocop.yml`.
 
-For Javascript, we follow [Airbnb's JS Style Guide](https://github.com/airbnb/javascript), using [ESLint](https://eslint.org/). If you have ESLint installed with your text editor of choice, you should be up and running.
+For Javascript, we follow [Airbnb's JS Style Guide](https://github.com/airbnb/javascript), using [ESLint](https://eslint.org/) and [prettier](https://github.com/prettier/prettier). If you have ESLint installed with your text editor of choice, you should be up and running.
+
+When commits are made, a git precommit hook runs via [husky](https://github.com/typicode/husky) and [lint-staged](https://github.com/okonet/lint-staged) on front-end code that will run eslint and prettier on your code before committing it. If there are linting errors and eslint isn't able to automatically fix it, the commit will not happen. You will need to fix the issue manually then attempt to commit again.
+
+Note: if you've already installed the [husky](https://github.com/typicode/husky) package at least once (used for precommit npm script), you will need to run `yarn --force` or `npm install --no-cache`. For some reason the post-install script of husky does not run, when the package is pulled from yarn's or npm's cache. This is not husky specific, but rather a cached package specific issue.
 
 ## Testing
 The following technologies are used for testing:

app/javascript/.eslintrc.js

@@ -1,12 +1,24 @@
 module.exports = {
-  "extends": "airbnb",
-  "settings": {
-    "react": {
-      "pragma": "h"
+  extends: ['airbnb', 'prettier'],
+  parserOptions: {
+    ecmaVersion: 6,
+  },
+  settings: {
+    react: {
+      pragma: 'h',
     },
   },
-  "env": {
-    "jest": true,
-    "browser": true,
+  env: {
+    jest: true,
+    browser: true,
+  },
+  plugins: ['import'],
+  rules: {
+    'import/no-extraneous-dependencies': [
+      'error',
+      {
+        devDependencies: ['**/*.test.js', '**/*.test.jsx', '**/*.stories.jsx'],
+      },
+    ],
   },
 };

app/javascript/stories/index.stories.js

@@ -1,13 +0,0 @@
-import { h } from "preact";
-
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-
-import { Button, Welcome } from '@storybook/react/demo';
-
-storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
-
-storiesOf('Button', module)
-  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
-  .add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>);

app/javascript/stories/index.stories.jsx

@@ -0,0 +1,19 @@
+import { h } from 'preact';
+
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { Button, Welcome } from '@storybook/react/demo';
+
+storiesOf('Welcome', module).add('to Storybook', () => (
+  <Welcome showApp={linkTo('Button')} />
+));
+
+storiesOf('Button', module)
+  .add('with text', () => (
+    <Button onClick={action('clicked')}>Hello Button</Button>
+  ))
+  .add('with some emoji', () => (
+    <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
+  ));

package.json

@@ -12,7 +12,24 @@
     "test": "jest app/javascript/ --coverage",
     "test:watch": "jest app/javascript/ --coverage --watch",
     "storybook": "start-storybook -p 6006 -c app/javascript/.storybook",
-    "build-storybook": "build-storybook -c app/javascript/.storybook"
+    "build-storybook": "build-storybook -c app/javascript/.storybook",
+    "precommit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,jsx}": [
+      "prettier --write",
+      "eslint --fix",
+      "git add"
+    ],
+    "*.json": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "prettier": {
+    "singleQuote": true,
+    "trailingComma": "all",
+    "printWidth": 80
   },
   "repository": {
     "type": "git",
@@ -36,15 +53,19 @@
     "eslint": "^4.9.0",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-config-airbnb-base": "^12.0.0",
+    "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-ignore-erb": "^0.1.1",
-    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-import": "^2.10.0",
     "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-react": "^7.4.0",
+    "husky": "^0.14.3",
     "jest": "^22.1.2",
     "jest-fetch-mock": "^1.4.0",
+    "lint-staged": "^7.0.2",
     "preact-compat": "^3.18.0",
     "preact-render-spy": "^1.2.1",
     "preact-render-to-json": "^3.6.6",
+    "prettier": "^1.11.1",
     "webpack-dev-server": "^2.9.1"
   },
   "dependencies": {