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

问题描述

自从前一段时间开始从事这个项目以来，我一直遇到这个奇怪的问题。在我的各种Angular组件/类/等中。我正在使用import引入其他模块和文件。对于使用基本路径@符号的任何这些，我在VSCode中遇到错误（请注意：@ angular / core和其他软件包有效……问题仅在于路径）。奇怪的是我可以毫无问题地编译和运行该应用程序……尽管有警告，所有导入都已成功导入。

我已经无视这个问题了一段时间，但是它导致了一个非常不便的问题……例如，如果我尝试去定义一个对象，该对象位于导入的模块之一VSC中不会将我带到该文件，因为它似乎找不到它。

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

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

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

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

Cannot find module '@middlemass.signing/dto/signing-action' or its corresponding type declarations.

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

解决方法

因此，这最终并不是真正的VSCode或tsconfig问题。我不敢相信我从一开始就错过了这一点，但是基本上这个代码库在一个根目录中包含三个独立的项目。每天，我和我的团队将同时处理三个项目之一，在进行开发时，我始终会打开特定的项目目录。 tsconfig文件位于根目录中。 即使单独的项目都有自己的tsconfig文件，它们继承了根目录，但VSCode中没有打开根目录也导致了此问题。

因此基本上已经建立了代码库：

<div class="container">
 <div class="large-item">Lorem ipsum dolor sit amet consectetur,adipisicing elit. Quis ipsam debitis sint? Aperiam,saepe alias. Possimus excepturi fugit inventore consectetur ipsam distinctio maiores,vero veniam ad quas numquam at repellat? Lorem ipsum dolor sit amet consectetur,vero veniam ad quas numquam at repellat?Lorem ipsum dolor sit amet consectetur,vero veniam ad quas numquam at</div>
 <div class="item-one">Content</div>
 <div class="item-two">repellat?</div>

</div>

我只需要打开VSCode中的Projects文件夹，即可使用基本路径快捷方式。在我假设由于子项目文件夹具有从根目录扩展而来的自己的tsconfig文件之前，可以在VSC中打开这些单独的文件夹是可以的，但是事实并非如此。我必须打开包含主tsconfig文件的根文件夹。

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

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)

使用此设置，如果您在project1中，则只会在project1中获得搜索结果...您可以只针对所从事的项目修改此模式。