如何使 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 auto import 将不会显示任何建议。

packages/backend/src/index.ts:

screenshot from 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","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
    }
}

非常感谢您的帮助！

解决方法

有一个设置 在 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"]
    },