SvelteKit自动生成的$types模块无WebStorm智能提示求解

检查Svelte插件版本 #

• 确保WebStorm中安装的Svelte插件为最新版本，旧版本可能对SvelteKit自动生成的类型支持不足。通过Settings > Plugins找到Svelte插件，点击「Update」完成更新。

配置TypeScript关联设置 #

• 打开Settings > Languages & Frameworks > TypeScript，将TypeScript版本设置为项目本地的TypeScript（即node_modules/typescript），而非WebStorm内置版本，以此兼容SvelteKit的类型生成逻辑。
• 勾选Enable TypeScript compiler和Use tsconfig.json from project选项，让IDE严格遵循项目的TypeScript配置规则。

手动触发类型生成与IDE重载 #

• 手动执行SvelteKit的类型生成命令，确保./$types文件为最新状态：

  npm run build -- --types
  # 若使用pnpm或yarn
  pnpm build --types
  yarn build --types
  

• 执行完成后，右键点击项目根目录，选择「Reload from Disk」，让WebStorm重新读取生成的类型文件。

验证tsconfig.json配置 #

• 确认项目的tsconfig.json包含SvelteKit推荐配置，尤其是include字段需覆盖自动生成的类型文件：

  {
    "extends": "./.svelte-kit/tsconfig.json",
    "include": ["src/**/*", ".svelte-kit/**/*"],
    "compilerOptions": {
      // 项目自定义配置
    }
  }
  

  必须继承.svelte-kit/tsconfig.json，它包含了自动生成类型的路径映射规则。

清除IDE缓存 #

• 若上述方法无效，尝试清除WebStorm缓存：点击File > Invalidate Caches...，选择「Invalidate and Restart」，解决缓存导致的类型识别异常问题。

内容的提问来源于stack exchange，提问作者Rokas Rudgalvis