必须在 tsconfig.json 中添加 "types": ["svelte", "@sveltejs/kit"] 并在 svelte.config.js 中设置 compilerOptions.dev = true,否则 $state 等符号因类型未注入而报错;改配置后须执行 Svelte: Restart Language Server。

装了 Svelte for VS Code(Beta)但 $state、$derived 报错,或 $$Props 提示 “Cannot find name”,不是插件装错了,而是 TypeScript 语言服务没加载 Svelte 5 的运行时类型定义——必须显式启用 @sveltejs/kit 类型桥接。
为什么 $state 在 .svelte 文件里标红?
Svelte 5 的响应式声明($state、$derived、$effect)不是运行时全局变量,而是由编译器注入的类型别名,需通过 @sveltejs/kit 提供的 ambient.d.ts 注入到 TS 全局作用域。VSCode 默认只加载项目级 tsconfig.json,不自动识别 Svelte 运行时类型。
- 确保已安装
@sveltejs/kit(SvelteKit 项目默认包含;纯 Svelte 5 项目需手动npm install --save-dev @sveltejs/kit) - 检查
tsconfig.json中是否包含"types": ["svelte", "@sveltejs/kit"](缺@sveltejs/kit就不会加载$相关类型) - 删掉
node_modules/.vite和node_modules/.svelte-kit后重装依赖,避免旧缓存干扰类型解析
svelte.config.js 必须启用 compilerOptions.dev
Svelte 5 的类型推导在开发模式下才完整暴露 $ 符号的类型信息。若 svelte.config.js 中未设 dev: true,VSCode 插件会退回到“仅语法校验”层级,导致 $state 被当作未声明变量。
- 确认
svelte.config.js中compilerOptions存在且dev为true:
export const config = {
preprocess: vitePreprocess(),
compilerOptions: {
dev: true
}
};
- 如果用的是
svelte@5.0.0-next.*,插件版本必须 ≥106.0.0;旧版插件无法解析新语法树结构 - 改完配置后,必须执行
Cmd+Shift+P→Svelte: Restart Language Server,仅 Reload Window 不生效
ESLint 或 TypeScript 插件误报 $ 相关错误
ESLint 默认解析器(如 @typescript-eslint/parser)不认识 $state,会直接报 Unexpected token $;TypeScript 插件若未读取 svelte.config.js,也会在 $$Props 上标红。
- 在
.eslintrc.cjs中强制指定 Svelte 解析器:
module.exports = {
parser: 'svelte-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser'
},
plugins: ['svelte'],
rules: {
'svelte/valid-compile': 'error'
}
};
- 确保已安装
svelte-eslint-parser和eslint-plugin-svelte(注意不是eslint-plugin-svelte3) - VSCode 设置中关闭
eslint.experimental.useFlatConfig(Svelte 5 当前不兼容 ESLint v9 的 flat config)
最常被忽略的一点:Svelte 5 的类型支持高度依赖 svelte.config.js 和 tsconfig.json 的协同,二者缺一不可;单独配对任一文件,都只会让部分功能“半生效”。重启语言服务器不是可选项,是每次改完配置后的必要动作。


















