Merge pull request #44 from ls1intum/43-create-a-prettier-code-format…

…-configuration-for-the-monorepo

feat: 43 create a prettier code format configuration for the monorepo

.husky/pre-commit

@@ -1,2 +1,2 @@
-npm run format
-npm run lint
+npm run format:check
+npm run lint

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "singleQuote": false,
+  "semi": false,
+  "trailingComma": "es5",
+  "arrowParens": "always",
+  "bracketSpacing": true
+}

README.md

@@ -122,6 +122,14 @@ Here are the commonly used scripts defined in the monorepo:
   ```bash
   npm run lint
   ```
+- **Fixes formatting issues :**
+  ```bash
+  npm run format
+  ```
+- **Checks formatting issues without fixing them :**
+  ```bash
+  npm run format:check
+  ```
 
 ## Troubleshooting
 

library/eslint.config.js

@@ -1,7 +1,7 @@
-import globals from "globals";
-import pluginJs from "@eslint/js";
-import tseslint from "typescript-eslint";
-import reactPlugin from "eslint-plugin-react";
+import globals from "globals"
+import pluginJs from "@eslint/js"
+import tseslint from "typescript-eslint"
+import reactPlugin from "eslint-plugin-react"
 
 /** @type {import('eslint').Linter.Config[]} */
 export default [
@@ -19,4 +19,4 @@ export default [
       },
     },
   },
-];
+]

library/lib/App.tsx

@@ -1,7 +1,7 @@
-import { useState } from "react";
+import { useState } from "react"
 
 export function App() {
-  const [count, setCount] = useState(0);
+  const [count, setCount] = useState(0)
 
   return (
     <div>
@@ -10,5 +10,5 @@ export function App() {
         Increment From Library
       </button>
     </div>
-  );
+  )
 }

library/lib/index.tsx

@@ -1,22 +1,22 @@
-import ReactDOM from "react-dom/client";
-import { App } from "./App";
+import ReactDOM from "react-dom/client"
+import { App } from "./App"
 
 export class Apollon2 {
-  private root: ReactDOM.Root | null = null;
+  private root: ReactDOM.Root | null = null
 
   constructor(element: HTMLElement) {
-    this.root = ReactDOM.createRoot(element);
-    this.root.render(<App />);
+    this.root = ReactDOM.createRoot(element)
+    this.root.render(<App />)
   }
 
   public getRandomNumber(): number {
-    return Math.random() * 100;
+    return Math.random() * 100
   }
 
   public dispose() {
     if (this.root) {
-      this.root.unmount();
-      this.root = null;
+      this.root.unmount()
+      this.root = null
     }
   }
 }

library/vite.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import dts from "vite-plugin-dts";
-import { resolve } from "path";
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react"
+import dts from "vite-plugin-dts"
+import { resolve } from "path"
 
 export default defineConfig({
   plugins: [react(), dts({ include: ["lib"] })],
@@ -21,4 +21,4 @@ export default defineConfig({
     },
     minify: true,
   },
-});
+})

package.json

@@ -23,8 +23,8 @@
     "lint:fix:lib": "npm run lint:fix --workspace=@apollon2/library",
     "lint:fix:server": "npm run lint:fix --workspace=@apollon2/server",
     "lint:fix:webapp": "npm run lint:fix --workspace=@apollon2/webapp",
-    "format": "prettier --ignore-path .gitignore --write \"**/*.+(js|ts|json|tsx)\"",
-    "format:fix": "prettier --write \"**/*.+(js|ts|json)\"",
+    "format": "prettier --ignore-path .gitignore --write \"**/*.+(js|ts|tsx|json)\"",
+    "format:check": "prettier --ignore-path .gitignore --check \"**/*.(js|ts|tsx|json)\"",
     "preview": "husky"
   },
   "license": "MIT",

standalone/server/eslint.config.js

@@ -1,6 +1,6 @@
-import globals from "globals";
-import pluginJs from "@eslint/js";
-import tseslint from "typescript-eslint";
+import globals from "globals"
+import pluginJs from "@eslint/js"
+import tseslint from "typescript-eslint"
 
 /** @type {import('eslint').Linter.Config[]} */
 export default [
@@ -9,4 +9,4 @@ export default [
   { languageOptions: { globals: globals.node } },
   pluginJs.configs.recommended,
   ...tseslint.configs.recommended,
-];
+]

standalone/server/src/server.ts

@@ -1,13 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import express from "express";
+import express from "express"
 
-const app = express();
-const port = 3000;
+const app = express()
+const port = 3000
 
 app.get("/", (req: any, res: any) => {
-  res.send("Hello from Backend!");
-});
+  res.send("Hello from Backend!")
+})
 
 app.listen(port, () => {
-  console.log(`Server running on http://localhost:${port}`);
-});
+  console.log(`Server running on http://localhost:${port}`)
+})

standalone/webapp/src/App.tsx

@@ -1,16 +1,16 @@
-import { useState } from "react";
-import { LibraryView } from "./LibraryView";
+import { useState } from "react"
+import { LibraryView } from "./LibraryView"
 
 function App() {
-  const [count, setCount] = useState(0);
+  const [count, setCount] = useState(0)
 
   return (
     <div>
       WebApp Count: {count}
       <button onClick={() => setCount(count + 1)}>Increment</button>
       <LibraryView />
     </div>
-  );
+  )
 }
 
-export default App;
+export default App

standalone/webapp/src/LibraryView.tsx

@@ -1,28 +1,28 @@
-import { useRef, useLayoutEffect } from "react";
-import { Apollon2 } from "@apollon2/library";
+import { useRef, useLayoutEffect } from "react"
+import { Apollon2 } from "@apollon2/library"
 
 export function LibraryView() {
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const apollon2Ref = useRef<Apollon2 | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null)
+  const apollon2Ref = useRef<Apollon2 | null>(null)
 
   useLayoutEffect(() => {
     if (containerRef.current) {
-      apollon2Ref.current = new Apollon2(containerRef.current);
+      apollon2Ref.current = new Apollon2(containerRef.current)
 
       console.log(
         "Random number from Apollon2:",
         apollon2Ref.current.getRandomNumber()
-      );
+      )
     }
 
     return () => {
-      console.log("Disposing Apollon2");
+      console.log("Disposing Apollon2")
       if (apollon2Ref.current) {
-        apollon2Ref.current.dispose();
-        apollon2Ref.current = null;
+        apollon2Ref.current.dispose()
+        apollon2Ref.current = null
       }
-    };
-  }, []);
+    }
+  }, [])
 
-  return <div ref={containerRef} />;
+  return <div ref={containerRef} />
 }

standalone/webapp/src/main.tsx

@@ -1,15 +1,15 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import App from "./App.tsx";
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+import App from "./App.tsx"
 
-const rootElement = document.getElementById("root");
+const rootElement = document.getElementById("root")
 
 if (rootElement) {
   createRoot(rootElement).render(
     <StrictMode>
       <App />
     </StrictMode>
-  );
+  )
 } else {
-  console.error("Root element not found");
+  console.error("Root element not found")
 }

standalone/webapp/vite.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react"
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
-});
+})