VSCode是开发Svelte项目的首选编辑器，需安装官方Svelte插件、配置svelte.config.js、搭配Prettier/ESLint等插件，并配置launch.json和tasks.json以支持调试与任务集成。
vscode 是开发 svelte 项目的首选编辑器，轻量、插件丰富、对 svelte 原生支持好。关键在于装对插件、配好配置、用对工具链。
Svelte 官方插件必须安装
在扩展市场搜索并安装 Svelte for VS Code（官方维护，图标是橙白 Svelte 标志）。它提供语法高亮、组件跳转、属性提示、错误实时校验、<script> 和 <style> 区域智能补全等功能。不装这个，Svelte 文件会像纯文本一样没提示、没检查。
- 安装后重启 VSCode 或重新打开 Svelte 文件生效
- 确保项目根目录下有
svelte.config.js（哪怕内容为空），插件才能正确识别项目配置 - 如果提示 “Cannot find module 'svelte'”，检查是否已运行
npm install或pnpm install
推荐搭配的实用插件
提升效率和体验的几个高频插件：
-
Prettier：统一代码格式，配合 Svelte 插件可自动格式化
.svelte文件 -
ESLint + eslint-plugin-svelte3（或新版
eslint-plugin-svelte）：做代码质量检查，比如响应式声明遗漏、未使用的变量等 -
Auto Rename Tag：重命名开标签时自动同步闭标签，对
<div>...</div>和自定义组件都有效 - Import Cost：在 import 行末显示模块体积估算，方便关注包大小
调试 Svelte 应用要配 launch.json
VSCode 默认不支持直接调试 Svelte（它编译为 JS 运行在浏览器中），需借助 Debugger for Chrome 或 Edge 插件，并配置 .vscode/launch.json：
- 启动 dev server（如
npm run dev）后，再启动调试配置 - 典型配置指向
http://localhost:5173（Vite 默认端口），断点可打在<script>中，支持源码映射（source map） - Vite 项目建议启用
"resolveSourceMapLocations": ["${workspaceFolder}/**"]避免断点错位
终端与任务集成让开发更顺滑
不用切窗口跑命令：VSCode 内置终端可直接执行 Svelte 开发常用任务。
- 用
Ctrl+Shift+P→ “Tasks: Run Task” 快速启动dev、build、preview - 在
.vscode/tasks.json中预定义脚本，例如自动监听保存并重载（配合 Vite 的 HMR） - 开启“在专用终端中运行”避免多个任务混在一起，提高可读性
基本上就这些。环境搭好后，写组件、改状态、看热更新，整个流程非常顺。不复杂但容易忽略的是配置文件和插件协同——少一个，就可能失去跳转、报错或断点能力。
