Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>Svelte SnippetsNew to Visual Studio Code? Get it now.
Svelte Snippets

Svelte Snippets

Jakob Kruse

|
1,500 installs
| (0) | Free
Snippets for Svelte and Svelte-Kit
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Svelte Snippets

Snippets for Svelte and Svelte-Kit (using TypeScript)

Snippets

SVELTE KIT

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
     };
   }
};

SVELTE

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

Note

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.

License

MIT

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft