fix husky, prettier config and all the preceding code in coding standard

.husky/pre-commit

@@ -0,0 +1 @@
+sudo npx --no -- lint-staged

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "endOfLine": "lf"
+}

.vscode/settings.json

@@ -1,3 +1,42 @@
 {
-    "typescript.tsdk": "node_modules/typescript/lib"
-}
+  "typescript.tsdk": "node_modules/typescript/lib",
+
+  // Auto fix with ESLint on save
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "editor.formatOnPaste": true,
+  "editor.codeActionsOnSave": {
+    "source.addMissingImports": "explicit",
+    "source.fixAll.eslint": "explicit"
+  },
+  "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
+  "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
+
+  "prettier.prettierPath": "./node_modules/.bin/prettier",
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml",
+    "toml",
+    "xml",
+    "gql",
+    "graphql",
+    "astro",
+    "svelte",
+    "css",
+    "less",
+    "scss",
+    "pcss",
+    "postcss",
+    "github-actions-workflow"
+  ]
+}

app/dashboard/page.tsx

@@ -1,50 +1,59 @@
 export default function DashboardPage() {
-    return (
-        <div className="min-h-screen bg-gray-50 p-8">
-            <div className="max-w-7xl mx-auto">
-                {/* Header */}
-                <div className="mb-8">
-                    <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
-                    <p className="text-gray-600 mt-2">Welcome back to your dashboard</p>
-                </div>
+  return (
+    <div className="min-h-screen bg-gray-50 p-8">
+      <div className="max-w-7xl mx-auto">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
+          <p className="text-gray-600 mt-2">Welcome back to your dashboard</p>
+        </div>
 
-                {/* Stats Grid */}
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-                    {[
-                        { label: 'Total Users', value: '1,234' },
-                        { label: 'Revenue', value: '$45,231' },
-                        { label: 'Active Sessions', value: '89' },
-                        { label: 'Growth', value: '+12.5%' },
-                    ].map((stat, i) => (
-                        <div key={i} className="bg-white rounded-lg shadow p-6">
-                            <p className="text-gray-600 text-sm font-medium">{stat.label}</p>
-                            <p className="text-2xl font-bold text-gray-900 mt-2">{stat.value}</p>
-                        </div>
-                    ))}
-                </div>
+        {/* Stats Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+          {[
+            { label: 'Total Users', value: '1,234' },
+            { label: 'Revenue', value: '$45,231' },
+            { label: 'Active Sessions', value: '89' },
+            { label: 'Growth', value: '+12.5%' },
+          ].map((stat, i) => (
+            <div key={i} className="bg-white rounded-lg shadow p-6">
+              <p className="text-gray-600 text-sm font-medium">{stat.label}</p>
+              <p className="text-2xl font-bold text-gray-900 mt-2">
+                {stat.value}
+              </p>
+            </div>
+          ))}
+        </div>
 
-                {/* Charts Section */}
-                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                    <div className="bg-white rounded-lg shadow p-6">
-                        <h2 className="text-lg font-semibold text-gray-900 mb-4">Activity Chart</h2>
-                        <div className="h-64 bg-gray-100 rounded flex items-center justify-center">
-                            <p className="text-gray-500">Chart placeholder</p>
-                        </div>
-                    </div>
+        {/* Charts Section */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <div className="bg-white rounded-lg shadow p-6">
+            <h2 className="text-lg font-semibold text-gray-900 mb-4">
+              Activity Chart
+            </h2>
+            <div className="h-64 bg-gray-100 rounded flex items-center justify-center">
+              <p className="text-gray-500">Chart placeholder</p>
+            </div>
+          </div>
 
-                    <div className="bg-white rounded-lg shadow p-6">
-                        <h2 className="text-lg font-semibold text-gray-900 mb-4">Recent Activity</h2>
-                        <div className="space-y-3">
-                            {['Event 1', 'Event 2', 'Event 3'].map((event, i) => (
-                                <div key={i} className="flex items-center justify-between p-3 bg-gray-50 rounded">
-                                    <span className="text-gray-700">{event}</span>
-                                    <span className="text-gray-500 text-sm">Just now</span>
-                                </div>
-                            ))}
-                        </div>
-                    </div>
+          <div className="bg-white rounded-lg shadow p-6">
+            <h2 className="text-lg font-semibold text-gray-900 mb-4">
+              Recent Activity
+            </h2>
+            <div className="space-y-3">
+              {['Event 1', 'Event 2', 'Event 3'].map((event, i) => (
+                <div
+                  key={i}
+                  className="flex items-center justify-between p-3 bg-gray-50 rounded"
+                >
+                  <span className="text-gray-700">{event}</span>
+                  <span className="text-gray-500 text-sm">Just now</span>
                 </div>
+              ))}
             </div>
+          </div>
         </div>
-    );
-}
+      </div>
+    </div>
+  );
+}

app/globals.css

@@ -1,4 +1,4 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 
 :root {
   --background: #ffffff;

app/layout.tsx

@@ -1,20 +1,20 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
+import type { Metadata } from 'next';
+import { Geist, Geist_Mono } from 'next/font/google';
+import './globals.css';
 
 const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
 });
 
 const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: 'Create Next App',
