prettierを設定する

.vscode/settings.json

@@ -0,0 +1,14 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "[markdown]": {
+    "editor.formatOnSave": false
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit"
+  },
+  "eslint.validate": ["html", "javascriptreact", "typescriptreact"],
+  "css.validate": false,
+  "scss.validate": false
+}

view/.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next", "next/core-web-vitals", "prettier", "next/babel"]
 }

view/.prettierrc.mjs

@@ -0,0 +1,22 @@
+/** @type {import('next').NextConfig} */
+
+const prettierConfig = {
+  plugins: ["prettier-plugin-tailwindcss"],
+  printWidth: 100,
+  tabWidth: 2,
+  useTabs: false,
+  semi: true,
+  singleQuote: false,
+  quoteProps: "as-needed",
+  jsxSingleQuote: false,
+  trailingComma: "es5",
+  bracketSpacing: true,
+  bracketSameLine: false,
+  arrowParens: "always",
+  proseWrap: "preserve",
+  htmlWhitespaceSensitivity: "css",
+  endOfLine: "lf",
+  embeddedLanguageFormatting: "off",
+};
+
+export default prettierConfig;

view/package.json

@@ -30,7 +30,10 @@
     "autoprefixer": "^10.0.1",
     "eslint": "^8",
     "eslint-config-next": "14.1.0",
+    "eslint-config-prettier": "^9.1.0",
     "postcss": "^8",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.12",
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
   },

view/src/app/create/page.tsx

@@ -27,14 +27,10 @@ export default function Home() {
     },
   });
 
