Prettier

Author: jerolan

Diff for: .prettierrc

@@ -0,0 +1,5 @@
+{
+  "trailingComma": "es5",
+  "semi": true,
+  "singleQuote": true
+}

Diff for: package.json

@@ -10,11 +10,15 @@
     "react-router-dom": "^5.0.1",
     "react-scripts": "3.0.1"
   },
+  "devDependencies": {
+    "husky": ">=1",
+    "lint-staged": ">=8",
+    "prettier": "1.17.1"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "test": "react-scripts test"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -30,5 +34,20 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,css,json,md}": [
+      "prettier --write",
+      "git add"
+    ],
+    "*.js": [
+      "eslint --fix",
+      "git add"
+    ]
   }
 }

Diff for: src/App.js

@@ -1,9 +1,7 @@
-import React from "react";
+import React from 'react';
 
-import AppContainer from "./AppContainer";
+import AppContainer from './AppContainer';
 
 export default function Application() {
-  return (
-    <AppContainer />
-  );
+  return <AppContainer />;
 }

Diff for: src/AppContainer.js

@@ -1,5 +1,5 @@
-import React from "react";
-import { BrowserRouter as Router, Route } from "react-router-dom";
+import React from 'react';
+import { BrowserRouter as Router, Route } from 'react-router-dom';
 
 import { HomeScreen, TriviaScreen, TriviaResultScreen } from './components';
 

Diff for: src/components/HomeScreen/HomeScreen.js

@@ -1,10 +1,10 @@
-import React from "react";
-import Button from "@material-ui/core/Button";
-import { Link } from "react-router-dom";
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import { Link } from 'react-router-dom';
 
-import Page from "../Page";
-import { TitleLogo } from "./components";
-import Styles from "./HomeScreen.module.css";
+import Page from '../Page';
+import { TitleLogo } from './components';
+import Styles from './HomeScreen.module.css';
 
 export default function HomeScreen({ navigation }) {
   return (

Diff for: src/components/HomeScreen/components/TitleLogo/TitleLogo.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 import Styles from './TitleLogo.module.css';
 

Diff for: src/components/HomeScreen/components/TitleLogo/index.js

@@ -1,3 +1,3 @@
-import TitleLogo from "./TitleLogo";
+import TitleLogo from './TitleLogo';
 
 export default TitleLogo;

Diff for: src/components/HomeScreen/components/index.js

@@ -1,3 +1,3 @@
-import TitleLogo from "./TitleLogo";
+import TitleLogo from './TitleLogo';
 
 export { TitleLogo };

Diff for: src/components/HomeScreen/index.js

@@ -1,3 +1,3 @@
-import HomeScreen from "./HomeScreen";
+import HomeScreen from './HomeScreen';
 
 export default HomeScreen;

Diff for: src/components/Page/Page.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Container from "@material-ui/core/Container";
+import Container from '@material-ui/core/Container';
 
 import Styles from './Page.module.css';
 
@@ -11,4 +11,4 @@ export default function Page({ children, ...props }) {
       </div>
     </Container>
   );
-}
+}

Diff for: src/components/TriviaResultScreen/App.js

@@ -1,7 +1,7 @@
-import React from "react";
-import Button from "@material-ui/core/Button";
+import React from 'react';
+import Button from '@material-ui/core/Button';
 
-import "./App.css";
+import './App.css';
 
 function App() {
   return (
@@ -18,7 +18,7 @@ function App() {
           variant="contained"
           color="primary"
         >
-        Learn React
+          Learn React
         </Button>
       </header>
     </div>

Diff for: src/components/TriviaResultScreen/index.js

@@ -1,3 +1,3 @@
-import App from "./App";
+import App from './App';
 
 export default App;

Diff for: src/components/TriviaScreen/App.js

@@ -1,7 +1,7 @@
-import React from "react";
-import Button from "@material-ui/core/Button";
+import React from 'react';
+import Button from '@material-ui/core/Button';
 
-import "./App.css";
+import './App.css';
 
 function App() {
   return (
@@ -18,7 +18,7 @@ function App() {
           variant="contained"
           color="primary"
         >
-        Learn React
+          Learn React
         </Button>
       </header>
     </div>

Diff for: src/components/TriviaScreen/index.js

@@ -1,3 +1,3 @@
-import App from "./App";
+import App from './App';
 
 export default App;

Diff for: src/components/index.js

@@ -1,5 +1,5 @@
-import HomeScreen from "./HomeScreen";
-import TriviaScreen from "./TriviaScreen";
-import TriviaResultScreen from "./TriviaResultScreen";
+import HomeScreen from './HomeScreen';
+import TriviaScreen from './TriviaScreen';
+import TriviaResultScreen from './TriviaResultScreen';
 
 export { HomeScreen, TriviaScreen, TriviaResultScreen };