必须在Ctrl+Shift+P中输入“Svelte: Restart Language Server”执行重启,仅Reload Window无效;重启后右下角显示“Svelte language server restarted”才生效,否则$state灰色、export let无类型、{#if}不高亮等问题持续存在。

Ctrl+Shift+P 里搜什么命令才真正重启 Svelte 语言服务
装完 svelte.svelte-vscode 插件后,光 reload window 不够——语言服务器可能还缓存着旧的解析逻辑,导致 $state 灰色、export let 没类型、{#if} 不高亮。
必须手动触发服务重启:
• 按 Ctrl+Shift+P(Mac 是 Cmd+Shift+P)
• 输入 Svelte: Restart Language Server,回车执行
• 等右下角状态栏出现 “Svelte language server restarted” 提示才算生效
• 如果没看到这个命令,说明插件没启用或版本太低(Svelte 5 beta 需 ≥106.0.0)
怎么快速跳转到 .svelte 文件里的 props 定义
VSCode 默认不把 export let 当作可跳转符号,除非你显式声明且文件关联正确:
• 确保右下角状态栏显示的是 Svelte,不是 HTML 或 Plain Text
• export let name: string 才能被索引;写成 let name = 'foo' 就不会出现在父组件传参提示里
• 跳转方式:
– 把光标停在父组件中使用的 prop 名上(如 <Child name="test" /> 中的 name)
– 按 F12 跳转定义,或 Alt+F12 查看定义缩略图
– 若失败,检查 tsconfig.json 是否包含 "include": ["src/**/*"],否则类型服务压根不扫描你的组件
调试时断点打不进 <script> 块?先看 launch.json 里 sourceMapPathOverrides 对不对
Vite 项目默认生成的 sourcemap 路径和 VSCode 调试器预期不一致,断点停在空白行或直接跳过是典型表现:
• launch.json 中必须配置 sourceMapPathOverrides:
"webpack:///src/*": "${webRoot}/src/*"
• 开发服务器必须已运行(npm run dev),再按 F5 启动调试
• 浏览器地址栏必须是 http://localhost:5173,file:// 协议下 sourcemap 无效
• 若用 SvelteKit,确认 svelte.config.js 中 preprocess 调用的是 vitePreprocess(),不是旧版 sveltePreprocess()
格式化 .svelte 文件总出错?prettier-plugin-svelte 必须配对用
直接用 Prettier 格式化 .svelte 文件会破坏结构:删掉 $$props、错乱 <script> 和 <style> 缩进、把 {$count} 当普通文本处理:
• 安装插件:npm install --save-dev prettier prettier-plugin-svelte
• 创建 .prettierrc,内容为:
{"plugins": ["prettier-plugin-svelte"]}
• 在项目级 .vscode/settings.json 中明确指定:
"editor.defaultFormatter": "esbenp.prettier-vscode"
"editor.formatOnSave": true
• 切勿依赖全局 Prettier 设置,不同项目对 svelteSortOrder(比如 scripts-styles-markup)可能有不同要求
最常被忽略的是 svelte.config.js 和 tsconfig.json 的联动:前者决定语言服务是否启动,后者决定类型提示有没有。少一个,export let 就只是字符串,$derived 就只是语法糖,而不是可推导、可跳转、可断点的响应式单元。


















