Linting fixes

Author: guioconnor

.babelrc

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    ["transform-class-properties", { "spec": true }]
+  ]
+}

.eslintrc.json

@@ -1,5 +1,6 @@
-{
-    "extends": "airbnb",
+{   
+    "parser": "babel-eslint",
+    "extends": ["plugin:prettier/recommended"],
     "parserOptions": {
         "ecmaVersion": 6,
         "sourceType": "module",
@@ -8,7 +9,9 @@
         }
     },
     "rules": {
-        "semi": 2
+        "strict": 0,
+        "semi": 2,
+        "arrow-parens": 0
     },
     "globals": {
         "document": true,

package.json

@@ -6,7 +6,10 @@
     "eslint-config-airbnb": "^16.1.0",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-prettier": "^2.6.0",
     "eslint-plugin-react": "^7.6.1",
+    "prettier": "^1.10.2",
+    "prop-types": "^15.6.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-scripts": "1.1.1",
@@ -18,5 +21,11 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
     "lint": "eslint"
+  },
+  "devDependencies": {
+    "babel-eslint": "^8.2.1",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "eslint": "^4.18.0",
+    "eslint-config-prettier": "^2.9.0"
   }
 }

src/module/MemoryCard.jsx

@@ -1,20 +1,19 @@
-import React from "react";
-import PropTypes from "prop-types";
-import styled from "styled-components";
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
 
 export const CARD_STATE = {
-  CLOSED: "CLOSED",
-  OPEN: "OPEN",
-  FOUND: "FOUND"
+  CLOSED: 'CLOSED',
+  OPEN: 'OPEN',
+  FOUND: 'FOUND',
 };
 
 const Card = styled.button`
   cursor: pointer;
   flex 1 0 0%;
   background: rgba(255, 255, 255, .8);
   background: ${state => {
-    debugger;
-    return state.state === CARD_STATE.CLOSED ? "red" : "blue";
+    return state.state === CARD_STATE.CLOSED ? 'red' : 'blue';
   }};
   color: #333;
   padding: 10%;

src/module/index.jsx

@@ -1,22 +1,22 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { shuffle } from "lodash";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { shuffle } from 'lodash';
 
-import MemoryGrid from "./MemoryGrid";
-import MemoryCard, { CARD_STATE } from "./MemoryCard";
+import MemoryGrid from './MemoryGrid';
+import MemoryCard, { CARD_STATE } from './MemoryCard';
 
 export class MemoryGame extends Component {
   static propTypes = {
-    cards: PropTypes.arrayOf(PropTypes.any).isRequired
+    cards: PropTypes.arrayOf(PropTypes.any).isRequired,
   };
 
   constructor(props) {
     super(props);
     this.state = {
       cards: shuffle(props.cards.concat(props.cards)).map(value => ({
         value,
-        state: CARD_STATE.CLOSED
-      }))
+        state: CARD_STATE.CLOSED,
+      })),
     };
   }