VSCode 对 Svelte 支持成熟，官方扩展提供语法高亮、智能补全、错误诊断等核心功能；需配置 jsconfig.json 或 tsconfig.json，推荐使用 SvelteKit 模板并配合 JavaScript Debug Terminal 调试，支持 HMR 与样式增强体验。

VSCode 对 Svelte 的支持已相当成熟，官方推荐的 Svelte for VS Code 扩展提供了语法高亮、智能补全、错误诊断、跳转定义、悬停提示等核心功能，配合合理的配置，能获得接近“开箱即用”的开发体验。

必备扩展与基础配置

安装 Svelte for VS Code（由 Svelte 官方维护）是第一步。它依赖 TypeScript 语言服务，因此项目中需包含 tsconfig.json 或 jsconfig.json。即使写纯 JavaScript，也建议添加 jsconfig.json 并启用 "checkJs": true，以激活类型检查和更准确的自动补全。

• 确保已安装 Node.js 和 npm，Svelte 项目通常通过 npm create svelte@latest 初始化
• 在 VSCode 中打开项目根目录，而非仅打开单个 .svelte 文件，否则语言服务器可能无法正确加载上下文
• 若使用 TypeScript，建议启用 compilerOptions.allowSyntheticDefaultImports 和 moduleResolution: "node"，避免 Svelte 组件导入报错

调试与热重载（HMR）支持

VSCode 原生不直接运行 Svelte 应用，但可通过集成终端或调试配置实现高效调试。推荐使用官方模板（如 svelte-kit）自带的 dev 脚本，配合 VSCode 的 JavaScript Debug Terminal（内置）即可断点调试组件逻辑。

用于自动切换项目中适合的node 版本

根据 package.json 中的 engines 字段自动检测 Node.js 版本需求，未安装 nvm 时自动安装并切换至对应版本。支持 Windows、macOS、Linux。适用于 Node.js 项目开发、版本切换和环境配置。

下载

• 在 src/routes/+page.svelte 或组件中打上断点，启动 npm run dev 后，在浏览器中触发交互，断点会自然命中
• 热更新（HMR）由 Svelte Kit 或 Vite 自动处理，保存文件后 DOM 局部刷新，无需手动刷新页面
• 如需调试服务端逻辑（如 +server.ts），可配置 launch.json 使用 node 调试器，指向构建后的 server 入口

模板与样式增强体验

Svelte 的 <script></script>、<style></style>、<template></template> 三段式结构在 VSCode 中有专门优化。例如：

• <style></style> 块内支持 CSS、PostCSS、SCSS（需额外配置预处理器和插件），类名自动补全可识别 :global() 和 lang="scss" 等修饰
• <script context="module"></script> 和普通 <script></script> 有不同语义，扩展能区分作用域并提供对应提示
• 使用 {$count} 订阅 store 时，悬停可显示 store 类型；{#if}、{#each} 等块级指令支持缩进对齐和折叠

常见问题与绕过技巧

部分场景下语言服务可能滞后或误报，比如动态导入、自定义事件类型、或未导出的内部变量。这时不必硬等修复，可借助简单标注提升体验：

• 为 export let 添加 JSDoc 类型注释，如 /** @type {string} */ export let name;，补全更准
• 在 <script></script> 顶部加 // @ts-check 激活 JS 文件的 TS 检查能力
• 若组件中使用了未声明的属性（如来自父组件的隐式 props），可在 <script></script> 内用 /** @type {any} */ const $props = $$props; 临时绕过类型限制