Add @ianvs/prettier-plugin-sort-imports to auto-sort imports

package.json

@@ -21,6 +21,7 @@
 		"@eslint/js": "^10.0.1",
 		"@fontsource/lexend": "^5.3.0",
 		"@fontsource/spectral": "^5.3.0",
+		"@ianvs/prettier-plugin-sort-imports": "^4.7.1",
 		"@lucide/svelte": "^1.28.0",
 		"@maiertech/sveltekit-helpers": "^0.55.0",
 		"@playwright/test": "^1.62.1",

prettier.config.js

@@ -5,7 +5,11 @@ const config = {
 	trailingComma: 'none',
 	printWidth: 100,
 	proseWrap: 'always',
-	plugins: ['prettier-plugin-svelte', 'prettier-plugin-tailwindcss'],
+	plugins: [
+		'prettier-plugin-svelte',
+		'@ianvs/prettier-plugin-sort-imports',
+		'prettier-plugin-tailwindcss'
+	],
 	tailwindStylesheet: './src/app.css',
 	overrides: [
 		{

src/collections/posts/index.ts

@@ -1,8 +1,8 @@
-import { defineCollection } from '@content-collections/core';
-import { postMetaSchema } from '@maiertech/sveltekit-helpers';
 import { execSync } from 'child_process';
 import { readFileSync, writeFileSync } from 'fs';
 import { resolve } from 'path';
+import { defineCollection } from '@content-collections/core';
+import { postMetaSchema } from '@maiertech/sveltekit-helpers';
 import { collection as authors } from '../authors/index.js';
 import { collection as tags } from '../tags/index.js';
 

src/lib/components/stackblitz-embed.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import stackblitz from '$lib/actions/stackblitz';
 	import type { EmbedOptions, Project } from '@stackblitz/sdk';
+	import stackblitz from '$lib/actions/stackblitz';
 	import { twMerge } from 'tailwind-merge';
 
 	interface Props {

src/lib/server/collections/posts.ts

@@ -1,6 +1,6 @@
-import { allPosts } from 'content-collections';
 import { ORIGIN } from '$env/static/private';
 import { escapeXml } from '$lib/utils';
+import { allPosts } from 'content-collections';
 
 export const sorted = allPosts
 	.filter((post) => post.published !== false) // Quick way to unpublish a post.

src/routes/+layout.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
+	import { Container, SeoBasic, SeoOgImage, SiteHeader } from '@maiertech/sveltekit-helpers';
 	import { page } from '$app/state';
+	import src from '$lib/assets/thilo.jpg?enhanced';
 	import { Favicon, Footer } from '$lib/components';
-	import { Container, SeoBasic, SeoOgImage, SiteHeader } from '@maiertech/sveltekit-helpers';
 	import type { LayoutProps } from './$types';
-	import src from '$lib/assets/thilo.jpg?enhanced';
-
 	import '../app.css';
 
 	let { children, data }: LayoutProps = $props();

src/routes/+page.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { NoteList, PostList } from '$lib/components';
+	import { Clock } from '@lucide/svelte';
 	import { VideoPreview } from '@maiertech/sveltekit-helpers';
+	import { NoteList, PostList } from '$lib/components';
 	import type { PageProps } from './$types';
-	import { Clock } from '@lucide/svelte';
 
 	let { data }: PageProps = $props();
 </script>

src/routes/guides/+layout.server.ts

@@ -1,7 +1,7 @@
+import { error } from '@sveltejs/kit';
 import { ORIGIN } from '$env/static/private';
 import { sorted as guides } from '$lib/server/collections/guides.js';
 import { latest as latestVideos } from '$lib/server/collections/videos.js';
-import { error } from '@sveltejs/kit';
 import type { LayoutServerLoad } from './$types';
 
 export const prerender = true;

src/routes/guides/+layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Pager, VideoList } from '$lib/components';
 	import { Clock } from '@lucide/svelte';
 	import { H1, SeoCanonicalUrl } from '@maiertech/sveltekit-helpers';
+	import { Pager, VideoList } from '$lib/components';
 	import type { LayoutProps } from './$types';
 
 	let { data, children }: LayoutProps = $props();

src/routes/notes/+layout.server.ts

@@ -1,7 +1,7 @@
+import { error } from '@sveltejs/kit';
 import { ORIGIN } from '$env/static/private';
 import { sorted as notes } from '$lib/server/collections/notes.js';
 import { latest as latestVideos } from '$lib/server/collections/videos.js';
-import { error } from '@sveltejs/kit';
 import type { LayoutServerLoad } from './$types';
 
 export const prerender = true;

src/routes/notes/+layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { VideoList, Pager } from '$lib/components';
 	import { Clock } from '@lucide/svelte';
 	import { NoteHeader, SeoCanonicalUrl } from '@maiertech/sveltekit-helpers';
+	import { Pager, VideoList } from '$lib/components';
 	import type { LayoutProps } from './$types';
 
 	let { data, children }: LayoutProps = $props();

src/routes/notes/+page@.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { NoteList } from '$lib/components';
 	import { H1 } from '@maiertech/sveltekit-helpers';
+	import { NoteList } from '$lib/components';
 	import type { PageProps } from './$types';
 
 	let { data }: PageProps = $props();

src/routes/notes/rss.xml/+server.ts

@@ -1,6 +1,6 @@
+import type { RequestHandler } from '@sveltejs/kit';
 import { ORIGIN } from '$env/static/private';
 import { rss as rssItems } from '$lib/server/collections/notes';
-import type { RequestHandler } from '@sveltejs/kit';
 
 export const prerender = true;
 

src/routes/posts/(2021)/how-to-wire-up-fathom-analytics-in-a-sveltekit-app/+page.md

@@ -49,8 +49,9 @@ script:
 
 ```svelte
 <script>
-	import { onMount } from 'svelte';
 	import * as Fathom from 'fathom-client';
+	import { onMount } from 'svelte';
+
 	onMount(() => {
 		Fathom.load('ABCDEFG');
 	});
@@ -73,9 +74,9 @@ here:
 
 ```svelte
 <script>
-	import { onMount } from 'svelte';
-	import * as Fathom from 'fathom-client';
 	import { PUBLIC_FATHOM_SITE_ID } from '$env/static/public';
+	import * as Fathom from 'fathom-client';
+	import { onMount } from 'svelte';
 
 	onMount(() => {
 		Fathom.load(PUBLIC_FATHOM_SITE_ID);
@@ -134,9 +135,9 @@ set the `url` option to the alternative tracking script:
 
 ```svelte
 <script>
-	import { onMount } from 'svelte';
-	import * as Fathom from 'fathom-client';
 	import { PUBLIC_FATHOM_SITE_ID } from '$env/static/public';
+	import * as Fathom from 'fathom-client';
+	import { onMount } from 'svelte';
 
 	onMount(() => {
 		Fathom.load(PUBLIC_FATHOM_SITE_ID, {

src/routes/posts/(2022)/using-the-at-and-hash-symbols-in-tweets-with-a-word-joiner-character/CopyButton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
 	import { Button } from '@maiertech/sveltekit-helpers';
+	import type { Snippet } from 'svelte';
 
 	interface Props {
 		text: string;

src/routes/posts/(2023)/how-to-add-a-basic-seo-component-to-sveltekit/+page.md

@@ -89,8 +89,8 @@ So, here is my basic SEO component:
 
 ```svelte
 <script>
-	import { PUBLIC_URL_ORIGIN } from '$env/static/public';
 	import { page } from '$app/stores';
+	import { PUBLIC_URL_ORIGIN } from '$env/static/public';
 	import decorate from '$lib/utils/decorate';
 
 	/** @type {import('$lib/types').SeoDefaultData} */

src/routes/posts/(2025)/dropping-requests-in-sveltekit/+page.md

@@ -37,8 +37,8 @@ Here is what I came up with:
 
 ```ts
 import type { Handle } from '@sveltejs/kit';
-import { Blocklist } from '$lib/utils/index.js';
 import { BLOCKED_PATHS } from '$lib/blocklists/index.js';
+import { Blocklist } from '$lib/utils/index.js';
 
 const pathBlocklist = new Blocklist(BLOCKED_PATHS);