Svelte开发在VSCode丝滑的关键是精准配置语法高亮、类型检查、智能补全、保存即格式化四大核心能力，仅需4个插件协同并正确设置settings.json与tsconfig.json即可。
想让 Svelte 开发在 VSCode 里丝滑到飞起？关键不是装一堆插件，而是精准配置核心工具链——语法高亮、类型检查、智能补全、保存即格式化，四者缺一不可。下面这套方案经过多个真实项目验证，轻量、稳定、开箱即用。
必备插件：只装这 4 个，别多装
插件不在多，在于协同。以下 4 个是真正影响日常编码体验的底线配置：
-
Svelte for VS Code（官方插件）：提供语法高亮、组件跳转、
<script>和<style>区域内语言识别；必须启用“Svelte: Enable Snippets”和“Svelte: Enable Language Server” -
ESLint（由 eslint-plugin-svelte3 或 svelte-eslint 支持）：搭配
svelte3解析器，能校验{#if}语法、响应式声明、$:语句等 Svelte 特有逻辑 -
Prettier：统一格式化 HTML/JS/CSS 混合块，需额外安装
prettier-plugin-svelte才能正确处理<template>内嵌结构 -
TypeScript + TS Server：即使写 JS 项目也建议开启，Svelte 的
$$props、$$restProps、$$slots类型推导全靠它撑腰
关键配置：settings.json 里这几行不能少
直接复制进工作区或用户设置（推荐工作区级），避免全局污染：
{
"svelte.plugin.svelte.format.enable": true,
"svelte.plugin.typescript.autoInitialize": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"[svelte]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.suggest.insertMode": "replace"
},
"prettier.plugins": ["prettier-plugin-svelte"],
"eslint.validate": ["svelte"]
}
注意："eslint.validate" 必须显式包含 "svelte"，否则 ESLint 不会扫描 .svelte 文件；"[svelte]" 块确保 Svelte 文件专属格式行为独立生效。
类型支持进阶：tsconfig.json 要加这两项
哪怕项目是纯 JavaScript，只要用了 svelte-preprocess 或 Vite + @sveltejs/vite-plugin-svelte，就该配好 tsconfig.json：
-
"compilerOptions.types"加上"svelte"，让 TS 服务器识别$:声明和$$运行时变量 -
"include"至少覆盖src/**/*和src/**/*.svelte，否则组件内脚本可能被跳过类型检查
如果用的是 SvelteKit，默认生成的 tsconfig.json 已含这些，但老项目迁移时容易漏掉。
调试与热重载：不用额外配置，但得知道怎么触发
VSCode 自带的 Debugger（Launch via Chrome / Edge）对 SvelteKit 项目开箱即用：
- 运行
npm run dev后，在任意.svelte文件打个断点，刷新页面即可命中 - 修改
<script>或<style>内容，保存后 HMR 自动生效；改<template>有时需手动刷新，属正常行为 - 如遇断点不触发，检查是否启用了
"svelte.plugin.sourcemaps.enabled": true（默认已开）
基本上就这些。不复杂但容易忽略——尤其是 eslint.validate 和 prettier.plugins 这两处。配完重启 VSCode，打开一个 .svelte 文件，看有没有智能提示、保存是否自动格式化、报错是否准确定位到 {#each} 里某一行……都 OK 就算成了。
