必须装官方svelte-vscode插件、手动将.svelte文件语言模式设为Svelte、配置tsconfig.json含"types": ["svelte"]及"include": ["src/*/"],三者缺一不可;否则仅HTML假高亮,$state不可推导,on:click不补全,bind:value类型标any。

装对插件、设对语言模式、配对 tsconfig.json,三者缺一不可;否则你看到的所谓“高亮”,只是 HTML 的假高亮,$state 灰色不可推导、on:click 不补全、bind:value 类型标 any,全是配置没落到位的表现。
VSCode 为什么打开 .svelte 文件还是 HTML 高亮
根本原因:VSCode 没把文件当 Svelte 处理,后续所有语言服务都断链。这不是插件没装,而是没激活。
- 点击右下角状态栏语言模式(显示为
HTML或Plain Text),手动选Svelte - 点右侧齿轮图标 →
Configure File Association for '.svelte'→ 绑定到svelte - 如果绑定后仍反复回退,大概率是装了冲突扩展(如
ardenivanov.svelte-intellisense或旧版Svelte Language Server),直接卸载它们 - 确认项目根目录存在空的
svelte.config.js(哪怕只写export default {};),官方插件会据此决定是否启用完整语言服务
语法高亮有了但 $state / $props 没提示
这是 TypeScript 服务没接管 .svelte 文件的典型信号。Svelte 插件只搭桥,类型推导靠 TS 自己干活。
-
tsconfig.json中必须有:"types": ["svelte"](否则$props、$$Props全报错) - 确保
"include"包含"src/**/*.svelte"或宽泛的"src/**/*" - JS 项目没
tsconfig.json?建一个jsconfig.json,至少含:{"compilerOptions": {"allowJs": true, "checkJs": true}} - 改完配置后,必须执行
Ctrl+Shift+P→ 输入Restart TS Server,不能只重载窗口
格式化报错 “There is no formatter for 'svelte' files installed”
svelte.svelte-vscode 插件本身不提供格式化能力,它只负责解析。格式化得靠 prettier + prettier-plugin-svelte 链路打通。
- 项目级安装:
npm install --save-dev prettier prettier-plugin-svelte - 根目录加
.prettierrc,内容至少为:{"plugins": ["prettier-plugin-svelte"]} - VSCode 设置中禁用全局默认格式器,在
settings.json加:"[svelte]": {"editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode"} - 别用
svelte.svelte-vscode当默认格式器——它不支持,会直接失败
组件预览要能点开就看效果,不是靠猜
VSCode 本身不运行 Svelte,所谓“预览”依赖外部服务。最轻量可靠的方案是搭配 Vite 启动开发服务器,并用 Live Server 插件做快速 HTML 预览(仅限非 SSR 场景)。
- 确保已用
npm create vite@latest myapp -- --template svelte初始化项目 - 运行
npm run dev,服务默认在http://localhost:5173 - 若想单文件快速预览(比如
App.svelte独立查看),可装ritwickdey.LiveServer插件,但需先手动建一个带<script src="./App.svelte"></script>的index.html(注意:Svelte 组件不能直接被浏览器加载,必须经编译) - 真要调试交互逻辑,断点必须打在
<script>块里——这又回到launch.json中resolveSourceMapLocations的配置,漏掉就进不去
最容易被忽略的是:每次改完 svelte.config.js 或 tsconfig.json,VSCode 不会自动重载语言服务。你得亲手按 Ctrl+Shift+P → Restart TS Server 或 Svelte: Restart Language Server,否则所有改动都是静默失效。


















