chore(format): add prettier plugin to sort imports

eric15342335 · eric15342335 · commit 094702e3e87d · 2025-08-23T13:15:58.000+08:00
This commit introduces `@ianvs/prettier-plugin-sort-imports` to automatically sort import statements, improving code consistency and readability.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -5,5 +5,5 @@
   "trailingComma": "es5",
   "printWidth": 110,
   "singleAttributePerLine": true,
-  "plugins": ["prettier-plugin-tailwindcss"]
+  "plugins": ["prettier-plugin-tailwindcss", "@ianvs/prettier-plugin-sort-imports"]
 }
diff --git a/package.json b/package.json
@@ -36,12 +36,13 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",
+    "@ianvs/prettier-plugin-sort-imports": "^4.6.2",
     "@next/eslint-plugin-next": "^15.5.0",
     "@tailwindcss/postcss": "^4.1.12",
     "@types/node": "^24.3.0",
     "@types/react": "^19.1.11",
     "@types/react-dom": "^19.1.7",
-    "eslint": "^9.33.0",
+    "eslint": "^9.34.0",
     "eslint-config-next": "^15.5.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "prettier": "^3.6.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/about-us/annual-report/page.tsx b/src/app/about-us/annual-report/page.tsx
@@ -1,6 +1,6 @@
-import { Metadata } from "next";
 import { ComingSoon, comingSoonText } from "@/components/sections/coming-soon";
 import { buildPageMetadata } from "@/lib/config";
+import { Metadata } from "next";
 
 const description = comingSoonText;
 export const metadata: Metadata = buildPageMetadata("/about-us/annual-report", { description });
diff --git a/src/app/about-us/exco/page.tsx b/src/app/about-us/exco/page.tsx
@@ -1,8 +1,8 @@
-import { Metadata } from "next";
-import { buildPageMetadata } from "@/lib/config";
-import { PageHeader } from "@/components/primitives/page-header";
 import { ExcoCard } from "@/components/primitives/exco-card";
+import { PageHeader } from "@/components/primitives/page-header";
+import { buildPageMetadata } from "@/lib/config";
 import { excoMembers } from "@/lib/exco";
+import { Metadata } from "next";
 
 const description = "Meet the team leading ALPHA HKU.";
 export const metadata: Metadata = buildPageMetadata("/about-us/exco", { description });
diff --git a/src/app/about-us/our-story/page.tsx b/src/app/about-us/our-story/page.tsx
@@ -1,6 +1,6 @@
-import { Metadata } from "next";
-import { buildPageMetadata, siteConfig } from "@/lib/config";
 import { PageHeader } from "@/components/primitives/page-header";
+import { buildPageMetadata, siteConfig } from "@/lib/config";
+import { Metadata } from "next";
 
 const description =
   "The first and only global student initiative based in Hong Kong for constructive peace and humanity. First international student chapter of ALPHA Education.";
diff --git a/src/app/about-us/page.tsx b/src/app/about-us/page.tsx
@@ -1,6 +1,6 @@
-import { Metadata } from "next";
 import { ComingSoon, comingSoonText } from "@/components/sections/coming-soon";
 import { buildPageMetadata } from "@/lib/config";
+import { Metadata } from "next";
 
 const description = comingSoonText;
 export const metadata: Metadata = buildPageMetadata("/about-us", { description });
diff --git a/src/app/about-us/partners/page.tsx b/src/app/about-us/partners/page.tsx
@@ -1,8 +1,8 @@
-import { Metadata } from "next";
-import { buildPageMetadata } from "@/lib/config";
-import { partners } from "@/lib/partners";
 import { PageHeader } from "@/components/primitives/page-header";
 import { PartnerCard } from "@/components/primitives/partner-card";
+import { buildPageMetadata } from "@/lib/config";
+import { partners } from "@/lib/partners";
+import { Metadata } from "next";
 
 const description =
   "We are collaborating with the following partners to share the message of peace and humanity.";
diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
@@ -1,6 +1,6 @@
-import { Metadata } from "next";
 import { ComingSoon, comingSoonText } from "@/components/sections/coming-soon";
 import { buildPageMetadata } from "@/lib/config";
+import { Metadata } from "next";
 
 const description = comingSoonText;
 export const metadata: Metadata = buildPageMetadata("/blog", { description });
diff --git a/src/app/join-us/page.tsx b/src/app/join-us/page.tsx
@@ -1,8 +1,7 @@
-import { Metadata } from "next";
-import { buildPageMetadata } from "@/lib/config";
 import { AnimatedFillButton } from "@/components/primitives/animated-fill-button";
-import { siteConfig } from "@/lib/config";
 import { PageHeader } from "@/components/primitives/page-header";
