Add prettier check, fix all prettier issues

Author: juffalow

.github/workflows/main.yml

@@ -40,11 +40,30 @@ jobs:
       run: yarn run lint
     - name: build
       run: yarn run build
+  prettier:
+    name: Prettier
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+      with:
+        fetch-depth: 1
+    - name: Enable corepack
+      run: corepack enable
+    - uses: actions/setup-node@v4
+      env:
+        yarn: 4.12.0
+      with:
+        node-version: 24
+        cache: 'yarn'
+    - name: Install dependencies
+      run: yarn install
+    - name: Prettier check
+      run: yarn run prettier:check
   deploy:
     name: Deploy to production
     if: github.event_name == 'release'
     runs-on: ubuntu-latest
-    needs: lint
+    needs: [lint, prettier]
     steps:
     - uses: actions/checkout@v4
       with:

.prettierignore

@@ -0,0 +1 @@
+**/__generated__

.prettierrc

@@ -0,0 +1,12 @@
+{
+  "printWidth": 120,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "arrowParens": "always",
+  "tabWidth": 2,
+  "useTabs": false,
+  "bracketSpacing": true,
+  "jsxSingleQuote": false,
+  "bracketSameLine": false,
+  "semi": true
+}

package.json

@@ -20,7 +20,9 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "relay": "relay-compiler $@",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "prettier:check": "prettier --check ./src",
+    "prettier:write": "prettier --write ./src"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -47,6 +49,7 @@
     "eslint": "^9.39.2",
     "eslint-plugin-react": "^7.37.5",
     "graphql": "^16.10.0",
+    "prettier": "^3.8.1",
     "relay-compiler": "^20.1.1",
     "relay-compiler-language-typescript": "^15.0.0",
     "typescript": "^5.7.3",

src/App.css

@@ -1,4 +1,6 @@
-html, body, #root {
+html,
+body,
+#root {
   min-height: 100vh;
 }
 

src/App.tsx

@@ -23,7 +23,7 @@ const App = () => (
         </main>
         <Footer />
       </>
-      </BrowserRouter>
+    </BrowserRouter>
   </RelayEnvironmentProvider>
 );
 

src/components/Footer.tsx

@@ -8,7 +8,11 @@ const Footer = () => (
     <Container fluid={true}>
       <Row>
         <Col>
-          Created with <i className="fas fa-heart" style={{ color: 'red' }}></i> by <a href="https://juffalow.com" style={{ color: '#fff', textDecoration: 'none' }}>Matej <span style={{ color: 'red' }}>&apos;juffalow&apos;</span> Jellus</a> | 2019 - 2025
+          Created with <i className="fas fa-heart" style={{ color: 'red' }}></i> by{' '}
+          <a href="https://juffalow.com" style={{ color: '#fff', textDecoration: 'none' }}>
+            Matej <span style={{ color: 'red' }}>&apos;juffalow&apos;</span> Jellus
+          </a>{' '}
+          | 2019 - 2025
         </Col>
       </Row>
     </Container>

src/components/Menu.tsx

@@ -7,11 +7,15 @@ import { Link } from 'react-router-dom';
 const Menu = () => (
   <Navbar bg="dark" variant="dark" expand="lg">
     <Container fluid>
-      <Navbar.Brand as={Link} to="/">Quotes</Navbar.Brand>
+      <Navbar.Brand as={Link} to="/">
+        Quotes
+      </Navbar.Brand>
       <Navbar.Toggle aria-controls="basic-navbar-nav" />
       <Navbar.Collapse id="basic-navbar-nav">
         <Nav className="mr-auto">
-          <Nav.Link as={Link} to="/authors">Authors</Nav.Link>
+          <Nav.Link as={Link} to="/authors">
+            Authors
+          </Nav.Link>
         </Nav>
       </Navbar.Collapse>
     </Container>

src/environment.ts

@@ -1,9 +1,4 @@
-import {
-  Environment,
-  Network,
-  RecordSource,
-  Store,
-} from 'relay-runtime';
+import { Environment, Network, RecordSource, Store } from 'relay-runtime';
 import { RequestParameters } from 'relay-runtime/lib/util/RelayConcreteNode';
 import { Variables } from 'relay-runtime/lib/util/RelayRuntimeTypes';
 

src/index.tsx

@@ -3,9 +3,7 @@ import ReactDOM from 'react-dom/client';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
-const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
-);
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
   <React.StrictMode>
     <App />