Add @ianvs/prettier-plugin-sort-imports to auto-sort imports (#1286)

* Add `@ianvs/prettier-plugin-sort-imports` to auto sort imports
Fixes #1285

* Sort imports

Author: maiertech

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",

pnpm-lock.yaml

@@ -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: [
 		{

prettier.config.js

@@ -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/collections/posts/index.ts

@@ -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/components/stackblitz-embed.svelte

@@ -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/lib/server/collections/posts.ts

@@ -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/+layout.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/+page.svelte

@@ -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.server.ts

@@ -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();