必须安装官方svelte.svelte-vscode插件、配置tsconfig.json含"types": ["svelte"]及svelte.config.js最小配置,并重启ts server和vscode;否则无高亮、$state不提示、格式化报错。

VSCode 默认完全不识别 .svelte 文件,不装插件连基础高亮都没有,更别说 $state、on:click、bind:value 这些语法的着色和补全了。
只装 svelte.svelte-vscode 插件就能有基础高亮
这是唯一被 Svelte 官方团队持续维护的扩展(发布者必须是 sveltejs)。它自带语言服务器,开箱即用支持:<script context="module"></script> 和 <style lang="scss"></style> 的语法分块着色、HTML 标签自动闭合、组件属性提示、$$Props 类型推导框架等。装完必须重启 VSCode(不是重载窗口),然后打开任意 .svelte 文件,看右下角状态栏是否显示 Svelte —— 如果还是 HTML 或 Plain Text,说明没生效。
- 右键文件 → “Change Language Mode” → 输入
svelte回车 - 再点右下角齿轮图标 → “Configure File Association for '.svelte'” → 绑定到
svelte - 禁用所有其他 Svelte 相关插件,尤其是名字带 “IntelliSense”“LS”“Snippets”的第三方扩展,它们会和官方插件冲突,导致 button 元素双色高亮、
let:xxx指令不识别
$state 灰色、export let name: string 没提示?那是 TypeScript 没接上
官方插件只提供语言服务入口,真正做类型推导的是你项目里的 TypeScript。如果 <script lang="ts"></script> 里写 $state 却没颜色、没补全、变量始终灰色,大概率是 tsconfig.json 缺关键配置。
- 确保
"types"包含"svelte":"types": ["svelte", "vite/client"] - 加
"baseUrl": "."和空"paths"占位(哪怕不用别名):"paths": { "$lib/*": ["src/lib/*"] } - JS 项目必须启用
"checkJs": true,否则 JSDoc@type和$state推导全失效 - 改完后务必按
Ctrl+Shift+P→ 输入Restart TS Server执行,否则编辑器缓存不会刷新
格式化一按就报 There is no formatter for 'svelte' files installed
svelte.svelte-vscode 自身不带格式化能力。它只校验语法,不负责排版。想让 <div class:list="{active ? 'on' : 'off'}"> 这种绑定语法不被胡乱换行或删空格,必须靠 <code>Prettier + prettier-plugin-svelte 协同。
- 项目级安装:
npm install --save-dev prettier prettier-plugin-svelte - 根目录加
.prettierrc,至少写:{"plugins": ["prettier-plugin-svelte"]} - VSCode 设置里关掉全局
editor.formatOnSave的默认语言关联,改用:"[svelte]": {"editor.formatOnSave": true} - 别指望装个插件就自动格式化——缺
prettier-plugin-svelte,Shift+Alt+F就会直接失败
svelte.config.js 不是给构建工具看的,VSCode 也在读它
很多用户以为这文件只供 vite 或 svelte-kit 用,其实 svelte.svelte-vscode 和 TypeScript 语言服务都依赖它来加载 compilerOptions 和预处理器配置。没这个文件,import type { ComponentType } from 'svelte'; 就会报“无法找到模块”,$lib/ 路径补全也失灵。
- 最简可用配置必须导出对象:
export default { compilerOptions: { dev: true } }; - 即使不用
kit,也建议加个占位:kit: { adapter: null },否则某些版本插件可能跳过加载 - 改完记得再次
Restart TS Server,不然类型不会更新
最容易被忽略的其实是语言模式绑定和 TS Server 重启这两步——很多人配完 tsconfig.json 就以为完事了,结果 $props 还是报红、补全列表为空,其实只是 VSCode 还在用旧缓存跑。











