Awesome Svelte 5 Snippets 是为VSCode设计的一套高效、易记的Svelte和Svelte-Kit代码片段集合，专为使用TypeScript的开发者打造。通过利用类型推断功能，这些代码片段避免了不必要的类型导入，使您的开发流程更加流畅。

代码片段结构：

• Svelte Kit：专为Svelte Kit的TypeScript和路由文件设计的片段（适用于文件级别）。
• Svelte TS：用于在.svelte文件中的

$0

- **svscript** - Script
```typescript

• svmodule - Script Module

• svload - Load

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

• svactions - Actions

  export const actions = {
    ${1:default}: async (${2:event}) => {
        $3
    }
  }

• svhooks - Hooks

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

Svelte TS

• svstate - 创建状态变量

  let ${1:variable} = $$state(${2:initialValue});

• svderived - 创建派生变量

  let ${1:variable} = $$derived(${2:expression});

• sveffect - 创建Rune效果，包括清理操作

  $$effect(() => {
    $$inspect(${1:variable});
  
    return () => {
        console.log("cleanup");
    }
  });

• svprops - 添加组件属性

  let ${1:props}:$0 = $$props();

• svinspect - 检查变量

  $$inspect(${0:variable});

Svelte

• svdispatch - 事件调度器

  
  import { createEventDispatcher } from 'svelte';

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

- **svhead** - Head标签
```html

    $1

$0

• svforeach - For Each循环

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

• svforeachelse - For Each Else循环

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

• svif - If条件

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

• svifelse - If Else条件

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

• svifelseif - 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

注意事项：

代码片段中包含"$1", "$2"...等占位符，代表光标位置，您可以使用Tab键在它们之间跳转。

许可证：

MIT

致谢：

本项目Fork自svelte-snippets，感谢原作者的贡献！