编辑器与工具

好的工具链能让 Svelte 5 开发事半功倍。本章介绍编辑器、语言服务、以及配套生态。

编辑器支持

VS Code（首选）

安装官方扩展 Svelte for VS Code（发布者 svelte，扩展 ID svelte.svelte-vscode）。

它提供：

• .svelte 文件的语法高亮
• 智能补全、类型提示、错误诊断
• 对 Runes（$state、$derived 等）的完整支持
• 格式化（配合 Prettier）

在扩展市场搜索 "Svelte" 安装即可。

TIP

安装后，把 .svelte 文件的默认格式化器设为 Svelte 扩展，保存时自动格式化：

// .vscode/settings.json
{
  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },
  "editor.formatOnSave": true
}

JetBrains 系列

IntelliJ IDEA / WebStorm 2023.3+ 内置了 Svelte 支持，确保启用了 Svelte 插件即可。

其他

Neovim、Helix、Sublime Text 等都有社区维护的 Svelte 语言支持，底层都依赖同一个 svelte-language-server。

Svelte 语言服务

编辑器背后的智能来自 svelte-language-server。它随 VS Code 扩展一起提供，通常无需单独安装。

它负责：

• 解析 .svelte 单文件组件
• 提供 TypeScript 类型信息
• 报告 Runes 使用错误（例如在错误的位置使用 $state）

TypeScript 支持

Svelte 5 原生支持 TypeScript，无需预处理器。

在 .svelte 文件里直接用 lang="ts"：

<script lang="ts">
  // 给状态加类型
  let count: number = $state(0);

  // 给 props 加类型
  interface Props {
    name: string;
    age?: number;
  }
  let { name, age = 18 }: Props = $props();
</script>

<p>{name} 今年 {age} 岁，计数 {count}</p>

Svelte 5 的 $props() 用解构语法声明，类型直接标注在解构表达式上，非常直观。

INFO

vitePreprocess() 已经在 svelte.config.js 中启用，它让 <script lang="ts">、以及样式里的 PostCSS 都能正常工作。Vite/SvelteKit 模板默认已配置好。

官方工具生态

工具	作用
sv	Svelte 5 官方 CLI，创建项目、添加集成（sv add）
SvelteKit	全栈应用框架（路由、SSR、加载数据）
Vite	底层构建工具，开发服务器与打包
Vitest	单元/组件测试
Playwright	端到端测试
svelte-check	CI 中检查类型与编译错误

用 sv 添加功能

在项目里可以用 sv add 快速集成常用能力：

npx sv add tailwindcss   # 添加 Tailwind CSS
npx sv add eslint        # 添加 ESLint
npx sv add prettier      # 添加 Prettier
npx sv add vitest        # 添加测试
npx sv add playwright    # 添加 E2E 测试

调试

• 浏览器 DevTools：Svelte 组件正常出现在 Elements 面板，可直接调试。
• $effect 日志：用 $effect 打印响应式变化（本站的待办示例就在控制台输出）。
• svelte-check：命令行运行 npx svelte-check 做全量类型/编译检查，适合放进 CI。

npx svelte-check --tsconfig ./tsconfig.json

下一步

工具就绪后，让我们正式进入核心概念：$state 状态。