Svelte Awesome Snippets for VSCode

Awesome, easy to remember snippets for Svelte and Svelte-Kit (using TypeScript).

Uses type inference when possible. No unnecessary type imports.

Snippets structure:

Svelte Kit for Svelte Kit specific typescript and routing files (the + files);
Svelte TS for Svelte files that belong between the <script lang="ts"> tags in a .svelte file;
Svelte for Svelte templating snippets.

Naming convention:

All snippets start with sv. I had a distinction between Svelte and Svelte Kit commands (sv or sk) but I decided against it as it adds mental overhead remembering the distinction.

Added support for Svelte 5 API:

Runes
Snippets

Awesome Svelte Snippets on VSCode Marketplace.

For bugs or feedback, please open an issue on Github.

Snippets

SVELTE KIT

svpage - Script

<script lang="ts">
	let { data }$1 = $$props()
</script>

$0

svscript - Script

<script lang="ts">
	let { $1 }: $0 = $$props()
</script>

svmodule - Script Module

<script lang="ts" module>
	$1
</script>

svload - Load

export const load = async (${1:event}) => {
	$2
	return {
		$3
	};
};

svactions - Actions

export const actions = {
	${1:default}: async (${2:event}) => {
		$3
	}
}

svhooks - Hooks

export const handle = async ({ request, resolve }) => {
	$1
	return resolve(request);
};

SVELTE TS

svstate - Create a state variable

let ${1:variable} = $$state(${2:initialValue});

svderived - Create a derived variable

let ${1:variable} = $$derived(${2:expression});

sveffect - Create a rune effect, including cleanup. Even if you don't need it, it's a good to atleast remind yourself that you should consider it.

$$effect(() => {
	$$inspect(${1:variable});

	return () => {
		console.log("cleanup");
	}
});

svprops - Add props to a component

let ${1:props}:$0 = $$props();

svinspect - Inspect a variable.

$$inspect(${0:variable});

SVELTE

svdispatch - Event Dispatcher

import { createEventDispatcher } from 'svelte';

const dispatch = createEventDispatcher<{ $1: $2}>()
$0

svhead - Head Tag

<svelte:head>
	$1
</svelte:head>
$0

svforeach - For Each

{#each $1 as $2 ($3)}
	$0
{/each}
$0

svforeachelse - For Each else

{#each $1 as $2 ($3)}
	$4
{:else}
	$5
{/each}
$0

svif - If

{#if $1}
	$2
{/if}
$0

svifelse - If Else

{#if $1}
	$2
{:else}
	$3
{/if}
$0

svifelseif - If Else If

{#if $1}
	$2
{:else if $3}
	$4
{/if}
$0

svawait - Await

{#await $1}
	$2
{:then $3}
	$4
{/await}
$0

svkey - Key

{#key $1}
	$2
{/key}
$0

Note

The snippets include "$1", "$2"... which are placeholders for the cursor position. You can use the tab key to jump between them.

License

MIT

Credits

Forked from svelte-snippets, thank you very much!

Awesome Svelte 5 Snippets

j13n