+import { buildPageMetadata, siteConfig } from "@/lib/config";
+import { Metadata } from "next";
 
 const description =
   "Join The Team at ALPHA University Chapter at the University of Hong Kong, an initiative with great potential.";
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,10 +1,10 @@
 import { siteConfig } from "@/lib/config";
-import type { Metadata } from "next";
 import { GeistSans } from "geist/font/sans";
+import type { Metadata } from "next";
 import "./globals.css";
-import { ThemeProvider } from "@/providers/theme-provider";
-import { Header } from "@/components/sections/header";
 import { Footer } from "@/components/sections/footer";
+import { Header } from "@/components/sections/header";
+import { ThemeProvider } from "@/providers/theme-provider";
 import { Analytics } from "@vercel/analytics/next";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 
diff --git a/src/app/our-work/page.tsx b/src/app/our-work/page.tsx
@@ -1,6 +1,6 @@
-import { Metadata } from "next";
 import { ComingSoon, comingSoonText } from "@/components/sections/coming-soon";
 import { buildPageMetadata } from "@/lib/config";
+import { Metadata } from "next";
 
 const description = comingSoonText;
 export const metadata: Metadata = buildPageMetadata("/our-work", { description });
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,12 +1,12 @@
-import { Metadata } from "next";
-import Link from "next/link";
-import { Hero } from "@/components/sections/hero";
+import { description } from "@/app/layout";
+import { PageHeader } from "@/components/primitives/page-header";
 import { FeaturedProgram } from "@/components/sections/featured-program";
+import { Hero } from "@/components/sections/hero";
 import { WhatsHappening } from "@/components/sections/whats-happening";
-import { PageHeader } from "@/components/primitives/page-header";
 import { Button } from "@/components/ui/button";
 import { buildPageMetadata, siteConfig } from "@/lib/config";
-import { description } from "@/app/layout";
+import { Metadata } from "next";
+import Link from "next/link";
 
 export const metadata: Metadata = buildPageMetadata("/", { description, title: "Home - ALPHA HKU" });
 
diff --git a/src/app/resources/page.tsx b/src/app/resources/page.tsx
@@ -1,6 +1,6 @@
-import { Metadata } from "next";
 import { ResourceIframe } from "@/components/sections/resource-iframe";
 import { buildPageMetadata } from "@/lib/config";
+import { Metadata } from "next";
 
 const description =
   "Find useful resources and materials from the ALPHA Chapter at the University of Hong Kong.";
diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts
@@ -1,6 +1,6 @@
-import { MetadataRoute } from "next";
 import { siteConfig } from "@/lib/config";
-import { isInternalHref, flattenByChildren } from "@/lib/utils";
+import { flattenByChildren, isInternalHref } from "@/lib/utils";
+import { MetadataRoute } from "next";
 
 // when using SSG (output: 'export'), this is required
 // https://github.com/vercel/next.js/issues/68667
diff --git a/src/app/upcoming-event/page.tsx b/src/app/upcoming-event/page.tsx
@@ -1,6 +1,6 @@
-import { Metadata } from "next";
 import { ComingSoon, comingSoonText } from "@/components/sections/coming-soon";
 import { buildPageMetadata } from "@/lib/config";
+import { Metadata } from "next";
 
 const description = comingSoonText;
 export const metadata: Metadata = buildPageMetadata("/upcoming-event", { description });
diff --git a/src/components/primitives/animated-fill-button.tsx b/src/components/primitives/animated-fill-button.tsx
@@ -1,5 +1,5 @@
-import type { ReactNode } from "react";
 import { Button } from "@/components/ui/button";
