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 type { 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 '@sveltejs/kit';
export const handle: Handle = async ({ event, resolve }) => {
$1
return resolve(event);
};
skhhjs - Hooks: HandleFetch (JavaScript)
/** @type {import('@sveltejs/kit').Handle} */
export const handle = async ({ event, resolve }) => {
$1
return resolve(event);
};
skhf - Hooks: HandleFetch (Typescript)
import type { HandleFetch } from '@sveltejs/kit';
export const handle: HandleFetch = async ({ request, fetch }) => {
$1
return resolve(request);
};
skhfjs - Hooks: HandleFetch (JavaScript)
/** @type {import('@sveltejs/kit').HandleFetch} */
export const handle = async ({ request, fetch }) => {
$1
};
skhe - Hooks: Handle Error (TypeScript)
import type { HandleError } from '@sveltejs/kit';
export const handle: HandleError = async ({ error, event }) => {
$2
};
skhejs - Hooks: Handle Error (JavaScript)
/** @type {import('@sveltejs/kit').HandleError} */
export const handle = async ({ error, event }) => {
$1
};
skreq - No description
import type { RequestHandler } from './\$types';
export const GET = (async ({ $1 }) => {
$2
return new Response('Ok', { status: 200 });
}) satisfies RequestHandler;
SVELTE SCRIPT TAG
sv5prjs - : Props (JavaScript)
let { $2 } = \$props()
sv5pr - : Props (TypeScript)
type Props = {
$1
};
let { $2 }: Props = \$props()
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
SVELTE TEMPLATE
svcomp - Component (TypeScript)
<script lang="ts">
$1
</script>
$0
svcompjs - Component (JavaScript)
<script>
$1
</script>
$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
