🔧 chore: prettierの導入 #63

Author: pss-aileen

.prettierignore

@@ -0,0 +1,4 @@
+# Ignore artifacts:
+.next
+docs
+.github

.prettierrc

@@ -0,0 +1 @@
+{}

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true
+}

Contributors.json

@@ -5,4 +5,4 @@
     "favoriteStack": "React",
     "text": "Hi there 👋 ."
   }
-]
+]

package-lock.json

@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "format": "prettier . --write"
   },
   "dependencies": {
     "@emotion/react": "^11.11.4",
@@ -25,6 +26,7 @@
     "eslint": "^8",
     "eslint-config-next": "14.1.3",
     "postcss": "^8",
+    "prettier": "3.2.5",
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
   }

package.json

@@ -12,7 +12,7 @@ const notojp = Noto_Sans_JP({
   weight: ["400", "500"],
   subsets: ["latin"],
   variable: "--font-notojp",
-})
+});
 
 export const metadata: Metadata = {
   title: "Create Next App",

src/app/layout.tsx

@@ -3,5 +3,5 @@
 
 export default function Loading() {
   // Or a custom loading skeleton component
-  return <p>Loading...</p>
-}
+  return <p>Loading...</p>;
+}

src/app/loading.tsx

@@ -1,14 +1,14 @@
 // document: https://nextjs.org/docs/app/api-reference/file-conventions/not-found
 // 以下記述しないとエラーが出たためドキュメントよりコピペ
 
-import Link from 'next/link'
- 
+import Link from "next/link";
+
 export default function NotFound() {
   return (
     <div>
       <h2>Not Found</h2>
       <p>Could not find requested resource</p>
       <Link href="/">Return Home</Link>
     </div>
-  )
-}
+  );
+}

src/app/not-found.tsx

@@ -8,20 +8,19 @@ export default function Home() {
     <>
       <section className="flex justify-center max-w-7xl w-11/12 mx-auto gap-16 border-box h-screen items-center">
         <div className="flex-1">
-          <p
-            className="bg-zinc-100 inline-block px-4 py-2">
-            <span className="text-2xl font-bold text-red-600">
-              1234
-            </span>人が参加中
+          <p className="bg-zinc-100 inline-block px-4 py-2">
+            <span className="text-2xl font-bold text-red-600">1234</span>
+            人が参加中
           </p>
-          <p
-            className="text-3xl font-bold mt-4">
-            誰でも簡単に<br />コントリビューション体験
+          <p className="text-3xl font-bold mt-4">
+            誰でも簡単に
+            <br />
+            コントリビューション体験
           </p>
-          <h2
-            className="bg-red-600 text-white text-5xl inline-block px-4 py-2 font-bold mt-4">first-contributions-ja</h2>
-          <p
-            className="mt-4">
+          <h2 className="bg-red-600 text-white text-5xl inline-block px-4 py-2 font-bold mt-4">
+            first-contributions-ja
+          </h2>
+          <p className="mt-4">
             完全日本語のコントリビューション体験リポジトリです。フォーク、クローン、コミット、プルリクを行うことでOSSプロジェクト貢献方法を学べます。
           </p>
         </div>