Svelte 快速上手：用 SvelteKit 和 Vite 搭建项目、编辑器工具与命令行检查

本篇指南基于 Svelte 官方文档 Getting Started 展开，讲解当前 Svelte 5 版本下启动一个新项目的两条主流路径——官方应用框架 SvelteKit 与独立的 Vite + vite-plugin-svelte 方案，并补充编辑器工具链（VS Code 扩展、npx sv check）的使用方式。读完本文，你将能够在本机从零创建一个可运行的 Svelte 项目、理解构建产物的去向，并掌握官方推荐的开发辅助工具。

方式一：使用 SvelteKit 创建项目（官方推荐）

Svelte 团队推荐使用 SvelteKit 来构建应用。它是 Svelte 团队维护的官方应用框架，基于 Vite 驱动，能力上可以覆盖从单页应用到全栈应用的几乎任何场景。如果你还不熟悉 Svelte，完全可以先忽略 SvelteKit 在基础框架之上附加的高级特性，先把核心框架用起来，之后再深入。

创建一个新项目的标准流程如下：

npx sv create myapp
cd myapp
npm install
npm run dev

• npx sv create myapp：通过 sv 命令行工具脚手架生成名为 myapp 的新项目，项目内部会基于 SvelteKit 模板生成路由、入口和配置文件；
• npm install：安装依赖；
• npm run dev：启动开发服务器，进入热更新（HMR）开发模式。

方式二：直接用 Vite + vite-plugin-svelte

如果不想引入 SvelteKit 这套应用框架，也可以让 Svelte 与 Vite 直接配合：

1. 运行 npm create vite@latest，在模板列表中选择 svelte 选项；
2. 如果是在已有项目中集成，则把 @sveltejs/vite-plugin-svelte 插件加入你的 vite.config.js 即可。

本仓库中的在线 playground 就是这一方案的实际范例。playgrounds/sandbox/vite.config.js 展示了最小的 Vite 接入方式：

import { defineConfig } 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [svelte()],
  // ...
});

对应的 playgrounds/sandbox/package.json 中声明了 @sveltejs/vite-plugin-svelte 和 vite 依赖，并提供了 dev、build、ssr 等脚本，其中 build 脚本同时产出客户端（dist/client）与服务端（dist/server）两份产物。

在纯 Vite 方案下，npm run build 会在 dist 目录中生成 HTML、JS 和 CSS 文件。需要注意两点：

• 路由需要自行选择：SvelteKit 自带文件式路由，而纯 Vite 方案没有，大多数情况下还需要额外挑选一个路由库；
• 其他打包器也有对应插件：社区为 Webpack、Rollup 等提供了 Svelte 插件，但官方推荐仍然使用 Vite。

另外，Vite 经常被以独立模式用于构建单页应用（SPA）；如果你更习惯在 SvelteKit 内完成这类工作，SvelteKit 本身也支持构建单页应用形态的项目。

编辑器工具链

写 Svelte 代码时，工具支持能显著提升开发体验：

• VS Code 扩展：Svelte 团队官方维护 Svelte for VS Code 扩展，提供语法高亮、补全、诊断等能力（注意避免安装旧版已停更的 Svelte for VS Code (svelte-vscode) 社区扩展）；
• 其他编辑器：存在针对多种编辑器和工具的社区集成方案，可自行按编辑器查找对应插件；
• 命令行检查：不依赖编辑器时，也可以用 Svelte 官方 CLI 直接做静态检查：

npx sv check

它会结合 TypeScript 对 .svelte 文件和项目中的 TS 代码进行类型与语法检查，适合放进 CI 流程。

补充一点：SvelteKit 项目通常会在仓库根目录放置 svelte.config.js 用于配置编译器选项（本仓库根目录就有一份 svelte.config.js 示例，其中通过 compilerOptions 启用了实验性特性），编辑器扩展会读取该配置以对齐编译行为。

版本与运行环境前提

以当前仓库实际内容为准：

• 核心包 svelte 当前版本为 5.57.0，见 packages/svelte/package.json；
• Node.js 要求 >=18（同上文件的 engines 字段），即至少 Node 18 及以上才能运行编译与运行时；
• Svelte 5 使用 Runes 语法（如 $state、$derived、$effect）管理响应式状态，新项目建议从 Runes 模式入手，旧版语法相关内容可参考 99-legacy 章节。

获取帮助

遇到问题时不必自己硬扛：

• 可以在 Svelte 官方 Discord 聊天室里提问；
• 也可以在 Stack Overflow 上搜索带 svelte 标签的问题，通常已有现成答案。

小结

• 新项目首选 npx sv create myapp 走 SvelteKit 路线，获得路由、SSR 等开箱即用能力；
• 轻量和已有项目集成场景用 npm create vite@latest（选 svelte 模板）或直接安装 @sveltejs/vite-plugin-svelte，构建产物落在 dist；
• 配合官方 VS Code 扩展与 npx sv check 可以覆盖编辑器内与命令行两端的质量检查；
• 环境上确保 Node.js 18 及以上即可开始动手。