adding eslint

Author: MrNovado

.eslintrc.json

@@ -0,0 +1,49 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "airbnb",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    },
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  },
+  "plugins": ["react", "@typescript-eslint"],
+  "rules": {
+    "import/prefer-default-export": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-filename-extension": "off",
+    "no-undef": "off",
+    "no-use-before-define": "off",
+    "@typescript-eslint/no-use-before-define": ["error"],
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "js": "never",
+        "jsx": "never",
+        "ts": "never",
+        "tsx": "never"
+      }
+    ]
+  }
+}

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 120,
+  "tabWidth": 2
+}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+}

package.json

@@ -14,30 +14,44 @@
   "author": "MrNovado <novado@ymail.com>",
   "license": "MIT",
   "dependencies": {
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
     "@xstate/inspect": "^0.4.1",
     "@xstate/react": "^1.3.1",
     "@xstate/test": "^0.4.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.3",
-    "typescript": "^4.1.2",
+    "typescript": "4.1.2",
     "web-vitals": "^1.0.1",
     "xstate": "^4.16.2"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
     "@types/jest": "^26.0.15",
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0"
+    "@types/react-dom": "^17.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.15.2",
+    "@typescript-eslint/parser": "^4.15.2",
+    "eslint": "^7.21.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "prettier": "^2.2.1",
+    "prettier-eslint": "^12.0.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "qa": "yarn run qa:types && yarn run qa:lint",
+    "qa:types": "tsc --noEmit",
+    "qa:lint": "eslint --ext js,ts,tsx ./src --quiet --fix"
   },
   "eslintConfig": {
     "extends": [

src/app-container/App.test.tsx

@@ -1,9 +1,8 @@
-import React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen } from '@testing-library/react';
 
-import { App } from "./App";
+import { App } from './App';
 
-test("renders learn react link", () => {
+test('renders learn react link', () => {
   render(<App />);
   const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();

src/app-container/App.tsx

@@ -1,5 +1,3 @@
-import "./App.css";
+import './App.css';
 
-export const App = () => {
-  return <div className="App"></div>;
-};
+export const App = (): JSX.Element => <div className="App" />;

src/app-container/index.ts

@@ -1 +1 @@
-export { App } from "./App";
+export { App } from './App';

src/index.tsx

@@ -1,16 +1,16 @@
-import React from "react";
-import ReactDOM from "react-dom";
+import React from 'react';
+import ReactDOM from 'react-dom';
 
-import "./index.css";
-import reportWebVitals from "./reportWebVitals";
+import './index.css';
+import reportWebVitals from './reportWebVitals';
 
-import { App } from "./app-container";
+import { App } from './app-container';
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById("root")
+  document.getElementById('root'),
 );
 
 // If you want to start measuring performance in your app, pass a function

src/pages/TicTacToePage.tsx

@@ -1,3 +1 @@
-export const TicTacToePage = () => {
-  return <div>TicTacToePage</div>;
-};
+export const TicTacToePage = () => <div>TicTacToePage</div>;