Svelte Snippets

Snippets for Svelte and Svelte-Kit (using TypeScript)

Snippets

skl - SvelteKit Page Server Load

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

skpl - SvelteKit Page Server Load with explicit typing for PageLoad

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

skpsl - SvelteKit Page Server Load with explicit typing for PageServerLoad

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

skll - SvelteKit Page Server Load with explicit typing for LayoutServerLoad and context

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

sklsl - SvelteKit Page Server Load with explicit typing for LayoutServerLoad and context

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

ska - SvelteKit Page Actions

export const actions = {
   async ${1:default}({ $2 }) {
     $3
     return {
       $4
     };
   }
};

skat - SvelteKit Page Actions with explicit typing

export const actions: Actions = {
   async ${1:default}({ $2 }) {
     $3
     return {
       $4
     };
   }
};

svts - Svelte Typescript script tag

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

svdisp - Svelte event dispatcher

const dispatch = createEventDispatcher()
$0

svdispt - Svelte event dispatcher with type annotations

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

svhead - Svelte head tag

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

svfe - Svelte for each

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

svfee - Svelte for each

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

svif - Svelte if

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

svife - Svelte if else

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

svawait - Svelte await

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

svkey - Svelte key

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

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

These snippets do not include required imports. You will need to add them yourself.

MIT