必须安装官方svelte-vscode插件、正确配置svelte.config.js和tsconfig.json,并手动将.svelte文件语言模式设为svelte,三者缺一不可;否则语法高亮、类型提示及调试均失效。

装对扩展、配对配置、确认语言模式,三步到位。其他花哨操作全是干扰项,反而导致补全失效或类型报错。
安装 Svelte for VS Code 扩展后状态栏仍显示 HTML
这是最常见但被忽略的起点问题:VSCode 没把 .svelte 文件当 Svelte 处理,后续所有提示、跳转、类型检查都会断掉。
- 点击右下角语言模式(如显示
HTML),选择Svelte;再点右侧齿轮图标 →Configure File Association for '.svelte',绑定到svelte - 如果绑定了还反复回退,检查是否装了冲突扩展(如
Svelte Language Server或Svelte Intellisense)——卸载它们 - 确保项目根目录存在
svelte.config.js(哪怕内容为空),否则官方插件可能拒绝激活语言服务
svelte.config.js 与 VSCode 类型提示不生效的关联
VSCode 的 Svelte 插件会读取 svelte.config.js 来决定如何预处理脚本块。没配或配错,export let name: string 后面就不会有类型推导,$: 表达式也不识别响应式依赖。
- 若用 TypeScript,配置中必须启用
preprocess,例如:preprocess: sveltePreprocess({ typescript: true })(需先npm install -D svelte-preprocess) - 若用 SvelteKit,则应使用
vitePreprocess(),并确保已安装@sveltejs/kit - 改完
svelte.config.js后,必须执行Cmd+Shift+P→Svelte: Restart Language Server,不能只靠重启窗口
tsconfig.json 配置错误导致 $lib 路径和组件类型不识别
即使装了插件、写了 svelte.config.js,import Component from '$lib/Component.svelte' 还是标红?大概率是 TypeScript 没认出 $lib 别名,或没加载 svelte 类型定义。
-
tsconfig.json中compilerOptions.types必须包含"svelte",否则$state、$derived等全局类型不可见 - 要支持
$lib,需在compilerOptions.baseUrl和paths中显式声明:"$lib/*": ["src/lib/*"] - 确认
include包含"src/**/*",否则.svelte文件里的<script></script>块不会被 TS 服务扫描
调试时断点进不了 <script></script> 块
不是代码写错了,而是调试器没对齐源码映射。Vite 默认生成 sourcemap,但 VSCode 不一定自动识别 .svelte 文件中的 JS 区域。
- 确保
launch.json中sourceMapPathOverrides正确映射(SvelteKit 项目常用:"webpack:///src/*": "${webRoot}/src/*") - 检查开发服务器是否运行在
http://localhost:5173(Vite 默认端口),url字段必须完全匹配 - 不要用 Live Server 插件调试逻辑——它不走 Vite 构建流程,无 sourcemap,断点必然失效
真正卡住人的从来不是“怎么装”,而是 svelte.config.js 和 tsconfig.json 两份配置没对齐,加上语言模式没手动绑定。这三者只要一个错位,整个开发体验就退回石器时代。