-  const onSubmit: SubmitHandler<PlayerCarInput> = async (
-    data: PlayerCarInput
-  ) => {
+  const onSubmit: SubmitHandler<PlayerCarInput> = async (data: PlayerCarInput) => {
     try {
       setSubmit(true);
-      const responseJson: PlayerCarRes | false = await getPlayerCarDataFromGpt(
-        data
-      );
+      const responseJson: PlayerCarRes | false = await getPlayerCarDataFromGpt(data);
       if (responseJson) {
         await getResponseFromGpt(responseJson);
         router.push("/create/result");
@@ -55,9 +51,9 @@ export default function Home() {
   return (
     <main>
       {submit && <Loading />}
-      <div className="flex flex-wrap justify-around items-center h-screen bg-basecolor">
+      <div className="flex h-screen flex-wrap items-center justify-around bg-basecolor">
         <div className="h-4/5 w-1/2 p-4">
-          <div className="flex flex-col justify-around items-center h-full w-full bg-primarycolor rounded-xl border-4 border-secondarycolor">
+          <div className="flex h-full w-full flex-col items-center justify-around rounded-xl border-4 border-secondarycolor bg-primarycolor">
             <Image
               src="/announcer.webp"
               alt="announcer"
@@ -66,14 +62,14 @@ export default function Home() {
               priority
               className=" rounded-sm border-4 border-accentcolor"
             />
-            <Card className="text-4xl tracking-wider text-center w-11/12 border-4 border-basecolor p-8">
+            <Card className="w-11/12 border-4 border-basecolor p-8 text-center text-4xl tracking-wider">
               <p>これからレースだ！</p>
               <p> 君の車を作製しよう！</p>
             </Card>
           </div>
         </div>
-        <div className="flex h-full w-1/2 p-4 flex-col justify-around items-center">
-          <div className="text-3xl tracking-wider text-center w-11/12 p-4 items-center bg-secondarycolor text-basecolor rounded-xl border-4 border-accentcolor">
+        <div className="flex h-full w-1/2 flex-col items-center justify-around p-4">
+          <div className="w-11/12 items-center rounded-xl border-4 border-accentcolor bg-secondarycolor p-4 text-center text-3xl tracking-wider text-basecolor">
             <div className=" p-4">
               <p>これからChatGPに出場する車を</p>
               <p>ChatGPTに作成してもらおう！</p>
@@ -83,27 +79,27 @@ export default function Home() {
               <p>君の言葉で決まるよ！</p>
             </div>
           </div>
-          <Card className="w-full p-4 bg-primarycolor border-4 border-secondarycolor">
+          <Card className="w-full border-4 border-secondarycolor bg-primarycolor p-4">
             <form className="w-full" onSubmit={handleSubmit(onSubmit)}>
               <div className="p-1">
-                <div className="text-2xl tracking-widest bg-accentcolor text-basecolor inline-block p-2 rounded-xl">
+                <div className="inline-block rounded-xl bg-accentcolor p-2 text-2xl tracking-widest text-basecolor">
                   入力欄
                 </div>
               </div>
               <Textarea
-                className=" tracking-widest text-4xl text-center w-full border-4 border-accentcolor"
+                className=" w-full border-4 border-accentcolor text-center text-4xl tracking-widest"
                 {...register("text", { required: true, maxLength: 20 })}
               ></Textarea>
-              <div className="flex p-4 justify-end">
+              <div className="flex justify-end p-4">
                 <Button
                   disabled={submit}
-                  className=" bg-accentcolor hover:bg-secondarycolor text-basecolor w-24 h-12 text-xl text-center tracking-widest"
+                  className=" h-12 w-24 bg-accentcolor text-center text-xl tracking-widest text-basecolor hover:bg-secondarycolor"
                 >
                   送信
                 </Button>
               </div>
               {errors.text && (
-                <div className=" bg-basecolor border-secondarycolor border-4 text-2xl text-center text-accentcolor font-bold p-2">
+                <div className=" border-4 border-secondarycolor bg-basecolor p-2 text-center text-2xl font-bold text-accentcolor">
                   20文字以内で入力してください
                 </div>
               )}

view/src/app/create/result/page.tsx

@@ -50,33 +50,33 @@ export default function Home() {
 
   return (
     <main>
-      <div className="flex flex-wrap justify-around items-center h-screen bg-basecolor">
-        <div className="flex h-full w-1/2 p-4 flex-col justify-around items-center">
-          <div className="text-3xl tracking-wider text-center w-11/12 p-4 items-center bg-secondarycolor text-basecolor rounded-xl border-4 border-accentcolor">
+      <div className="flex h-screen flex-wrap items-center justify-around bg-basecolor">
+        <div className="flex h-full w-1/2 flex-col items-center justify-around p-4">
+          <div className="w-11/12 items-center rounded-xl border-4 border-accentcolor bg-secondarycolor p-4 text-center text-3xl tracking-wider text-basecolor">
             <div className="p-4 text-left">
               <p>{carInstruction}</p>
             </div>
           </div>
-          <Card className="text-4xl tracking-wider text-center w-11/12 border-4 border-accentcolor p-8">
+          <Card className="w-11/12 border-4 border-accentcolor p-8 text-center text-4xl tracking-wider">
             <p>俺は、{carName}</p>
             <p>今日は、{carFortune}</p>
           </Card>
         </div>
 
-        <div className="flex h-full w-1/2 p-4 flex-col justify-around items-center">
-          <Card className="flex flex-col justify-around items-center h-4/5 w-full p-4 border-4 bg-primarycolor border-accentcolor">
-            <div className="overflow-hidden flex flex-col justify-around items-center h-full w-full bg-transparent border-transparent">
+        <div className="flex h-full w-1/2 flex-col items-center justify-around p-4">
+          <Card className="flex h-4/5 w-full flex-col items-center justify-around border-4 border-accentcolor bg-primarycolor p-4">
+            <div className="bg-transparent border-transparent flex h-full w-full flex-col items-center justify-around overflow-hidden">
               <Image
                 src={carImage}
                 width={2000}
                 height={2000}
                 alt={PLAYER_CAR_IMAGE}
-                className="object-center object-cover"
+                className="object-cover object-center"
               />
             </div>
-            <div className="flex justify-end p-4 w-full">
+            <div className="flex w-full justify-end p-4">
               <Button
-                className="w-44 h-16 text-3xl bg-accentcolor border-basecolor hover:bg-primarycolor border-4"
+                className="h-16 w-44 border-4 border-basecolor bg-accentcolor text-3xl hover:bg-primarycolor"
                 onClick={moveToRace}
               >
                 Next

view/src/app/create/type.ts

@@ -3,7 +3,6 @@ import {
   PLAYER_CAR_NAME,
   PLAYER_CAR_LUCK,
   PLAYER_CAR_INSTRUCTION,
-
   ENEMY_CAR_IMAGE,
   ENEMY_CAR_NAME,
   ENEMY_CAR_LUCK,
@@ -26,4 +25,4 @@ export type EnemyCarRes = {
   [ENEMY_CAR_NAME]: string;
   [ENEMY_CAR_LUCK]: number;
   [ENEMY_CAR_INSTRUCTION]: string;
-};
+};

view/src/app/ending/page.tsx

@@ -33,30 +33,24 @@ export default function Home() {
 
   return (
     <main>
-      <div className="relative bg-[url('/ending_back.png')] bg-cover h-screen w-full p-4">
+      <div className="relative h-screen w-full bg-[url('/ending_back.png')] bg-cover p-4">
         {/* 背景を暗くするためのオーバーレイ */}
         <div className="absolute inset-0 bg-accentcolor bg-opacity-20">
-          <div className="flex items-center justify-center h-screen">
+          <div className="flex h-screen items-center justify-center">
             <div className="max-w-4xl overflow-auto p-4">
               {loader ? (
-                <p className="whitespace-normal text-accentyellow text-2xl font-bold">
-                  {text}
-                </p>
+                <p className="whitespace-normal text-2xl font-bold text-accentyellow">{text}</p>
               ) : (
-                <p className="whitespace-normal text-accentyellow text-2xl font-bold">
-                  Loading
-                </p>
+                <p className="whitespace-normal text-2xl font-bold text-accentyellow">Loading</p>
               )}
             </div>
           </div>
-          <div className="absolute bottom-0 reft-0 m-4">
-            {loader && (
-              <Image src={order} alt="order" width={200} height={200} />
-            )}
+          <div className="reft-0 absolute bottom-0 m-4">
+            {loader && <Image src={order} alt="order" width={200} height={200} />}
           </div>
           <div className="absolute bottom-0 right-0 m-4">
             <Button
-              className="border bg-transparent hover:bg-secondarycolor text-basecolor w-30 h-16 text-xl text-center tracking-widest"
+              className="bg-transparent w-30 h-16 border text-center text-xl tracking-widest text-basecolor hover:bg-secondarycolor"
               onClick={handleClick}
             >
               Game End

view/src/app/getEnemyCar.ts

@@ -23,10 +23,7 @@ export const getEnemyCar = async () => {
   return true;
 };
 
-const setEnemyCar = (
-  currentEnemyCount: number,
-  enemyCarDataWithUrl: EnemyCarRes
-) => {
+const setEnemyCar = (currentEnemyCount: number, enemyCarDataWithUrl: EnemyCarRes) => {
   // localStorageにすでに値が存在する場合は、保存しない
   const ENEMY_CAR_KEY = ENEMY_CAR + "_" + currentEnemyCount.toString();
   if (localStorage.getItem(ENEMY_CAR_KEY)) return false;

view/src/app/globals.css

@@ -1,76 +1,76 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
 
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
- 
+
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
- 
+
     --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
- 
+
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
- 
+
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
- 
+
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
- 
+
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
 
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
- 
+
     --radius: 0.5rem;
   }
- 
+
   .dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
- 
+
     --card: 222.2 84% 4.9%;
     --card-foreground: 210 40% 98%;
- 
+
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
- 
+
     --primary: 210 40% 98%;
     --primary-foreground: 222.2 47.4% 11.2%;
- 
+
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
- 
+
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
- 
+
     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
- 
+
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
- 
+
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
   }
 }
- 
+
 @layer base {
   * {
     @apply border-border;
   }
   body {
     @apply bg-background text-foreground;
   }
-}
+}

view/src/app/layout.tsx

@@ -18,23 +18,12 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <head />
-      <body
-        className={cn(
-          "min-h-screen bg-background font-sans antialiased",
-          fontSans.variable
-        )}
-      >
+      <body className={cn("min-h-screen bg-background font-sans antialiased", fontSans.variable)}>
         <title>ChatGP</title>
-        <meta
-          name="keywords"
-          content="chatgpt,chatgp.nosse.net,nosse.net,race game"
-        />
+        <meta name="keywords" content="chatgpt,chatgp.nosse.net,nosse.net,race game" />
         <meta name="description" content="ChatGPTを利用したレースゲーム" />
         <meta property="og:title" content="ChatGP" />
-        <meta
-          property="og:description"
-          content="ChatGPTを利用したレースゲーム"
-        />
+        <meta property="og:description" content="ChatGPTを利用したレースゲーム" />
         <meta property="og:image" content="./icon.png" />
         <link rel="icon" href="./icon.png" />
         {children}