Svelte Snippets

Snippets for Svelte and Svelte-Kit (using TypeScript)

VSCode Marketplace

Snippets

SVELTE KIT

skpage - Page (TypeScript)

<script lang="ts">
   import type { PageData } from './\$types';

   export let data: PageData;
   $1
</script>

$0

skpagejs - Page (JavaScript)

<script>
   /** @type {import('./\$types').PageData} */
   export let data;
   $1
</script>

$0

skpl - Page Load (TypeScript)

import type { PageLoad } from './\$types';

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

skpljs - Page Load (JavaScript)

/** @type {import('./\$types').PageLoad} */
export const load = async (${1:event}) => {
   $2
   return {
     $0
   };
};

skpsl - Page Server Load (TypeScript)

import type { PageServerLoad } from './\$types';

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

skpsljs - Page Server Load (JavaScript)

/** @type {import('./\$types').PageServerLoad} */
export const load = async (${1:event}) => {
   $2
   return {
     $0
   };
};

skll - Layout Load (TypeScript)

import type { LayoutLoad } from './\$types';

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

skll - Layout Load (JavaScript)

/** @type {import('./\$types').LayoutLoad} */
export const load = async (${1:event}) => {
   $2
   return {
     $0
   };
};

sklsl - Layout Server Load (TypeScript)

import type { LayoutServerLoad } from './\$types';

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

sklsljs - Layout Server Load (JavaScript)

/** @type {import('./\$types').LayoutServerLoad} */
export const load = async (${1:event}) => {
   $2
   return {
     $0
   };
};

ska - Page Actions (TypeScript)

import { Actions } from './\$types';

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

skajs - Page Actions (JavaScript)

/** @type {import('./\$types').Actions} */
export const actions = {
   async ${1:default}({ $1 }) {
     $2
   }
};

skhh - Hooks: Handle (TypeScript)

import type { Handle } from './\$types';

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

skhhjs - Hooks: Handle (JavaScript)

/** @type {import('./\$types').Handle} */
export const handle = async ({ event, resolve }) => {
   $1
   return resolve(event);
};

skhf - Hooks: HandleFetch (Typescript)

import type { HandleFetch } from './\$types';

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

skhfjs - Hooks: HandleFetch (JavaScript)

/** @type {import('./\$types').HandleFetch} */
export const handle = async ({ request, fetch }) => {
   $1
};

skhe - Hooks: Handle Error (TypeScript)

import type { HandleError } from './\$types';

export const handle: HandleError = async ({ error, event }) => {
   $2
};

skhejs - Hooks: Handle Error (JavaScript)

/** @type {import('./\$types').HandleError} */
export const handle = async ({ error, event }) => {
   $1
};

SVELTE

svcomp - Component (TypeScript)

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

$0

svcompjs - Component (JavaScript)

<script>
   $1
</script>

$0

svdisp - Event Dispatcher

import { createEventDispatcher } from 'svelte';

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

svdispjs - Event Dispatcher (JavaScript)

import { createEventDispatcher } from 'svelte';

const dispatch = createEventDispatcher()
$0

svhead - Head Tag

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

svfe - For Each

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

svfee - For Each else

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

svif - If

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

svife - If Else

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

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