Set up prettier + eslint rules

.eslintrc.js

@@ -1,42 +1,42 @@
 module.exports = {
   env: {
     browser: true,
-    es6: true,
+    es6: true
   },
-  extends: ['eslint:recommended', 'plugin:react/recommended'],
+  extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:prettier/recommended'],
   settings: {
     react: {
-      version: 'detect',
-    },
+      version: 'detect'
+    }
   },
   globals: {
     Atomics: 'readonly',
-    SharedArrayBuffer: 'readonly',
+    SharedArrayBuffer: 'readonly'
   },
   parserOptions: {
     ecmaFeatures: {
-      jsx: true,
+      jsx: true
     },
     ecmaVersion: 2018,
-    sourceType: 'module',
+    sourceType: 'module'
   },
   rules: {
     'arrow-body-style': ['warn', 'as-needed'],
     'arrow-parens': ['warn', 'as-needed'],
     'arrow-spacing': 'error',
     'block-spacing': ['error', 'never'],
-    camelcase: ['error', {properties: 'always'}],
+    camelcase: ['error', { properties: 'always' }],
     'comma-dangle': 0,
-    'comma-spacing': ['error', {before: false, after: true}],
+    'comma-spacing': ['error', { before: false, after: true }],
     'comma-style': ['error', 'last'],
     'global-require': 0,
     indent: ['error', 2],
-    'key-spacing': ['error', {beforeColon: false, afterColon: true}],
-    'keyword-spacing': ['error', {before: true, after: true}],
+    'key-spacing': ['error', { beforeColon: false, afterColon: true }],
+    'keyword-spacing': ['error', { before: true, after: true }],
     'linebreak-style': ['error', 'unix'],
     'linebreak-style': ['error', 'unix'],
     'max-len': ['error', 120],
-    'no-confusing-arrow': ['error', {allowParens: false}],
+    'no-confusing-arrow': ['error', { allowParens: false }],
     'no-multi-spaces': 'error',
     'no-shadow': 1,
     'no-trailing-spaces': 'error',
@@ -44,23 +44,23 @@ module.exports = {
     'no-unused-vars': 1,
     'no-useless-rename': 'error',
     'no-whitespace-before-property': 'error',
-    'object-curly-newline': ['error', {multiline: true}],
-    'object-curly-spacing': ['error', 'always', {objectsInObjects: true, arraysInObjects: true}],
+    'object-curly-newline': ['error', { consistent: true }],
+    'object-curly-spacing': ['error', 'never'],
     quotes: ['error', 'single'],
     semi: ['error', 'always'],
-    'semi-spacing': ['error', {before: false, after: true}],
+    'semi-spacing': ['error', { before: false, after: true }],
     'space-before-blocks': ['error', 'always'],
     'space-before-function-paren': [
       'error',
       {
         anonymous: 'never',
         named: 'never',
-        asyncArrow: 'always',
-      },
+        asyncArrow: 'always'
+      }
     ],
     'space-in-parens': ['error', 'never'],
-    'space-infix-ops': ['error', {int32Hint: false}],
-    'space-unary-ops': [2, {words: true, nonwords: false}],
+    'space-infix-ops': ['error', { int32Hint: false }],
+    'space-unary-ops': [2, { words: true, nonwords: false }],
 
     'react/jsx-filename-extension': ['error'],
     'react/jsx-indent': [1, 2],
@@ -70,7 +70,7 @@ module.exports = {
     'react/jsx-no-target-blank': 2,
     'react/jsx-props-no-multi-spaces': 1,
     'react/jsx-sort-props': 1,
-    'react/jsx-tag-spacing': ['warn', {beforeSelfClosing: true}],
+    'react/jsx-tag-spacing': ['warn', { beforeSelfClosing: true }],
     'react/no-children-prop': 1,
     'react/no-deprecated': 1,
     'react/no-direct-mutation-state': 2,
@@ -91,8 +91,8 @@ module.exports = {
         arrow: 'parens-new-line',
         condition: 'parens-new-line',
         logical: 'parens-new-line',
-        prop: 'parens-new-line',
-      },
-    ],
-  },
+        prop: 'parens-new-line'
+      }
+    ]
+  }
 };

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  printWidth: 120,
+  singleQuote: true,
+  jsxSingleQuote: true,
+  bracketSpacing: false,
+  trailingComma: 'es5',
+}

app/javascript/packs/frontend/api.js

@@ -7,7 +7,7 @@ const instance = axios.create({
   baseURL: '/api/v1',
   timeout: 3000,
   responseType: 'json',
-  headers: { post: { 'Content-Type': 'application/json' } },
+  headers: {post: {'Content-Type': 'application/json'}},
   //xsrfHeaderName: csrfParamName,
 });
 

app/javascript/packs/frontend/app.jsx

@@ -17,14 +17,14 @@ class App extends React.Component {
         <Suspense fallback={<div>Loading...</div>}>
           <ApplicationLayout>
             <Switch>
-              <Route exact path="/" component={TestComponent} />
-              <Route path="/pokemon" component={Pokemon} />
+              <Route exact path='/' component={TestComponent} />
+              <Route path='/pokemon' component={Pokemon} />
 
               <Route component={NotFound} />
             </Switch>
 
             <p>
-              <Link to="/pokemon">Show me the pokemon!</Link>
+              <Link to='/pokemon'>Show me the pokemon!</Link>
             </p>
           </ApplicationLayout>
         </Suspense>

app/javascript/packs/frontend/components/layout/application_layout.jsx

@@ -1,38 +1,45 @@
 import React from 'react';
-import {Navbar, Nav, NavDropdown, Form, FormControl, Button} from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import {Navbar, Nav, Form, FormControl, Button} from 'react-bootstrap';
 import {LinkContainer} from 'react-router-bootstrap';
 import {Link} from 'react-router-dom';
 
-import style from './style';
+import './style';
 
-class ApplicationLayout extends React.Component {
-  render() {
-    return (
-      <div>
-        <nav>
-          <Navbar expand="md">
-            <LinkContainer to="/">
-              <Navbar.Brand>Pokemon.trade</Navbar.Brand>
-            </LinkContainer>
-            <Navbar.Toggle aria-controls="basic-navbar-nav" />
-            <Navbar.Collapse id="basic-navbar-nav">
-              <Nav className="mr-auto">
-                <Nav.Link to="/pokemon" as={Link}>
-                  View Pokemon
-                </Nav.Link>
-              </Nav>
-              <Form inline>
-                <FormControl type="text" placeholder="Search" className="mr-sm-2" />
-                <Button variant="primary">Search</Button>
-              </Form>
-            </Navbar.Collapse>
-          </Navbar>
-        </nav>
+function ApplicationLayout({children}) {
+  return (
+    <div>
+      <nav>
+        <Navbar expand='md'>
+          <LinkContainer to='/'>
+            <Navbar.Brand>Pokemon.trade</Navbar.Brand>
+          </LinkContainer>
+          <Navbar.Toggle aria-controls='basic-navbar-nav' />
+          <Navbar.Collapse id='basic-navbar-nav'>
+            <Nav className='mr-auto'>
+              <Nav.Link as={Link} to='/pokemon'>
+                View Pokemon
+              </Nav.Link>
+            </Nav>
+            <Form inline>
+              <FormControl className='mr-sm-2' placeholder='Search' type='text' />
+              <Button variant='primary'>Search</Button>
+            </Form>
+          </Navbar.Collapse>
+        </Navbar>
+      </nav>
 
-        <div>{this.props.children}</div>
-      </div>
-    );
-  }
+      <div>{children}</div>
+    </div>
+  );
 }
 
+ApplicationLayout.defaultProps = {
+  children: null,
+};
+
+ApplicationLayout.propTypes = {
+  children: PropTypes.node,
+};
+
 export default ApplicationLayout;

package.json

@@ -4,6 +4,9 @@
   "scripts": {
     "coverage": "npm test -- --coverage",
     "lint": "npx eslint app/javascript/packs",
+    "prettier": "npx prettier app/javascript/packs/**/* --write",
+    "eslint": "npx eslint app/javascript/packs --fix",
+    "lint:fix": "npm run prettier && npm run eslint",
     "test": "jest --verbose false",
     "test:update_snapshots": "jest --updateSnapshot",
     "test:watch": "jest --watchAll"
@@ -38,8 +41,11 @@
     "enzyme-adapter-react-16": "^1.12.1",
     "enzyme-to-json": "^3.3.5",
     "eslint": "^5.16.0",
+    "eslint-config-prettier": "^4.1.0",
+    "eslint-plugin-prettier": "^3.0.1",
     "eslint-plugin-react": "^7.12.4",
     "jest": "^24.7.1",
+    "prettier": "^1.17.0",
     "react-test-renderer": "^16.8.6",
     "resolve-url-loader": "^3.1.0",
     "webpack": "^4.30.0",

yarn.lock

@@ -3260,6 +3260,20 @@ escodegen@^1.9.1:
   optionalDependencies:
     source-map "~0.6.1"
 
+eslint-config-prettier@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-4.1.0.tgz#181364895899fff9fd3605fecb5c4f20e7d5f395"
+  integrity sha512-zILwX9/Ocz4SV2vX7ox85AsrAgXV3f2o2gpIicdMIOra48WYqgUnWNH/cR/iHtmD2Vb3dLSC3LiEJnS05Gkw7w==
+  dependencies:
+    get-stdin "^6.0.0"
+
+eslint-plugin-prettier@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.0.1.tgz#19d521e3981f69dd6d14f64aec8c6a6ac6eb0b0d"
+  integrity sha512-/PMttrarPAY78PLvV3xfWibMOdMDl57hmlQ2XqFeA37wd+CJ7WSxV7txqjVPHi/AAFKd2lX0ZqfsOc/i5yFCSQ==
+  dependencies:
+    prettier-linter-helpers "^1.0.0"
+
 eslint-plugin-react@^7.12.4:
   version "7.12.4"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.12.4.tgz#b1ecf26479d61aee650da612e425c53a99f48c8c"
@@ -3555,6 +3569,11 @@ fast-deep-equal@^2.0.1:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
   integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
 
+fast-diff@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
+  integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
+
 fast-json-stable-stringify@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
@@ -3871,6 +3890,11 @@ get-stdin@^4.0.1:
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
   integrity sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=
 
+get-stdin@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-6.0.0.tgz#9e09bf712b360ab9225e812048f71fde9c89657b"
+  integrity sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==
+
 get-stream@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5"
@@ -7326,6 +7350,18 @@ prelude-ls@~1.1.2:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
   integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
 
+prettier-linter-helpers@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
+  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
+  dependencies:
+    fast-diff "^1.1.2"
+
+prettier@^1.17.0:
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.17.0.tgz#53b303676eed22cc14a9f0cec09b477b3026c008"
+  integrity sha512-sXe5lSt2WQlCbydGETgfm1YBShgOX4HxQkFPvbxkcwgDvGDeqVau8h+12+lmSVlP3rHPz0oavfddSZg/q+Szjw==
+
 pretty-format@^24.7.0:
   version "24.7.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.7.0.tgz#d23106bc2edcd776079c2daa5da02bcb12ed0c10"