必须安装官方 svelte for vs code 插件(发布者 sveltejs),并搭配 prettier + prettier-plugin-svelte 实现格式化,ts 项目还需配置 svelte.config.js 并重启 ts server。

安装 Svelte 官方插件是唯一可靠方式
VSCode 默认不识别 .svelte 文件,语法高亮、标签闭合、属性补全全都没戏。别试“通用 HTML 插件”或“Vue 扩展”,它们对 Svelte 的 <script context="module"></script> 或 <style lang="scss"></style> 基本无效。
必须装官方维护的 Svelte for VS Code(作者:sveltejs)。它不只是加高亮,还内嵌了 Svelte 编译器(svelte/compiler)做实时语法校验——比如你写错 {#if user.name} 里的 user 类型,它真能报出来。
- 在扩展市场搜
Svelte for VS Code,认准发布者是sveltejs(不是James Birtles那个旧版) - 装完重启 VSCode,不用额外配置,默认就启用
- 如果项目用的是
svelte@5beta,确保插件版本 ≥ 106.0.0,否则<:component></:component>语法会标红
格式化必须靠 Prettier + Svelte 插件协同
只装 Svelte 插件,Shift+Alt+F 格式化会失败,报错 There is no formatter for 'svelte' files installed。Svelte 插件本身不带格式化能力,它依赖外部工具链。
正确做法是:Prettier 作为主格式器,再装 Prettier Plugin Svelte 桥接。缺任何一个,<div class:list="{active ? 'on' : 'off'}"> 这种绑定语法就会被胡乱换行或删空格。
<ul>
<li>全局或项目级安装:<code>npm install --save-dev prettier prettier-plugin-svelte
.prettierrc,至少包含:{"plugins": ["prettier-plugin-svelte"]}
editor.formatOnSave 的默认语言关联,改用 "[svelte]": {"editor.formatOnSave": true}
TS + Svelte 项目需额外配 svelte.config.js
如果你的 .svelte 文件里写了 <script lang="ts"></script>,但类型提示还是灰色、$state 不识别、$$Props 报错——大概率是 VSCode 没读到你的 Svelte 配置,TypeScript 语言服务卡在默认模式。
svelte.config.js 不只是给构建工具看的,Svelte 插件和 TS 服务器都靠它定位 compilerOptions 和 preprocess 流程。没这个文件,import type { ComponentType } from 'svelte'; 就算路径对,也会提示“无法找到模块”。
- 最小可用配置必须导出
const config = { ... }并export default config - 哪怕不用预处理器,也得写上
kit: { adapter: null }占位,否则插件可能跳过加载 - 改完记得在 VSCode 里按
Ctrl+Shift+P→Restart TS Server,不然类型不会刷新
常见错误:保存后格式化失效或高亮闪退
现象是:刚打开文件高亮正常,改两行就变白板;或者保存时弹窗说 Failed to format document。这通常不是插件坏了,而是工作区配置冲突或缓存错乱。
VSCode 对多根工作区(workspace)里的 Svelte 配置特别敏感。比如你开了两个文件夹,其中一个没 svelte.config.js,另一个有,TS 服务器可能随机选错上下文,导致类型系统崩溃。
- 先检查状态栏右下角语言模式是不是
Svelte,不是就点它手动切过去 - 关掉所有其他 Svelte 相关插件(尤其
Svelte Beta、Svelte Intellisense),留官方一个 - 删掉项目根目录的
.vscode/和node_modules/.vite/(如果有),重装依赖再重启
最麻烦的情况是用了 vite-plugin-svelte 的自定义 preprocess,比如把 .svx 当 Svelte 处理——这时必须在 svelte.config.js 里显式声明 extensions: ['.svelte', '.svx'],否则插件根本不知道该不该处理那个文件。











