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 - Page

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

$2

svscript - Script

<script lang="ts">
	${TM_SELECTED_TEXT:${1:export let data;}
</script>

svmodule - Script Module

<script lang="ts" context="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 rune state variable

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

svderived - Create a rune derived variable

let ${1:varName} = $$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 think about it.

$$effect(() => {
	console.log(${1:varName});

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

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