chore: fix import order

.eslintrc.cjs

@@ -3,12 +3,16 @@ const config = {
   parser: "@typescript-eslint/parser",
   parserOptions: {
     project: true,
+    sourceType: "module",
   },
-  plugins: ["@typescript-eslint"],
+  plugins: ["@typescript-eslint", "prettier", "import"],
   extends: [
     "plugin:@next/next/recommended",
-    // "plugin:@typescript-eslint/recommended-type-checked",
-    // "plugin:@typescript-eslint/stylistic-type-checked",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
   ],
   rules: {
     // These opinionated rules are enabled in stylistic-type-checked above.
@@ -32,8 +36,51 @@ const config = {
         checksVoidReturn: { attributes: false },
       },
     ],
+
+    "sort-imports": [
+      "error",
+      {
+        ignoreCase: false,
+        ignoreDeclarationSort: true, // don"t want to sort import lines, use eslint-plugin-import instead
+        ignoreMemberSort: false,
+        memberSyntaxSortOrder: ["none", "all", "multiple", "single"],
+        allowSeparatedGroups: true,
+      },
+    ],
+
+    "import/order": [
+      "error",
+      {
+        groups: [
+          "builtin", // Built-in imports (come from NodeJS native) go first
+          "external", // <- External imports
+          "internal", // <- Absolute imports
+          ["sibling", "parent"], // <- Relative imports, the sibling and parent types they can be mingled together
+          "index", // <- index imports
+          "unknown", // <- unknown
+        ],
+        "newlines-between": "always",
+        alphabetize: {
+          /* sort in ascending order. Options: ["ignore", "asc", "desc"] */
+          order: "asc",
+          /* ignore case. Options: [true, false] */
+          caseInsensitive: true,
+        },
+      },
+    ],
   },
   ignorePatterns: ["*.js"],
+  env: {
+    node: true,
+  },
+
+  settings: {
+    "import/resolver": {
+      typescript: {
+        project: "./tsconfig.json",
+      },
+    },
+  },
 };
 
 module.exports = config;

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+  // "editor.formatOnSave": true,
+  "eslint.validate": [
+    "typescript"
+  ],
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "always"
+  },
+}

package.json

@@ -78,15 +78,20 @@
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
     "@types/react-syntax-highlighter": "^15.5.11",
-    "@typescript-eslint/eslint-plugin": "^6.11.0",
-    "@typescript-eslint/parser": "^6.11.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
+    "add": "^2.0.6",
     "autoprefixer": "^10.4.14",
     "dotenv-cli": "^7.3.0",
     "drizzle-kit": "latest",
-    "eslint": "^8.54.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-prettier": "^5.1.3",
     "mysql2": "^3.6.1",
     "postcss": "^8.4.31",
-    "prettier": "^3.1.0",
+    "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.5.7",
     "tailwindcss": "^3.3.5",
     "tsx": "^4.7.0",

src/app/(auth)/signup/page.tsx

@@ -1,8 +1,10 @@
 import { redirect } from "next/navigation";
-import { Signup } from "./signup";
+
 import { validateRequest } from "~/lib/auth/validate-request";
 import { redirects } from "~/lib/constants";
 
+import { Signup } from "./signup";
+
 export const metadata = {
   title: "Sign Up",
   description: "Signup Page",

src/app/(auth)/signup/signup.tsx

@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import { useFormState } from "react-dom";
+
 import { GitHubLogoIcon } from "~/components/icons";
 import { PasswordInput } from "~/components/password-input";
 import { SubmitButton } from "~/components/submit-button";

src/app/(auth)/verify-email/page.tsx

@@ -1,15 +1,17 @@
+import { redirect } from "next/navigation";
+
+import type { User } from "@/server/db/schema";
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
 } from "~/components/ui/card";
-import { redirect } from "next/navigation";
 import { validateRequest } from "~/lib/auth/validate-request";
-import { VerifyCode } from "./verify-code";
 import { redirects } from "~/lib/constants";
