当我尝试导入 @package 时，VSCode IntelliSense 无法使用纱线工作区

Question

我设置了一个带有纱线工作区的单一存储库。在我的packages文件夹中，我有两个包：icons和website。我尝试在我的网站中导入一些图标，如下所示：

<script>
   import { ArrowUp } from '@app/icons/outline`;
</script>

<ArrowUp class="h-5 w-5" />

它有效，图标将被渲染，但是当我尝试导入它时我没有得到智能感知。生成的outline/index.js文件如下所示：

export { ArrowDown } from "./ArrowDown";
export { ArrowUp } from "./ArrowUp";
export { Dashboard } from "./Dashboard";

该packages/icons/package.json文件如下所示：

{
  "name": "@app/icons",
  "version": "0.0.1",
  "private": "true",
  "scripts": {
    "build": "node ./scripts/build.js"
  },
  "devDependencies": {
    "svg-to-svelte": "^2.2.1"
  }
}

看起来packages/website/package.json像这样：

{
    "name": "@app/website",
    "version": "0.0.1",
    "private": "true",
    "scripts": {
        "dev": "svelte-kit dev",
        "build": "svelte-kit build",
        "package": "svelte-kit package",
        "preview": "svelte-kit preview",
        "check": "svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
        "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
        "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
    },
    "dependencies": {
        "@app/icons": "*"
    },
    "devDependencies": {
        "@sveltejs/adapter-auto": "next",
        "@sveltejs/kit": "next",
        "@typescript-eslint/eslint-plugin": "^4.31.1",
        "@typescript-eslint/parser": "^4.31.1",
        "eslint": "^7.32.0",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-svelte3": "^3.2.1",
        "prettier": "^2.4.1",
        "prettier-plugin-svelte": "^2.4.0",
        "svelte": "^3.44.0",
        "svelte-check": "^2.2.6",
        "svelte-preprocess": "^4.10.1",
        "tslib": "^2.3.1",
        "typescript": "^4.4.3",
        "postcss": "^8.4.5",
        "autoprefixer": "^10.4.2",
        "tailwindcss": "^3.0.12"
    },
    "type": "module"
}

我的tsconfig.json包裹website看起来像这样：

{
    "compilerOptions": {
        "moduleResolution": "node",
        "module": "es2020",
        "lib": ["es2020", "DOM"],
        "target": "es2020",
        /**
            svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
            to enforce using \`import type\` instead of \`import\` for Types.
            */
        "importsNotUsedAsValues": "error",
        "isolatedModules": true,
        "resolveJsonModule": true,
        /**
            To have warnings/errors of the Svelte compiler at the correct position,
            enable source maps by default.
            */
        "sourceMap": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "baseUrl": ".",
        "allowJs": true,
        "checkJs": true,
        "paths": {
            "$lib": ["src/lib"],
            "$lib/*": ["src/lib/*"]
        }
    },
    "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
}

注意：我使用 Sveltekit 作为框架

编辑：

当我使用这样的相对路径时：

import { ArrowDown } from '../../../icons/outline'

它有效，我得到了 vscode 智能感知，但@app/icons/outline为什么没有？

Answer 1

这就是 Intellisense 对我有用的原因

# tsconfig.json

"include": ["../../packages/**/*"]