Svelte开发在VSCode中高效的关键是精配4个核心插件、对齐svelte.config.js、配置项目级settings.json及调试launch.json。需启用Svelte for VS Code、Prettier、ESLint（含svelte3）、Auto Rename Tag；确保svelte.config.js启用TS等预处理器；.vscode/settings.json设置文件关联、保存格式化与Svelte专属编辑行为；launch.json配置Chrome调试，启动后可在断点调试。
想让 Svelte 开发在 VSCode 里丝滑又高效？关键不是装一堆插件，而是配对核心工具、关掉干扰项、写对配置逻辑。下面这些设置，是经过大量项目验证的实用组合，不花哨，但真管用。
必备插件：只留这 4 个
太多插件反而拖慢编辑器、引发语法高亮冲突。以下 4 个覆盖开发全流程：
-
Svelte for VS Code（官方插件）：提供语法高亮、组件跳转、
和区域智能提示，必须启用； - Prettier：统一代码风格，Svelte 文件默认不支持，需配合配置激活；
-
ESLint（搭配
svelte3插件）：检查逻辑错误和潜在 bug，比如未声明响应式变量、$:表达式副作用； -
Auto Rename Tag：改开标签时自动同步闭标签，写
或
svelte.config.js 要和 VSCode 对齐
VSCode 的 Svelte 插件会读取项目根目录下的 svelte.config.js。如果用了 TypeScript、MDsveX 或自定义预处理器，这里没配对，编辑器就识别不了类型或语法。
常见配置示例（含 TS 支持）：
const config = {
preprocess: [
preprocess({
postcss: true,
typescript: true
})
],
compilerOptions: {
dev: true,
hydratable: true
}
};
配完记得重启 VSCode 窗口（Cmd/Ctrl + Shift + P → “Developer: Reload Window”），否则插件可能仍按默认规则解析。
settings.json 关键项（用户级可选，推荐项目级）
在项目根目录新建 .vscode/settings.json，避免污染全局设置：
{
"files.associations": {
"*.svelte": "svelte"
},
"emeraldwalk.runonsave": {
"commands": [
{
"match": "\\.svelte$",
"cmd": "npm run format"
}
]
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[svelte]": {
"editor.formatOnSave": true,
"editor.suggest.insertMode": "replace",
"editor.quickSuggestions": true
}
}
说明：
-
files.associations确保所有.svelte文件被识别为 Svelte 类型； -
emeraldwalk.runonsave（需装 Run On Save 插件）可触发格式化脚本，适合团队强制风格统一； -
[svelte]块专为 Svelte 文件定制编辑行为，比全局设置更精准。
调试配置：一行命令启动 Dev Server + 断点调试
不用切终端，直接在 VSCode 里 F5 启动并断点调试：
在 .vscode/launch.json 中添加：
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Svelte App",
"url": "http://localhost:5173",
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
前提是你的 Vite/SvelteKit 服务已运行（如 npm run dev）。调试时在 里打断点，变量值、响应式更新都能实时看。
基本上就这些。不复杂但容易忽略——尤其是 svelte.config.js 同步和 .vscode/settings.json 的作用范围。配好后，组件跳转准、报错及时、格式自动、调试顺手，剩下的，就是专注写逻辑了。
