如何使VSCode自动导入工作在一个lerna-yarn-typescript项目?

Question

我有一个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

我想从backend包访问在shared中声明的接口。

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
}
}

非常感谢您的帮助!

Answer 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"]
},