Motivation

When dealing in large codebase, readability is very important and svelte component may be complex depending on the number of states, function etc.

Description

To address this issue, similar to eslint rule sorting imports I suggest a rule that would automatically sort the content based on user orders (with some nice default)

Examples

<!-- ✗ BAD -->
<script lang="ts">
	let count: Foo = $state({ bar: 'dummy' });
	interface Foo {
		bar: string;
	}
</script>

<!-- ✓ GOOD -->
<script>
	interface Foo {
		bar: string;
	}
	let count: Foo = $state({ bar: 'dummy' });
</script>

<!-- ✗ BAD -->
<script lang="ts">
	type Foo = string;
	import Bar from './bar.svelte';

	function hello(): string {
		return 'world';
	}
</script>

<!-- ✓ GOOD -->
<script>
	import Bar from './bar.svelte';
	type Foo = string;

	function hello(): string {
		return 'world';
	}
</script>

Additional comments

To experiment with Eslint rules and have some fun I implemented it, I created a draft PR #1427

if this proposal get accepted I can refine & improve the code I wrote, otherwise closing it !