VSCode怎么配置Svelte项目_VSCode Svelte开发环境与语法高亮设置-VSCode-PHP中文网

必须装svelte.svelte-vscode插件、配svelte.config.js和tsconfig.json/jsconfig.json、重启svelte语言服务器和ts服务器，三者缺一不可；否则.svelte文件被识别为html或纯文本，$state灰色、export let无类型、{#if}不高亮、断点打不进块。

vscode怎么配置svelte项目_vscode svelte开发环境与语法高亮设置

装对插件、配齐两个配置文件、重启对应服务，三者缺一不可；否则 .svelte 文件大概率被识别为 HTML 或纯文本，$state 灰色、export let 无类型、{#if} 不高亮、断点打不进 <script></script> 块——全是连锁反应。

装哪个插件才真正有效

只装 svelte.svelte-vscode（发布者是 sveltejs），其他所有带 “Svelte Language Server”“IntelliSense”“Kit” 字样的扩展全卸载。第三方插件会抢语言服务器端口，导致补全卡顿、跳转失效、指令提示消失。

在扩展面板搜 Svelte for VS Code，认准作者栏显示 sveltejs，不是 James Birtles 等旧维护者
安装后必须重启 VSCode，再打开任意 .svelte 文件，右下角状态栏必须显示 Svelte —— 如果显示 HTML 或 Plain Text，右键文件 → Change Language Mode → 手动选 Svelte，并勾选 Always use Svelte for '.svelte' files
用 Svelte 5 beta 的话，插件版本不能低于 106.0.0，否则 <:component></:component> 语法会被标红

svelte.config.js 是硬性门槛，不是可选项

没有 svelte.config.js，VSCode 就不会启用 Svelte 语言服务的完整能力，export let name: string 的类型推导、$derived 的依赖追踪、bind:this 的 DOM 类型补全，全都会退化成 any。

VSCode

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

下载

哪怕项目不用预处理器或适配器，也得在项目根目录建一个最小可用的 svelte.config.js：

{"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 中 compilerOptions.types 包含 "svelte"，include 覆盖 "src/**/*.svelte"（写 "src/**/*" 最稳妥）

纯 JS 项目：建 jsconfig.json，内容至少含：

{"compilerOptions": {"allowJs": true,"checkJs": true,"maxNodeModuleJsDepth": 2 },"include": ["src/**/*"] }

改完配置后，必须执行 Ctrl+Shift+P → TypeScript: Restart TS Server，否则缓存还在用旧上下文

格式化和调试失败的根源很集中

There is no formatter for 'svelte' files installed 和 “断点打不进 <script></script>” 这两个报错，背后其实都指向同一个缺失项：项目级工具链没接上。

格式化：官方插件不带 formatter，必须装 prettier + prettier-plugin-svelte：
```
npm install --save-dev prettier prettier-plugin-svelte
```
，并在根目录加 .prettierrc，内容至少含 {"plugins": ["prettier-plugin-svelte"]}
调试：Vite 启动后默认断点无效，是因为源码映射路径不匹配。必须在 .vscode/launch.json 的 Chrome 调试配置里加 "resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"]
如果用了 Svelte 5，prettier-plugin-svelte 版本必须 ≥ 3.1.0，否则 <:component></:component> 会被误判为非法标签