+  description: 'Generated by create next app',
 };
 
 export default function RootLayout({

app/page.tsx

@@ -1,4 +1,4 @@
-import Image from "next/image";
+import Image from 'next/image';
 
 export default function Home() {
   return (
@@ -17,20 +17,20 @@ export default function Home() {
             To get started, edit the page.tsx file.
           </h1>
           <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
+            Looking for a starting point or more instructions? Head over to{' '}
             <a
               href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
               className="font-medium text-zinc-950 dark:text-zinc-50"
             >
               Templates
-            </a>{" "}
-            or the{" "}
+            </a>{' '}
+            or the{' '}
             <a
               href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
               className="font-medium text-zinc-950 dark:text-zinc-50"
             >
               Learning
-            </a>{" "}
+            </a>{' '}
             center.
           </p>
         </div>

app/user/[seg]/loading.tsx

@@ -1,22 +1,22 @@
 export default function Loading() {
-    return (
-        <div className="max-w-md mx-auto p-6">
-            <div className="h-8 bg-gray-200 rounded mb-6 w-32 animate-pulse" />
-            <form className="space-y-4">
-                <div>
-                    <div className="h-4 bg-gray-200 rounded mb-2 w-12 animate-pulse" />
-                    <div className="h-10 bg-gray-200 rounded px-3 py-2 animate-pulse" />
-                </div>
-                <div>
-                    <div className="h-4 bg-gray-200 rounded mb-2 w-12 animate-pulse" />
-                    <div className="h-10 bg-gray-200 rounded px-3 py-2 animate-pulse" />
-                </div>
-                <div>
-                    <div className="h-4 bg-gray-200 rounded mb-2 w-12 animate-pulse" />
-                    <div className="h-10 bg-gray-200 rounded px-3 py-2 animate-pulse" />
-                </div>
-                <div className="h-10 bg-gray-300 rounded font-medium animate-pulse" />
-            </form>
+  return (
+    <div className="max-w-md mx-auto p-6">
+      <div className="h-8 bg-gray-200 rounded mb-6 w-32 animate-pulse" />
+      <form className="space-y-4">
+        <div>
+          <div className="h-4 bg-gray-200 rounded mb-2 w-12 animate-pulse" />
+          <div className="h-10 bg-gray-200 rounded px-3 py-2 animate-pulse" />
         </div>
-    );
-}
+        <div>
+          <div className="h-4 bg-gray-200 rounded mb-2 w-12 animate-pulse" />
+          <div className="h-10 bg-gray-200 rounded px-3 py-2 animate-pulse" />
+        </div>
+        <div>
+          <div className="h-4 bg-gray-200 rounded mb-2 w-12 animate-pulse" />
+          <div className="h-10 bg-gray-200 rounded px-3 py-2 animate-pulse" />
+        </div>
+        <div className="h-10 bg-gray-300 rounded font-medium animate-pulse" />
+      </form>
+    </div>
+  );
+}

app/user/[seg]/page.tsx

@@ -1,58 +1,58 @@
 async function sleep(ms: number): Promise<void> {
-    return new Promise(resolve => setTimeout(resolve, ms));
+  return new Promise(resolve => setTimeout(resolve, ms));
 }
 
-export default async function UserDetailForm( props: PageProps<'/user/[seg]'>) {
-    const { seg } = await props.params;
-
-    await sleep(2000);
-    return (
-        <div className="max-w-md mx-auto p-6">
-            <h1 className="text-2xl font-bold mb-6">{seg}</h1>
-            <form className="space-y-4">
-                <div>
-                    <label htmlFor="name" className="block text-sm font-medium mb-1">
-                        Name
-                    </label>
-                    <input
-                        id="name"
-                        name="name"
-                        type="text"
-                        className="w-full border rounded px-3 py-2"
-                        required
-                    />
-                </div>
-                <div>
-                    <label htmlFor="email" className="block text-sm font-medium mb-1">
-                        Email
-                    </label>
-                    <input
-                        id="email"
-                        name="email"
-                        type="email"
-                        className="w-full border rounded px-3 py-2"
-                        required
-                    />
-                </div>
-                <div>
-                    <label htmlFor="phone" className="block text-sm font-medium mb-1">
-                        Phone
-                    </label>
-                    <input
-                        id="phone"
-                        name="phone"
-                        type="tel"
-                        className="w-full border rounded px-3 py-2"
-                        required
-                    />
-                </div>
-                <button
-                    type="submit"
-                    className="w-full bg-blue-600 text-white py-2 rounded font-medium hover:bg-blue-700"
-                >
-                    Submit
-                </button>
-            </form>
+export default async function UserDetailForm(props: PageProps<'/user/[seg]'>) {
+  const { seg } = await props.params;
+
+  await sleep(2000);
+  return (
+    <div className="max-w-md mx-auto p-6">
+      <h1 className="text-2xl font-bold mb-6">{seg}</h1>
+      <form className="space-y-4">
+        <div>
+          <label htmlFor="name" className="block text-sm font-medium mb-1">
+            Name
+          </label>
+          <input
+            id="name"
+            name="name"
+            type="text"
+            className="w-full border rounded px-3 py-2"
+            required
+          />
+        </div>
+        <div>
+          <label htmlFor="email" className="block text-sm font-medium mb-1">
+            Email
+          </label>
+          <input
+            id="email"
+            name="email"
+            type="email"
+            className="w-full border rounded px-3 py-2"
+            required
+          />
         </div>
-    );
-}
+        <div>
+          <label htmlFor="phone" className="block text-sm font-medium mb-1">
+            Phone
+          </label>
+          <input
+            id="phone"
+            name="phone"
+            type="tel"
+            className="w-full border rounded px-3 py-2"
+            required
+          />
+        </div>
+        <button
+          type="submit"
+          className="w-full bg-blue-600 text-white py-2 rounded font-medium hover:bg-blue-700"
+        >
+          Submit
+        </button>
+      </form>
+    </div>
+  );
+}