Svelte 5 Snippets

Chanzhaoyu
2

svelte 5 and svelte-kit snippets for vscode

Need a Svelte website built?

Hire a professional Svelte developer today.

Svelte 5 Snippets

This extension is a set of Snippets for Svelte. They are created so that scaffolding with Svelte can be easy. You can try to remember most of these.

Snippets Documentation

Prefix	Description
`s-`	Svelte Snippets
`sk-`	Svelte-Kit Snippets

Svelte

s-base

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

<div></div>

<style></style>

s-base-component

<script lang="ts">
  import type { Snippet } from "svelte";

  let { children }: { children: Snippet } = $props();
</script>

<div>{@render children()}</div>

<style></style>

s-script

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

s-style

<style></style>

s-style-global

<style global></style>

s-style-lang

<style lang=""></style>

s-if

{#if }

{/if}

s-if-else

{#if }

{:else}

{/if}

s-if-else-if

{#if }

{:else if }

{:else}

{/if}

s-each

{#each items as item}

{/each}

s-each-else

{#each items as item}

{:else}

{/each}

s-each-index

{#each items as item, i}

{/each}

s-each-index-key

{#each items as item, i (item.id)}

{/each}

s-await

{#await promise}

{:then value}

{:catch error}

{/await}

s-debug

{@debug }

s-html

{@html }

s-snippet

{#snippet name(value)}

{/snippet}

s-slot

<slot></slot>

s-slot-name

<slot name=""></slot>

s-render

{@render }

s-render-fallback

{#if children}
    {@render children()}
{:else}
    <span>default</span>
{/if}

s-bind-value

bind:value={}

s-bind-this

bind:this={}

s-transition-fade

transition:fade="{{delay: 250, duration: 300}}"

s-transition-blur

transition:blur="{{amount: 10}}"

s-transition-fly

transition:fly="{{delay: 250, duration: 300, x: 100, y: 500, opacity: 0.5, easing: quintOut}}"

s-transition-slide

transition:slide="{{delay: 250, duration: 300, easing: quintOut }}"

s-transition-scale

transition:scale="{{duration: 500, delay: 500, opacity: 0.5, start: 0.5, easing: quintOut}}"

s-transition-draw

transition:draw="{{duration: 5000, delay: 500, easing: quintOut}}"

s-animate-flip

animate:flip="{{delay: 250, duration: 250}}"

s-self

<svelte:self></svelte:self>

s-options

<svelte:options />

s-window

<svelte:window  />

s-head

<svelte:head>

</svelte:head>

s-body

<svelte:body  />

Svelte Kit

sk-page

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

  const { data }: { data: PageData } = $props();
</script>

sk-page-load

import type { PageLoad } from "./$types";

export const load: PageLoad = async (event) => {
  return {};
};

sk-page-params

<script lang="ts">
  import { page } from "$app/stores";

  const { id } = $page.params;
</script>

sk-page-server-load

import type { PageServerLoad } from "./$types";

export const load: PageServerLoad = async (event) => {
  return {};
};

sk-layout-load

import type { LayoutLoad } from "./$types";

export const load: LayoutLoad = async (event) => {
  return {};
};

sk-layout-server-load

import type { LayoutServerLoad } from "./$types";

export const load: LayoutServerLoad = async (event) => {
  return {};
};

sk-actions

import type { Actions } from "./$types";

export const actions: Actions = {
  async default() {},
};

sk-hooks

import type { Handle } from "./$types";

export const handle: Handle = async ({ event, resolve }) => {
  const response = await resolve(event);
  return response;
};

sk-json

json({ data: "" }, { status: 200 });

sk-error

error(404, { message: "Not found" });

sk-api-get

import type { RequestHandler, RequestEvent } from "./$types";
import { json } from "@sveltejs/kit";

export const GET = (async ({ request }: RequestEvent) => {
  return json({ message: "GET" });
}) satisfies RequestHandler;

sk-api-post

import type { RequestHandler, RequestEvent } from "./$types";
import { json } from "@sveltejs/kit";

export const POST = (async ({ request }: RequestEvent) => {
  return json({ message: "POST" });
}) satisfies RequestHandler;

sk-api-put

import type { RequestHandler, RequestEvent } from "./$types";
import { json } from "@sveltejs/kit";

export const PUT = (async ({ request }: RequestEvent) => {
  return json({ message: "PUT" });
}) satisfies RequestHandler;

sk-api-delete

import type { RequestHandler, RequestEvent } from "./$types";
import { json } from "@sveltejs/kit";

export const DELETE = (async ({ request }: RequestEvent) => {
  return json({ message: "DELETE" });
}) satisfies RequestHandler;

sk-api-patch

import type { RequestHandler, RequestEvent } from "./$types";
import { json } from "@sveltejs/kit";

export const PATCH = (async ({ request }: RequestEvent) => {
  return json({ message: "PATCH" });
}) satisfies RequestHandler;

sk-browser

import { browser } from "$app/environment";

if (browser) {
}

sk-env-private

import { env } from "$env/dynamic/private";

sk-env-public

import { env } from "$env/static/public";

TypeScript / JavaScript

s-state

let state = $state();

s-state-frozen

let state = $state.frozen();

s-state-snapshot

$state.snapshot();

s-state-is

$state.is(state1, state2);

s-derived

const value = $derived();

s-derived-by

const value = $derived.by(() => {});

s-effect

$effect(() => {});

s-effect-pre

$effect.pre(() => {});

s-effect-tracking

$effect(() => {
  console.log("in effect:", $effect.tracking());
});

s-effect-root

const cleanup = $effect.root(() => {
  $effect(() => {});

  return () => {};
});

s-computed

let value = $state("");

let valueComputed = {
  get value() {
    return value;
  },
  set value(newValue) {
    value = newValue;
  },
};

s-props

interface Props {}

let {} = $props();

s-host

$host().dispatchEvent();

s-flush-sync

flushSync(() => {});

s-hook

export function useCounter() {
  let count = $state(0);

  function increment() {
    count += 1;
  }

  return {
    get count() {
      return count;
    },
    set count(newValue) {
      count = newValue;
    },
    increment,
  };
}

s-store

import { writable } from "svelte/store";

export function createCounter() {
  const { subscribe, update } = writable(0);

  function increment() {
    update((count) => count + 1);
  }

  return {
    subscribe,
    increment,
  };
}

s-set-context

setContext("key", "value");

s-get-context

const context = getContext("key");

s-has-context

if (hasContext("key")) {
}

Css

s-css-global

:global() {
}

License

MIT

Top categories

Need a Svelte website built?

Hire a professional Svelte developer today.