VSCode/tsconfig路径问题-文件被拉入，但我在编辑器中得到“找不到模块”

Question

我一直有这个奇怪的问题，因为我已经开始工作在这个项目前一段时间。在我的各种角组件/类/等。我拉其他模块和文件使用导入。对于这些使用基本路径@符号，我得到一个错误的VSCode（注意：@角/核心和其他包的工作…问题只是路径）。奇怪的是，我可以编译和运行应用程序没有任何问题…尽管有警告，导入都被成功拉进来。

我刚刚忽略了这个问题一段时间，但它导致了一个非常不方便的问题……如果我尝试去定义一个导入模块中的对象，VSC不会将我带到该文件，因为它似乎找不到它。

我团队中的每个人都在VSCode中使用完全相同的代码库(和相同的tsconfig文件),没有遇到这个问题。因此，这似乎不是tsconfig文件或代码库设置本身的问题，而是我的VSCode本身的问题。我已经在StackOverflow和其他地方寻找解决方案，但是没有任何运气。任何建议都将不胜感激。

导入示例（Angular ts文件的顶部）：

import { SigningAction } from '@middlemass.signing/dto/signing-action';

以下是当我将鼠标悬停在具有路径快捷方式前缀的任何导入上时得到的警告：

< code >找不到模块'@middlemass.signing/dto/signing-action'或其对应的类型声明。

tsconfig.json：

{
    "compileOnSave": false,
    "compilerOptions": {
      "outDir": "./dist/out-tsc",
      "sourceMap": true,
      "declaration": false,
      "moduleResolution": "node",
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "removeComments": false,
      "suppressImplicitAnyIndexErrors": true,
      "target": "es5",
      "resolveJsonModule": true,
      "allowSyntheticDefaultImports": true,
      "esModuleInterop": true,
      "typeRoots": [
        "node_modules/@types"
      ],
      "lib": [
        "es2017",
        "dom"
      ],
      "module": "es2015",
      "baseUrl": "./",
      "paths": {
        "@middlemass.sending/*": [
          "projects/middlemass-sending/src/*"
        ],
        "@middlemass.sending/shared/*": [
          "projects/middlemass-sending/src/shared/*"
        ],
        "@middlemass.sending/utils/*": [
          "projects/middlemass-sending/src/shared/utils*"
        ],
        "@middlemass.sending/services/*": [
          "projects/middlemass-sending/src/services/*"
        ],
        "@middlemass.sending/dto/*": [
          "projects/middlemass-sending/src/dto/*"
        ],
        "@middlemass.sending/env/*": [
          "projects/middlemass-sending/src/environments/*"
        ],
        "@middlemass.sending/styles/*": [
          "projects/middlemass-sending/src/scss/*"
        ],
        "@middlemass.sending/locale/*": [
          "projects/middlemass-sending/locale/*"
        ],
        "@middlemass.signing/locale/*": [
          "projects/middlemass-signing/locale/*"
        ],
        "@middlemass.signing/dto/*": [
          "projects/middlemass-signing/src/app/core/dto/*"
        ],
        "@middlemass.signing/services/*": [
          "projects/middlemass-signing/src/app/core/services/*"
        ],
        "@middlemass.signing/shared/*": [
          "projects/middlemass-signing/src/app/shared/*"
        ],
        "@middlemass.signing": [
          "projects/middlemass-signing/src"
        ],
        "@middlemass.signing/*": [
          "projects/middlemass-signing/src/*"
        ],
        "@middlemass.common": [
          "projects/middlemass-common/src"
        ],
        "@middlemass.common/*": [
          "projects/middlemass-common/src/*"
        ]
      }
    },
    "angularCompilerOptions": {
      "fullTemplateTypeCheck": true,
      "strictInjectionParameters": true,
      "preserveWhitespaces": false
    }
  }
  

Answer 1

所以这最终不是一个真正的VSCode或tsconfig问题。我不敢相信我从第一天就错过了这个，但基本上这个代码库由一个根目录中的三个独立项目组成。每天，我和我的团队将一次处理三个项目中的一个，我在开发时总是打开特定的项目目录。tsconfig文件存在于根目录中。即使单独的项目有自己的继承根目录的tsconfig文件，但没有在VSCode中打开根目录会导致这个问题。

基本上，代码库已经建立：

Projects Folder (root with the "master" tsconfig)
   --Project I (with its own tsconfig that extends the root tsconfig)
   --Project II (with its own tsconfig that extends the root tsconfig)
   --Project III (with its own tsconfig that extends the root tsconfig)

我只需要在VSCode中打开项目文件夹，基本路径快捷方式就可以工作。在我假设因为子项目文件夹有自己的从根目录扩展的tsconfig文件之前，只需在VSC中打开这些单独的文件夹就可以了，但事实并非如此。我必须打开包含主tsconfig文件的根文件夹。

这样做的一个缺点是，在一个项目中搜索文件或代码可能会返回其他项目的结果。但是，您可以对 VSC 工作区设置进行一些修改以防止这种情况，例如：

"search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/*.code-search": true,
    "**/projects/project1": true,
    "**/projects/project2": false
    "**/projects/project3": false
  }

使用此设置，如果您在project1中，则只能在project2中获得搜索结果……您可以修改您正在工作的任何项目的此模式。