Add auto format prettier

Add auto format prettier

Add prettier

Add configuration file for prettier

.github/workflows/prettier.yml

@@ -0,0 +1,24 @@
+name: Format
+on:
+  push:
+  pull_request:
+    branches: [main]
+jobs:
+  format:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          ref: ${{ github.head_ref }}
+      - uses: actions/setup-node@v2
+        with:
+          node-version: "20.x"
+      - run: npm ci
+        working-directory: ./frontend
+      - run: npm run prettify
+        working-directory: ./frontend
+      - name: Commit changes
+        uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          commit_message: Apply formatting changes
+          branch: ${{ github.head_ref }}

frontend/.prettierrc.json

@@ -0,0 +1,22 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "quoteProps": "as-needed",
+  "jsxSingleQuote": false,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "jsxBracketSameLine": false,
+  "arrowParens": "always",
+  "requirePragma": false,
+  "insertPragma": false,
+  "proseWrap": "preserve",
+  "htmlWhitespaceSensitivity": "css",
+  "vueIndentScriptAndStyle": false,
+  "endOfLine": "lf",
+  "embeddedLanguageFormatting": "auto",
+  "singleAttributePerLine": false
+}

frontend/package.json

@@ -8,7 +8,8 @@
     "test": "jest",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "prettify": "prettier ./src -w"
   },
   "dependencies": {
     "axios": "^1.7.2",
@@ -19,6 +20,7 @@
     "styled-components": "^6.1.11"
   },
   "devDependencies": {
+    "prettier": "^3.3.1",
     "@babel/core": "^7.24.6",
     "@babel/preset-env": "^7.24.6",
     "@babel/preset-react": "^7.24.6",