typescript - 如何使 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 中声明的接口(interface)。

packages/shared/src/index.ts:

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

但是如果我尝试使用来自 backend 包的接口(interface)，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",
  "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"]
    },