VS Code 中出现智能感知错误，直到在编辑器中打开 app.d.ts 为止

Question

设置

带有 SvelteKit 项目的 VS Code。

package.json

：

{
    "name": "skit",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "preview": "vite preview",
        "test": "npm run test:integration && npm run test:unit",
        "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 .",
        "test:integration": "playwright test",
        "test:unit": "vitest"
    },
    "devDependencies": {
        "@iconify/json": "^2.2.160",
        "@playwright/test": "^1.28.1",
        "@skeletonlabs/skeleton": "^2.6.1",
        "@skeletonlabs/tw-plugin": "^0.3.0",
        "@sveltejs/adapter-auto": "^3.0.0",
        "@sveltejs/adapter-node": "^2.0.1",
        "@sveltejs/kit": "^2.0.0",
        "@sveltejs/vite-plugin-svelte": "^3.0.0",
        "@tailwindcss/forms": "^0.5.7",
        "@typescript-eslint/eslint-plugin": "^6.0.0",
        "@typescript-eslint/parser": "^6.0.0",
        "autoprefixer": "^10.4.16",
        "eslint": "^8.28.0",
        "eslint-config-prettier": "^9.1.0",
        "eslint-plugin-svelte": "^2.30.0",
        "postcss": "^8.4.32",
        "postcss-load-config": "^5.0.2",
        "prettier": "^3.1.1",
        "prettier-plugin-svelte": "^3.1.2",
        "prettier-plugin-tailwindcss": "^0.5.9",
        "svelte": "^4.2.7",
        "svelte-check": "^3.6.0",
        "sveltekit-superforms": "^1.12.0",
        "tailwindcss": "^3.3.6",
        "tslib": "^2.4.1",
        "typescript": "^5.0.0",
        "unplugin-auto-import": "^0.17.2",
        "unplugin-icons": "^0.18.1",
        "vite": "^5.0.3",
        "vite-plugin-svelte-console-remover": "^1.0.10",
        "vitest": "^1.0.0",
        "zod": "^3.22.4"
    },
    "type": "module"
}

vite.config.ts

：

import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vitest/config'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import AutoImport from 'unplugin-auto-import/vite'
import removeConsole from 'vite-plugin-svelte-console-remover'

export default defineConfig({
    plugins: [
        sveltekit(),
        AutoImport({
            resolvers: [
                IconsResolver({
                    prefix: 'Icon',
                    extension: 'svelte',
                }),
            ],
        }),
        Icons({
            compiler: 'svelte',
        }),
        removeConsole('log'),
    ],
    test: {
        include: ['src/**/*.{test,spec}.{js,ts}'],
    },
})

错误

将鼠标悬停在

import { sveltekit } from '@sveltejs/kit/vite'

上时出现错误文本：

Cannot find module '@sveltejs/kit/vite' or its corresponding type declarations.ts(2307)

。

Ctrl + Click

也不适用于蓝色导入。

更多背景

包含此

skit

 的 

vite.config.ts

只是更大的多项目 git 存储库中的一个子文件夹。 由于多种原因，我通常在 VS Code 中打开整个内容，而不仅仅是子文件夹。

部分修复

打开项目的

src/app.d.ts

文件（在编辑器中）并添加以下

'@sveltejs/kit'

导入：

// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
import '@sveltejs/kit'
import 'unplugin-icons/types/svelte'

declare global {
    namespace App {}
}

export {}

现在

Ctrl + Click

也可以正确导航到

skit/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/exports/vite/index.js

。

部分修复问题

每当重新加载编辑器窗口或 TS 服务器时，错误都会出现，直到再次打开类型导入的文件。

版本信息

Version: 1.84.2
Commit: 1a5daa3a0231a0fbba4f14db7ec463cf99d7768e
Date: 2023-11-09T10:50:47.800Z
Electron: 25.9.2
ElectronBuildId: 24603566
Chromium: 114.0.5735.289
Node.js: 18.15.0
V8: 11.4.183.29-electron.0
OS: Linux x64 6.1.66

Answer 1

将

"src/**/*"

添加到

include

中的

tsconfig.json

数组似乎可以解决此问题：

{
    "extends": "./.svelte-kit/tsconfig.json",
    "compilerOptions": {
        "allowJs": true,
        "checkJs": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "strict": true,
        "moduleResolution": "bundler"
        // "rootDirs": ["./.svelte-kit"]
    },
    "include": ["./auto-imports.d.ts", "src/**/*"]
    // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
    //
    // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
    // from the referenced tsconfig.json - TypeScript does not merge them in
}