integrate prettier formatter for frontend

.github/workflows/react-quality.yml

@@ -0,0 +1,21 @@
+name: React Code Quality Check
+
+on: 
+  pull_request:
+    paths:
+      - 'frontend/**'
+
+jobs:
+  python-check:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - name: Set up Node.js
+      uses: actions/setup-node@v1
+      with:
+        node-version: '14'
+    - name: Install dependencies and run Prettier
+      run: |
+        cd frontend
+        npm install
+        npx prettier --check .

.pre-commit-config.yaml

@@ -12,11 +12,16 @@ repos:
     -   id: flake8
         files: ^backend/  # Run flake8 only on files in the backend/ directory
         exclude: ^backend/alembic/versions/  # Exclude alembic migration files
-
 -   repo: https://github.com/pre-commit/mirrors-mypy
     rev: 'v1.7.1'  # Use the latest version
     hooks:
     -   id: mypy
         files: ^backend/
         exclude: ^backend/alembic/versions/  # Exclude alembic migration files
+-   repo: https://github.com/pre-commit/mirrors-prettier
+    rev: 'v3.1.0'
+    hooks:
+    -   id: prettier
+        files: ^frontend/  # Adjust this path to where your React code is
+
 

.vscode/settings.json

@@ -4,5 +4,21 @@
       "editor.formatOnSave": true,
       "files.trimTrailingWhitespace": true,
     },
-    "workbench.editor.enablePreview": false
+  "workbench.editor.enablePreview": false,
+  "[javascript]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode",
+      "editor.formatOnSave": true
+  },
+  "[javascriptreact]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode",
+      "editor.formatOnSave": true
+  },
+  "[typescript]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode",
+      "editor.formatOnSave": true
+  },
+  "[typescriptreact]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode",
+      "editor.formatOnSave": true
+  },
 }

frontend/.eslintrc.cjs

@@ -2,19 +2,19 @@ module.exports = {
   root: true,
   env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:react-hooks/recommended',
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  settings: { react: { version: '18.2' } },
-  plugins: ['react-refresh'],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+  settings: { react: { version: "18.2" } },
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
+    "react-refresh/only-export-components": [
+      "warn",
       { allowConstantExport: true },
     ],
   },
-}
+};

frontend/package.json

@@ -34,6 +34,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4",
+    "prettier": "^3.2.2",
     "vite": "^5.0.0"
   }
 }