Awesome Svelte 5 Snippets 1.1.8

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

代码片段结构：

• Svelte Kit：专为Svelte Kit的TypeScript和路由文件设计的片段（适用于文件级别）。
• Svelte TS：用于在.svelte文件中的<script lang="ts">标签内使用的片段。
• Svelte：用于Svelte模板的片段。

命名约定：

所有代码片段均以sv开头，摒弃了之前区分Svelte和Svelte Kit命令（sv或sk）的做法，以减少记忆负担。

支持Svelte 5 API：

• Runes
• Snippets

您可以在VSCode Marketplace上找到Awesome Svelte Snippets。如有任何bug或反馈，请在Github上创建Issue。

代码片段示例：

Svelte Kit

• svpage - Script

  
  <script lang="ts">
    let { data }$1 = $$props()
  </script>

$0

- **svscript** - Script
```typescript
<script lang="ts">
    let { $1 }: $0 = $$props()
</script>

• svmodule - Script Module

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

• 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
<svelte:head>
    $1
</svelte:head>
$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，感谢原作者的贡献！