必须只装官方svelte.svelte-vscode插件(发布者sveltejs),卸载所有其他Svelte相关插件;必须配置svelte.config.js(空文件亦可)和tsconfig.json/jsconfig.json;必须重启VSCode后执行“Svelte: Restart Language Server”,三者缺一不可,否则语法高亮、类型提示、断点调试全部失效。

只装 svelte.svelte-vscode,其他带 Svelte 字样的插件全卸载
VSCode 里搜 “Svelte” 会出来一堆插件,但只有 svelte.svelte-vscode(发布者是 sveltejs)是官方维护、同步 Svelte 5+ 语法的唯一可靠选项。装错会导致:$state 灰色、{#if} 不高亮、export let 无类型、断点打不进 <script> 块——全是连锁反应。
常见干扰项包括:Svelte Language Server、Svelte for VS Code (by James Birtles)、SvelteKit IntelliSense。这些不是停更就是抢语言服务器端口,造成补全卡顿、跳转失效、指令提示消失。装完 svelte.svelte-vscode 后必须重启 VSCode,再打开任意 .svelte 文件,右下角状态栏显示 Svelte 才算生效;若显示 HTML 或 Plain Text,右键 → Change Language Mode → 手动选 Svelte 并勾选 Always use Svelte for '.svelte' files。
svelte.config.js 是硬性门槛,空文件也得有
没有 svelte.config.js,VSCode 就不会启用 Svelte 语言服务的完整能力——这不是可选项,是启动开关。哪怕项目不用预处理器或适配器,也得在项目根目录建一个最小可用配置:
{"type":"module"}
/** @type {import('@sveltejs/kit').Config} */
const config = { kit: { adapter: null } };
export default config;改完这个文件后,不能只按 Ctrl+Shift+P → Developer: Reload Window,必须执行 Ctrl+Shift+P → Svelte: Restart Language Server。如果用了 $lib 或自定义别名(如 $components),光有 svelte.config.js 不够,还得在 tsconfig.json 里配 compilerOptions.paths 和 baseUrl。
tsconfig.json / jsconfig.json 决定类型提示有没有
svelte-vscode 插件本身不提供类型推导,它把这事全交给 TypeScript 语言服务。没配好 tsconfig.json,$$Props 报错、“Cannot find name '$state'” 就必然出现。
- TS 项目:确保
tsconfig.json中"include"包含"src/**/*"或明确列出"src/**/*.svelte" - 纯 JS 项目:建
jsconfig.json,内容至少包含:{"compilerOptions": {"allowJs": true,"checkJs": true,"maxNodeModuleJsDepth": 2 },"include": ["src/**/*"] } - 用 SvelteKit 的话,
svelte.config.js中preprocess必须是vitePreprocess(),否则 TS 类型无法注入到<script>块中
Prettier 格式化 .svelte 文件要绕过两个坑
默认情况下,Prettier 对 .svelte 文件无效,直接格式化会破坏 <script> 和 <style> 区块缩进,甚至删掉 $$props 这类特殊变量。
必须同时满足以下三点:
- 项目安装
prettier-plugin-svelte:npm install --save-dev prettier prettier-plugin-svelte -
.prettierrc中显式声明插件:{"plugins": ["prettier-plugin-svelte"]} -
.vscode/settings.json中指定格式器:"editor.defaultFormatter": "esbenp.prettier-vscode",并开启"editor.formatOnSave": true
注意:resolveSourceMapLocations 在 launch.json 中是 Svelte 5+ 调试必需项,漏掉就无法关联 .svelte 原文件和运行时代码——这点容易被忽略,尤其在迁移旧项目时。


















