如何使 VSCode 自动导入在 lerna-yarn-typescript 项目中工作？答案

【问题标题】：How to make VSCode auto import work in a lerna-yarn-typescript project?如何使 VSCode 自动导入在 lerna-yarn-typescript 项目中工作？
【发布时间】：2021-01-28 09:20:23
【问题描述】：

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

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

非常感谢您的帮助！

【问题讨论】：

标签： typescript visual-studio-code lerna yarn-workspaces

【解决方案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"]
    },

【讨论】：