Visual Studio Code - วิธีทำให้การนำเข้าอัตโนมัติของ VSCode ทำงานในโปรเจกต์ lerna-yarn-typescript?

ฉันมีโปรเจค lerna monorepo ที่มีโครงสร้างดังต่อไปนี้:

├─ packages
│    ├─ backend
│    │   ├─ package.json
│    │   ├─ tsconfig.json
│    │   └─ src
│    │      └─ index.ts
│    └─ shared
│        ├─ package.json
│        ├─ tsconfig.json
│        └─ src
│           └─ index.ts
├─ lerna.json
├─ package.json
├─ tsconfig.base.json
└─ tsconfig.json

ฉันต้องการเข้าถึงอินเทอร์เฟซที่ประกาศใน shared จากแพ็กเกจ backend

packages/shared/src/index.ts:

export interface IPerson {
  name: string;
  doSomething: () => void;
}

แต่ถ้าฉันพยายามใช้อินเทอร์เฟซจากแพ็กเกจ backend vscode จะไม่แสดงคำแนะนำในการนำเข้าอัตโนมัติ

packages/backend/src/index.ts:

ภาพหน้าจอจาก VSCode

ถ้าฉันนำเข้าเองแบบนี้: import { IPerson } from '@example/shared/src/index'; มันทำงานได้อย่างราบรื่น

มีวิธีใดบ้างที่จะทำให้ VSCode รู้จักโปรเจกต์ที่แชร์ของฉันและแนะนำการนำเข้าอัตโนมัติ?

นี่คือไฟล์สำคัญจากโครงการ:

/tsconfig.json:

{
    "extends": "./tsconfig.base.json",
    "compilerOptions": {
      "baseUrl": "./packages",
      "paths": {
        "@example/backend": ["backend/src"],
        "@example/shared": ["shared/src"],
        "@example/*": ["*/src"]
      },
    },
    "references": [
      {
        "path": "./packages/backend"
      },
      {
        "path": "./packages/shared"
      }
    ]
  }

/lerna.json:

{
  "packages": [
    "packages/*"
  ],
  "private": true,
  "version": "0.1.0",
  "npmClient": "yarn",
  "useWorkspaces": true
}

/packages/backend/package.json:

{
  "name": "@example/backend",
  "version": "0.1.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "@example/shared": "^0.1.0"
  },
  "devDependencies": {
    "tsconfig-paths": "^3.9.0",
    "typescript": "^4.1.3"
  }
}

/packages/backend/tsconfig.json:

{
    "extends": "../../tsconfig.json",
    "references": [
        { "path": "../shared" }
    ]
}

/packages/shared/tsconfig.json:

{
    "extends": "../../tsconfig.json",
    "compilerOptions": {
        "composite": true
    }
}

ขอบคุณมากสำหรับความช่วยเหลือใด ๆ!

คำตอบ #1

มีการตั้งค่าที่ถูกแนะนำใน https://github.com/microsoft/TypeScript/pull/40637#issuecomment-717459902 เพื่อเพิ่มการตั้งค่า vscode "project-relative"

.vscode/settings.json

"typescript.preferences.importModuleSpecifier": "project-relative"

tsconfig.json

    "baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
    "composite": true,
    "paths": {
      "@package-name/package-a": ["./packages/package-a/src"],
      "@package-name/package-b": ["./packages/package-b/src"]
    },

Visual Studio Code - วิธีทำให้การนำเข้าอัตโนมัติของ VSCode ทำงานในโปรเจกต์ lerna-yarn-typescript?

คำตอบ #1

บทความที่เกี่ยวข้อง