提升Svelte开发体验的VSCode插件配置方案-VSCode-PHP中文网

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

提升svelte开发体验的vscode插件配置方案

只装 svelte.svelte-vscode，其他带 Svelte 字样的插件全卸载

VSCode 里搜 “Svelte” 会出来一堆插件，但只有 svelte.svelte-vscode（发布者是 sveltejs）是官方维护、同步 Svelte 5+ 语法的唯一可靠选项。装错会导致：$state 灰色、{#if} 不高亮、export let 无类型、断点打不进 <script></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。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

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></script> 块中

Prettier 格式化 .svelte 文件要绕过两个坑

默认情况下，Prettier 对 .svelte 文件无效，直接格式化会破坏 <script></script> 和 <style></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 原文件和运行时代码——这点容易被忽略，尤其在迁移旧项目时。