Added prettier, formatted all files using prettier

.eslintrc.cjs

@@ -2,17 +2,18 @@ module.exports = {
   root: true,
   env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+    "prettier",
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
+    "react-refresh/only-export-components": [
+      "warn",
       { allowConstantExport: true },
     ],
   },
-}
+};

.prettierignore

@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "tabWidth": 2,
+  "printWidth": 80,
+  "proseWrap": "never",
+  "trailingComma": "all",
+  "singleQuote": false,
+  "semi": true
+}

README.md

@@ -1,20 +1,23 @@
 # CV PDF Generator
+
 The CV PDF Generator is a React app used to build a CV and export it as a PDF.
 
 ## How To Run
+
 1. Add your picture in `src/assets/profile.jpeg`
 2. Fill out your information in `data.json`
 3. Adapt CSS or scale in `pdf.ts` if needed
 4. Run the following commands in the terminal
 
 ```sh
-npm install 
+npm install
 # Starts the vite server
 npm run dev
 # Generate the pdf
 npm run pdf
 ```
 
 ## Built With
+
 - React + Vite
-- Puppeteer for PDF generation
+- Puppeteer for PDF generation

package.json

@@ -6,6 +6,8 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
+    "format": "prettier . --write",
+    "prelint": "prettier . --write",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "pdf": "tsx pdf.ts"
@@ -24,8 +26,10 @@
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "prettier": "3.3.2",
     "puppeteer": "^22.1.0",
     "tsx": "^4.7.1",
     "typescript": "^5.2.2",

src/App.tsx

@@ -12,7 +12,11 @@ function App() {
       <div className="app__body">
         <div
           className="app__body-left"
-          style={{ display: "flex", flexDirection: "column", gap: "20px" }}
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: "20px",
+          }}
         >
           <Category data={data.workExperience} />
           <Category data={data.projects} />

src/components/Profile/Profile.tsx

@@ -43,7 +43,7 @@ const ProfileHeader = ({
 }: Data["profile"]) => {
   return (
     <div className="profile__header">
-      <ProfileImage circular={true} border={true}/>
+      <ProfileImage circular={true} border={true} />
       <div className="profile__header__lines">
         {lines.map((line, index) => (
           <p key={index}>{line}</p>

src/components/Profile/ProfileImage/ProfileImage.css

@@ -1,12 +1,12 @@
-.profile__header__image img {
-  height: 150px;
-  overflow: hidden;
-}
-
-.profile__header__image__circular img {
-  border-radius: 9999px;
-}
-
-.profile__header__image__border img {
-  border: 3px solid var(--red);
-}
+.profile__header__image img {
+  height: 150px;
+  overflow: hidden;
+}
+
+.profile__header__image__circular img {
+  border-radius: 9999px;
+}
+
+.profile__header__image__border img {
+  border: 3px solid var(--red);
+}

src/components/Profile/ProfileImage/ProfileImage.tsx

@@ -1,30 +1,30 @@
-import useProfilePicture from "../../../hooks/useProfilePicture";
-import clsx from "clsx";
-import "./ProfileImage.css";
-
-type ImageOptions = {
-  circular?: boolean;
-  border?: boolean;
-};
-
-const ProfileImage = (options: ImageOptions = {}) => {
-  const profilePicture = useProfilePicture();
-
-  const profilePictureClasses = clsx(
-    "profile__header__image",
-    { profile__header__image__circular: options.circular },
-    { profile__header__image__border: options.border }
-  );
-
-  return (
-    <>
-      {profilePicture && (
-        <div className={profilePictureClasses}>
-          <img src={profilePicture} alt="Profile" />
-        </div>
-      )}
-    </>
-  );
-};
-
-export default ProfileImage;
+import useProfilePicture from "../../../hooks/useProfilePicture";
+import clsx from "clsx";
+import "./ProfileImage.css";
+
+type ImageOptions = {
+  circular?: boolean;
+  border?: boolean;
+};
+
+const ProfileImage = (options: ImageOptions = {}) => {
+  const profilePicture = useProfilePicture();
+
+  const profilePictureClasses = clsx(
+    "profile__header__image",
+    { profile__header__image__circular: options.circular },
+    { profile__header__image__border: options.border },
+  );
+
+  return (
+    <>
+      {profilePicture && (
+        <div className={profilePictureClasses}>
+          <img src={profilePicture} alt="Profile" />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default ProfileImage;

src/hooks/useProfilePicture.ts

@@ -1,26 +1,26 @@
-import { useState, useEffect } from 'react';
-
-const useProfilePicture = (): string | null => {
-  const [profilePicture, setProfilePicture] = useState<string | null>(null);
-
-  useEffect(() => {
-    const loadProfilePicture = async () => {
-      const extensions = ['png', 'jpeg', 'jpg', 'gif', 'webp', 'svg'];
-      for (const extension of extensions) {
-        try {
-          const module = await import(`../assets/profile.${extension}`);
-          setProfilePicture(module.default);
-          break;
-        } catch (error) {
-          // Ignore error and try next extension
-        }
-      }
-    };
-
-    loadProfilePicture();
-  }, []);
-
-  return profilePicture;
-};
-
-export default useProfilePicture;
+import { useState, useEffect } from "react";
+
+const useProfilePicture = (): string | null => {
+  const [profilePicture, setProfilePicture] = useState<string | null>(null);
+
+  useEffect(() => {
+    const loadProfilePicture = async () => {
+      const extensions = ["png", "jpeg", "jpg", "gif", "webp", "svg"];
+      for (const extension of extensions) {
+        try {
+          const module = await import(`../assets/profile.${extension}`);
+          setProfilePicture(module.default);
+          break;
+        } catch (error) {
+          // Ignore error and try next extension
+        }
+      }
+    };
+
+    loadProfilePicture();
+  }, []);
+
+  return profilePicture;
+};
+
+export default useProfilePicture;

src/main.tsx

@@ -7,5 +7,5 @@ import "./normalize.css";
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );