chore: order imports with a Prettier plugin

Author: WarningImHack3r

.prettierrc

@@ -3,7 +3,11 @@
 	"trailingComma": "none",
 	"printWidth": 100,
 	"arrowParens": "avoid",
-	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"plugins": [
+		"prettier-plugin-svelte",
+		"prettier-plugin-tailwindcss",
+		"@trivago/prettier-plugin-sort-imports"
+	],
 	"overrides": [
 		{
 			"files": "*.svelte",
@@ -12,5 +16,18 @@
 			}
 		}
 	],
-	"tailwindStylesheet": "./src/app.css"
+	"tailwindStylesheet": "./src/app.css",
+	"importOrder": [
+		"^\\.\\./app.css$",
+		"^svelte$",
+		"^@sveltejs/kit.*$",
+		"^svelte/.*$",
+		"\\$(app|env)/.+$",
+		"<THIRD_PARTY_MODULES>",
+		"\\$lib/(?!components).+$",
+		"\\$lib/components/ui/.+$",
+		"\\$lib/components/.+$",
+		"^\\.*/.+$"
+	],
+	"importOrderSortSpecifiers": true
 }

eslint.config.js

@@ -1,8 +1,8 @@
 import eslint from "@eslint/js";
-import tseslint from "typescript-eslint";
-import svelte from "eslint-plugin-svelte";
 import prettierConfig from "eslint-config-prettier/flat";
+import svelte from "eslint-plugin-svelte";
 import globals from "globals";
+import tseslint from "typescript-eslint";
 import svelteConfig from "./svelte.config.js";
 
 export default tseslint.config(

package.json

@@ -30,6 +30,7 @@
 		"@tailwindcss/typography": "^0.5.16",
 		"@tailwindcss/vite": "^4.1.5",
 		"@total-typescript/ts-reset": "^0.6.1",
+		"@trivago/prettier-plugin-sort-imports": "^5.2.2",
 		"@types/eslint-config-prettier": "^6.11.3",
 		"@types/node": "^22.15.14",
 		"@types/semver": "^7.7.0",

pnpm-lock.yaml

@@ -4,9 +4,9 @@
 Based on https://bits-ui.com/docs/components/collapsible#best-practices
 -->
 <script lang="ts">
-	import { Collapsible, type WithoutChildrenOrChild } from "bits-ui";
-	import { slide, type SlideParams } from "svelte/transition";
 	import type { Snippet } from "svelte";
+	import { type SlideParams, slide } from "svelte/transition";
+	import { Collapsible, type WithoutChildrenOrChild } from "bits-ui";
 
 	let {
 		ref = $bindable(null),

src/lib/components/AnimatedCollapsibleContent.svelte

@@ -7,10 +7,10 @@
 	 */
 	import type { ComponentProps } from "svelte";
 	import type { ClassValue } from "svelte/elements";
+	import posthog from "posthog-js";
+	import rehypeRaw from "rehype-raw";
 	import Markdown, { type Plugin } from "svelte-exmarkdown";
 	import { gfmPlugin } from "svelte-exmarkdown/gfm";
-	import rehypeRaw from "rehype-raw";
-	import posthog from "posthog-js";
 	import { cn } from "$lib/utils";
 	import { Button } from "$lib/components/ui/button";
 

src/lib/components/MarkdownRenderer.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	// From https://gist.github.com/WarningImHack3r/375c559c5ee120408f9df2390ec2747a
 	// Inspired by https://gist.github.com/Sh4yy/0300299ae60af4910bcb341703946330
-	import { innerWidth, innerHeight } from "svelte/reactivity/window";
+	import { innerHeight, innerWidth } from "svelte/reactivity/window";
 	import { slide } from "svelte/transition";
 
 	let screens = $state<{ name: string; size: number }[]>([]);

src/lib/components/ScreenSize.svelte

@@ -1,5 +1,5 @@
-import type { Category, Entries, Prettify, RepoInfo } from "$lib/types";
 import { uniq } from "$lib/array";
+import type { Category, Entries, Prettify, RepoInfo } from "$lib/types";
 
 export const repos: Record<Category, { name: string; repos: RepoInfo[] }> = {
 	svelte: {