Svelte开发环境搭建需四步：安装官方VSCode扩展、用create-svelte初始化项目、配置TypeScript支持、集成ESLint与Prettier，最后运行npm run dev验证热重载等功能正常。
如果您希望在 VSCode 中高效开发 Svelte 应用，但尚未配置相关工具链，则可能面临语法高亮缺失、智能提示失效或热重载不可用等问题。以下是完成 Svelte 开发环境搭建的具体步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装 VSCode 核心扩展
VSCode 本身不原生支持 Svelte，需通过官方维护的扩展启用语言服务，包括语法校验、组件跳转、属性提示等功能。
1、打开 VSCode，点击左侧活动栏的扩展图标（或按快捷键 Cmd+Shift+X）。
2、在搜索框中输入 Svelte for VS Code，确保作者为 Svelte（官方认证扩展）。
3、点击“安装”，安装完成后重启 VSCode。
二、初始化 Svelte 项目（使用 create-svelte）
推荐使用官方脚手架 create-svelte 创建标准项目结构，它自动集成 TypeScript、ESLint、Prettier 及 Vite 支持。
1、在终端中执行命令：npm create svelte@latest my-svelte-app。
2、按提示选择项目模板（如 Skeleton project）、是否启用 TypeScript、端到端测试等选项。
3、进入项目目录：cd my-svelte-app，然后运行 npm install 安装依赖。
三、配置 TypeScript 支持（若启用）
当项目启用 TypeScript 时，需确保 VSCode 能正确识别 .svelte 文件中的 TS 类型定义，避免类型报错或提示中断。
1、确认项目根目录存在 tsconfig.json 文件，并已包含 "include": ["src/**/*"] 配置项。
2、在 VSCode 中打开命令面板（Cmd+Shift+P），输入并选择 TypeScript: Select TypeScript Version，切换为工作区版本。
3、在项目根目录创建 svelte.config.js（若不存在），内容包含 preprocess: sveltePreprocess({ sourceMap: true }) 配置。
四、启用 ESLint 与 Prettier（可选但推荐）
统一代码风格并实时检测潜在错误，需将 ESLint 集成至 VSCode 并适配 Svelte 特性。
1、在项目中安装依赖：npm install --save-dev eslint eslint-plugin-svelte3 @typescript-eslint/eslint-plugin。
2、创建 .eslintrc.cjs，配置 extends 为 ["eslint:recommended", "plugin:svelte3/recommended"]。
3、在 VSCode 设置中搜索 eslint.validate，编辑设置项，添加 "svelte" 到验证语言列表中。
五、启动开发服务器并验证环境
完成上述配置后，需实际运行项目以确认语法高亮、保存自动格式化、错误内联提示等功能均正常生效。
1、在终端中执行：npm run dev 启动 Vite 开发服务器。
2、打开浏览器访问 http://localhost:5173，确认页面正常加载。
3、在 VSCode 中打开 src/routes/+page.svelte，修改 h1 标签内容，保存后观察浏览器是否自动刷新并渲染新文本。
