VSCode中Svelte 5组件$props变量HTML报错的配置修复

问题情况 #

在Svelte 5组件里写了这段代码：

<script>
  let { srcFile } = $props();
</script>

<img src={srcFile}/>

VSCode会报错：Type 'unknown' is not assignable to type 'string | null | undefined'，提示srcFile类型不匹配，但实际启动Vite开发服务后完全没问题，图片也能正常显示。项目的package.json内容如下：

{"name": "viewer",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "dev": "vite dev --host",
        "build": "vite build",
        "preview": "vite preview",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
        "lint": "prettier --check . && eslint .",
        "format": "prettier --write ."
    },
    "devDependencies": {
        "@sveltejs/adapter-auto": "^3.0.0",
        "@sveltejs/adapter-static": "^3.0.5",
        "@sveltejs/kit": "^2.0.0",
        "@sveltejs/vite-plugin-svelte": "^4.0.0",
        "@types/eslint": "^9.6.0",
        "eslint": "^9.0.0",
        "eslint-config-prettier": "^9.1.0",
        "eslint-plugin-svelte": "^2.45.1",
        "prettier": "^3.1.1",
        "prettier-plugin-svelte": "^3.2.6",
        "svelte": "^5.0.5",
        "svelte-check": "^4.0.0",
        "typescript": "^5.5.0",
        "typescript-eslint": "^8.0.0",
        "vite": "^5.4.4"
    },
    "type": "module"
}

解决办法 #

1. 给props显式添加类型 #

Svelte 5的$props()默认返回unknown类型，直接给srcFile指定类型就能让VSCode的校验逻辑正确识别：

<script lang="ts">
  let { srcFile }: { srcFile: string | undefined } = $props();
</script>

<img src={srcFile}/>

如果srcFile是组件必填项，可直接写成{ srcFile: string }。

2. 放宽Svelte检查规则 #

不想逐个给props加类型的话，修改项目根目录的svelte.config.js，忽略类型不匹配的警告：

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter()
  },
  onwarn: (warning, handler) => {
    // 跳过类型不兼容的警告
    if (warning.code === 'ts(2322)') return;
    handler(warning);
  }
};

export default config;

3. 升级Svelte相关依赖 #

当前使用的Svelte 5属于早期版本，可能存在类型校验的bug，升级到最新稳定版试试：
执行命令：

npm update svelte svelte-check @sveltejs/vite-plugin-svelte

升级完成后重启VSCode，校验逻辑可能会自动和实际运行状态对齐。

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