+import type { ReactNode } from "react";
 
 type AnimatedFillButtonProps = {
   href: string;
diff --git a/src/components/primitives/exco-card.tsx b/src/components/primitives/exco-card.tsx
@@ -1,12 +1,12 @@
 "use client";
 
-import { useState } from "react";
-import Image from "next/image";
 import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import type { ExcoMember, ExcoLink } from "@/lib/exco";
+import type { ExcoLink, ExcoMember } from "@/lib/exco";
 import { cn } from "@/lib/utils";
-import { Mail, Globe } from "lucide-react";
 import { SiGithub, SiInstagram } from "@icons-pack/react-simple-icons";
+import { Globe, Mail } from "lucide-react";
+import Image from "next/image";
+import { useState } from "react";
 import { FaLinkedin } from "react-icons/fa";
 import { FaXTwitter } from "react-icons/fa6";
 
diff --git a/src/components/primitives/mode-toggle.tsx b/src/components/primitives/mode-toggle.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import * as React from "react";
-import { useTheme } from "next-themes";
 import { motion } from "framer-motion";
-import { Sun, Moon } from "lucide-react";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import * as React from "react";
 
 export function ModeToggle() {
   const { theme, setTheme, resolvedTheme } = useTheme();
diff --git a/src/components/primitives/page-header.tsx b/src/components/primitives/page-header.tsx
@@ -1,5 +1,5 @@
-import type { ReactNode } from "react";
 import { cn } from "@/lib/utils";
+import type { ReactNode } from "react";
 
 type PageHeaderProps = {
   title: ReactNode;
diff --git a/src/components/primitives/partner-card.tsx b/src/components/primitives/partner-card.tsx
@@ -1,7 +1,7 @@
-import Image from "next/image";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import type { Partner } from "@/lib/partners";
 import { cn } from "@/lib/utils";
+import Image from "next/image";
 
 type PartnerCardProps = {
   partner: Partner;
diff --git a/src/components/sections/coming-soon.tsx b/src/components/sections/coming-soon.tsx
@@ -1,5 +1,5 @@
-import { Construction } from "lucide-react";
 import { PageHeader } from "@/components/primitives/page-header";
+import { Construction } from "lucide-react";
 
 export const comingSoonText = "We're working hard to bring you this page. Stay tuned for something amazing!";
 
diff --git a/src/components/sections/footer.tsx b/src/components/sections/footer.tsx
@@ -1,9 +1,9 @@
 import { siteConfig } from "@/lib/config";
-import { Mail } from "lucide-react";
+import { cn } from "@/lib/utils";
 import { SiGithub, SiInstagram } from "@icons-pack/react-simple-icons";
-import { FaLinkedin } from "react-icons/fa";
+import { Mail } from "lucide-react";
 import Link from "next/link";
-import { cn } from "@/lib/utils";
+import { FaLinkedin } from "react-icons/fa";
 
 const sitemapLinks = [...siteConfig.mainNav, ...siteConfig.utilityNav];
 const baseTextLinkClass = "text-sm hover:underline text-muted-foreground";
diff --git a/src/components/sections/header.tsx b/src/components/sections/header.tsx
@@ -1,26 +1,26 @@
 "use client";
 
-import { siteConfig } from "@/lib/config";
-import { isInternalHref } from "@/lib/utils";
+import { ModeToggle } from "@/components/primitives/mode-toggle";
+import { Button } from "@/components/ui/button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import {
   NavigationMenu,
+  NavigationMenuContent,
   NavigationMenuItem,
   NavigationMenuLink,
   NavigationMenuList,
   NavigationMenuTrigger,
-  NavigationMenuContent,
 } from "@/components/ui/navigation-menu";
-import { ModeToggle } from "@/components/primitives/mode-toggle";
-import { Menu, Mail } from "lucide-react";
-import { FaLinkedin } from "react-icons/fa";
+import { siteConfig } from "@/lib/config";
+import { isInternalHref } from "@/lib/utils";
 import { SiGithub, SiInstagram } from "@icons-pack/react-simple-icons";
-import Link from "next/link";
-import Image from "next/image";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
-import { Button } from "@/components/ui/button";
 import { AnimatePresence, motion } from "framer-motion";
-import { useState, type ReactNode } from "react";
+import { Mail, Menu } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
+import { useState, type ReactNode } from "react";
+import { FaLinkedin } from "react-icons/fa";
 
 function NavAnchor({ href, className, children }: { href: string; className?: string; children: ReactNode }) {
   return isInternalHref(href) ? (
diff --git a/src/components/sections/resource-iframe.tsx b/src/components/sections/resource-iframe.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { useState, useRef, useEffect, useCallback, RefObject } from "react";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { cn, noReturnDebounce } from "@/lib/utils";
+import { RefObject, useCallback, useEffect, useRef, useState } from "react";
 
 const IFRAME_DEFAULTS = {
   WIDTH: 1440,
diff --git a/src/components/sections/whats-happening.tsx b/src/components/sections/whats-happening.tsx
@@ -1,5 +1,5 @@
-import Image from "next/image";
 import { Card } from "@/components/ui/card";
+import Image from "next/image";
 
 type WhatsHappeningEvent = {
   title: string;
diff --git a/src/lib/config.ts b/src/lib/config.ts
@@ -1,5 +1,5 @@
+import { flattenByChildren, isInternalHref } from "@/lib/utils";
 import { MetadataRoute } from "next";
-import { isInternalHref, flattenByChildren } from "@/lib/utils";
 import type { Metadata } from "next";
 
 type NavItem = {

Original file line number	Diff line number	Diff line change
`@@ -5,5 +5,5 @@`
`5`	`5`	`"trailingComma": "es5",`
`6`	`6`	`"printWidth": 110,`
`7`	`7`	`"singleAttributePerLine": true,`
`8`		`- "plugins": ["prettier-plugin-tailwindcss"]`
	`8`	`+ "plugins": ["prettier-plugin-tailwindcss", "@ianvs/prettier-plugin-sort-imports"]`
`9`	`9`	`}`