-import type { User } from "@/server/db/schema";
+
+import { VerifyCode } from "./verify-code";
 
 export const metadata = {
   title: "Verify Email",

src/app/(auth)/verify-email/verify-code.tsx

@@ -1,16 +1,17 @@
 "use client";
-import { Input } from "~/components/ui/input";
 import { Label } from "@radix-ui/react-label";
 import { useEffect, useRef } from "react";
 import { useFormState } from "react-dom";
 import { toast } from "sonner";
+
 import { ExclamationTriangleIcon } from "~/components/icons";
+import { SubmitButton } from "~/components/submit-button";
+import { Input } from "~/components/ui/input";
 import {
   logout,
-  verifyEmail,
   resendVerificationEmail as resendEmail,
+  verifyEmail,
 } from "~/lib/auth/actions";
-import { SubmitButton } from "~/components/submit-button";
 
 export const VerifyCode = () => {
   const [verifyEmailState, verifyEmailAction] = useFormState(verifyEmail, null);

src/app/(landing)/layout.tsx

@@ -1,8 +1,10 @@
-import { APP_TITLE } from "~/lib/constants";
-import { type ReactNode } from "react";
 import { type Metadata } from "next";
-import { Header } from "./_components/header";
+import { type ReactNode } from "react";
+
 import { validateRequest } from "~/lib/auth/validate-request";
+import { APP_TITLE } from "~/lib/constants";
+
+import { Header } from "./_components/header";
 
 export const metadata: Metadata = {
   title: APP_TITLE,

src/app/(landing)/page.tsx

@@ -1,27 +1,29 @@
-import Link from "next/link";
+import { GitHubLogoIcon } from "@radix-ui/react-icons";
 import { type Metadata } from "next";
+import Link from "next/link";
+
 import { PlusIcon } from "~/components/icons";
 import { Button } from "~/components/ui/button";
-import { GitHubLogoIcon } from "@radix-ui/react-icons";
+import {
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/card";
+
 import { CopyToClipboard } from "./_components/copy-to-clipboard";
 import {
   Drizzle,
   LuciaAuth,
-  NextjsLight,
   NextjsDark,
+  NextjsLight,
+  ReactEmail,
   ReactJs,
   ShadcnUi,
+  StripeLogo,
   TRPC,
   TailwindCss,
-  StripeLogo,
-  ReactEmail,
 } from "./_components/feature-icons";
-import {
-  Card,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "~/components/ui/card";
 
 export const metadata: Metadata = {
   title: "Next.js Lucia Auth Starter Template",

src/app/(main)/_components/header.tsx

@@ -1,7 +1,8 @@
-import Link from "next/link";
-import { UserDropdown } from "~/app/(main)/_components/user-dropdown";
 import { FunctionSquare } from "lucide-react";
+import Link from "next/link";
+
 import { APP_TITLE } from "@/lib/constants";
+import { UserDropdown } from "~/app/(main)/_components/user-dropdown";
 import type { User } from "~/server/db/schema";
 
 const routes = [{ name: "Dashboard", href: "/dashboard" }] as const;

src/app/(main)/_components/user-dropdown.tsx

@@ -1,37 +1,36 @@
 "use client";
 
-import { useState } from "react";
 import Link from "next/link";
+import { useTheme } from "next-themes";
+import { useState } from "react";
+import { toast } from "sonner";
+
+import { ExclamationTriangleIcon } from "~/components/icons";
+import { LoadingButton } from "~/components/loading-button";
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "~/components/ui/alert-dialog";
+import { Button } from "~/components/ui/button";
 import {
   DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuPortal,
   DropdownMenuSeparator,
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
-} from "~/components/ui/dropdown-menu";
-import {
   DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
 } from "~/components/ui/dropdown-menu";
-import {
-  AlertDialog,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "~/components/ui/alert-dialog";
-import { Button } from "~/components/ui/button";
-import { LoadingButton } from "~/components/loading-button";
-import { ExclamationTriangleIcon } from "~/components/icons";
 import { logout } from "~/lib/auth/actions";
 import { APP_TITLE } from "~/lib/constants";
-import { toast } from "sonner";
-import { useTheme } from "next-themes";
 
 export const UserDropdown = ({
   email,

src/app/(main)/account/page.tsx

@@ -1,5 +1,5 @@
-import type { User } from "~/server/db/schema";
 import { redirect } from "next/navigation";
+
 import { SubmitButton } from "~/components/submit-button";
 import {
   Card,
@@ -12,6 +12,7 @@ import {
 import { logout } from "~/lib/auth/actions";
 import { validateRequest } from "~/lib/auth/validate-request";
 import { redirects } from "~/lib/constants";
+import type { User } from "~/server/db/schema";
 
 export default async function AccountPage() {
   const { user } = (await validateRequest()) as { user: User | null };

src/app/(main)/dashboard/billing/_components/billing.tsx

@@ -1,7 +1,6 @@
 import Link from "next/link";
 
 import { CheckIcon } from "~/components/icons";
-
 import { Button } from "~/components/ui/button";
 import {
   Card,
@@ -13,6 +12,7 @@ import {
 } from "~/components/ui/card";
 import { formatDate } from "~/lib/utils";
 import { type RouterOutputs } from "~/trpc/shared";
+
 import { ManageSubscriptionForm } from "./manage-subscription-form";
 
 interface BillingProps {

src/app/(main)/dashboard/billing/_components/manage-subscription-form.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import * as React from "react";
+import { toast } from "sonner";
 import { type z } from "zod";
 
 import { Button } from "~/components/ui/button";
 import { type manageSubscriptionSchema } from "~/lib/validators/stripe";
 import { api } from "~/trpc/react";
-import { toast } from "sonner";
 
 type ManageSubscriptionFormProps = z.infer<typeof manageSubscriptionSchema>;
 

src/app/(main)/dashboard/billing/page.tsx

@@ -1,14 +1,14 @@
 import type { Metadata } from "next";
 import { redirect } from "next/navigation";
+import * as React from "react";
 
 import { ExclamationTriangleIcon } from "~/components/icons";
-
 import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
 import { env } from "~/env";
 import { validateRequest } from "~/lib/auth/validate-request";
 import { APP_TITLE } from "~/lib/constants";
 import { api } from "~/trpc/server";
-import * as React from "react";
+
 import { Billing } from "./_components/billing";
 import { BillingSkeleton } from "./_components/billing-skeleton";
 

src/app/(main)/dashboard/layout.tsx

@@ -1,10 +1,10 @@
+import { Inter } from "next/font/google";
 import { redirect } from "next/navigation";
 import * as React from "react";
+
 import { validateRequest } from "~/lib/auth/validate-request";
 import { redirects } from "~/lib/constants";
 
-import { Inter } from "next/font/google";
-
 type DashboardLayoutProps = {
   children: React.ReactNode;
 };

src/app/(main)/dashboard/page.tsx

@@ -1,7 +1,9 @@
 import { type Metadata } from "next";
 import * as React from "react";
+
 import { env } from "~/env";
 import { api } from "~/trpc/server";
+
 import { Forms } from "./_components/forms";
 import { CreateFormDialog } from "./_components/new-form-dialog";
 import { PostsSkeleton } from "./_components/posts-skeleton";