VSCode中TypeScript文件中的绝对模块路径解析

本文介绍了VSCode中TypeScript文件中的绝对模块路径解析的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我似乎无法说服VSCode解析绝对TypeScript模块路径.相对路径有效，但绝对无效.我希望VSCode解析./src文件夹上的模块路径.

I can't seem to convince VSCode to resolve absolute TypeScript module paths. Relative paths work, but absolute don't. I would like VSCode to resolve module paths from ./src folder on.

// this works when source file is in /src/here/there/file.ts
// and importing an interface in /src/api/interfaces.ts
import { Interface } from '../../api/interfaces';

// this doesn't work
import { Interface } from 'api/interfaces';
import { Interface } from '/api/interfaces';
import { Interface } from 'src/api/interfaces';
import { Interface } from '/src/api/interfaces';

// this works but is of course not supposed to be used
import { Interface } from 'c:/..../src/api/interfaces';

最后一个当然不会算在内，因为每个开发人员的项目路径很可能会有所不同.但是，即使我们都设置了系统变量%ProjectXRoot%，我们也无法在代码中使用此变量. VSCode不会解析此类模块路径.我已经尝试过了.

The last one of course doesn't count as each developer's project path is highly likely different. But even if we'd all set a system variable %ProjectXRoot% we can't use this variable in the code. VSCode will not resolve such module path. I've tried.

// won't work
import { Interface } from '%ProjectXRoot%/api/interfaces';

问题

我试图以某种方式配置VSCode来解析绝对模块路径，但似乎无法这样做.我尝试通过在两个不同的地方添加baseUrl来配置 tsconfig.json (在项目根目录中).

Question

I've tried to somehow configure VSCode to resolve absolute module paths, but can't seem to do so. I've tried configuring tsconfig.json (in the project root) by adding baseUrl on two different places.

{
    ...
    "compilerOptions": {
        "baseUrl": "./src", // doesn't work
        ...
    },
    "baseUrl": "./src", // doesn't work either
    ...
}

我已经尝试过src，./src和./src/之类的值，但是它们在任何较高的配置位置均不起作用.

I've tried values like src, ./src and ./src/ but none of them work in any of the upper configuration place.

那么一个人如何配置VSCode 来解析某个文件夹中的绝对模块路径?

So how does one configure VSCode to resolve absolute module paths from a certain folder?

如果这不可能，那么从项目根目录解析绝对路径至少会更好.我不知道VSCode是如何确定的?是您打开文件夹的地方，还是 .vscode 文件夹的地方?不知道.但这对于绝对路径仍然是可行的解决方案.我曾尝试使用与VS类似的~，但也无济于事.

If that's not possible it would be at least better to resolve absolute paths from project root. I have no idea how VSCode determines that? Is it where you Open Folder or is it where the .vscode folder is? No idea. But it would still be a viable solution for absolute paths. I've tried using ~ similar to VS but to no avail either.

@steinso 在他的答案中指出了所有以/，./或../开头的模块被认为是相对的.特别是第一个使我完全感到惊讶的原因是，我通常认为这是项目的根相对路径.但这实际上意味着主要问题现在变为:我如何提供模块导入作为绝对路径 ?以斜杠开头的路径通常表示绝对路径，但在这种情况下不是绝对路径.

As @steinso points out in his answer all modules starting with /, ./ or ../ are considered relative. Especially the first one surprised me completely as I usually consider that a project root-relative path. But this fact basically means that the main question now becomes: How can I provide module imports as absolute paths at all? Starting paths with slashes usually meant absolute, but in this case it doesn't.

即使我将编译器选项moduleResolution设置为classic(因此模块分辨率也不会进入node_modules文件夹)，按照微软的链接，上述第二组导入实际上也应该所有工作文档.但是由于某种原因，我仍然在VSCode中出现红色的波浪线，并且在编译过程中出现错误.

Even when I set compiler option moduleResolution to classic (so module resolution wont be looking into node_modules folder) the second set of imports above should actually all work as per Microsoft's linked document. But for some reason I still get red squiggly lines in VSCode and errors during compilation.

那我怎么导入一个特定的项目模块而又不提供确切的相对路径，而只是提供它自己的项目相对路径?

So how can I import a specific project module without providing exact relative path to it but rather just its own project-relative path?

推荐答案

要能够使用通过VSCode导入打字稿中的绝对路径，您应该使用下一版本的打字稿-typescript@next，即打字稿v2.为此，请执行以下操作:

To be able to use absolute paths from import in typescript using VSCode you should be using next version of typescript - typescript@next which is typescript v2. For that do the following:

通过npm安装typescript @ next，用于安装typescript v2.x

Install typescript@next via npm , for installing typescript v2.x

npm i typescript@next -D

在VSCode中

i)转到文件>首选项>工作区设置 [这将在项目根目录生成.vscode目录并初始化settings.json文件]

i) goto File > Preferences > Workspace Settings [This generates .vscode directory at project root and initializes the settings.json file]

ii)将以下key:value对放入settings.json文件

ii) Put the following key:value pair in settings.json file

"typescript.tsdk": "node_modules/typescript/lib"

在tsconfig.json中将以下键:值对添加到'compilerOptions'

In tsconfig.json add following key:value pair to 'compilerOptions'

{
  "compilerOptions" : {
    "baseUrl": "./",
    "paths" : {
      "src/*": ["./src/*"]
    }
  }
}

重新加载VSCode

如果您具有以下目录结构:

If you have the following directory structure:

+ node_modules
+ src
| + app
| |  + shared
| |  |  -service.ts
| |  -main.ts
+ typings
- tsconfig.json
- webpack.config.json
- package.json
- index.html

然后从main.ts导入/src/app/shared/service.ts，您现在可以import {} from 'src/app/shared/service;

Then to import /src/app/shared/service.ts from main.ts you could now import {} from 'src/app/shared/service;

如果使用webpack和ts-loader来转译.ts文件，则应将以下内容添加到webpack.config.js配置文件的resolve部分.

If you are using webpack and ts-loader for transpiling the .ts files you should add following to the resolve section of webpack.config.js configuration file.

resolve: {
    extensions: ['', '.js', '.ts'],
    alias: {
      "src": path.resolve('./src')
    }
  }

有关绝对模块解析，请参考此.

Please refer to this for absolute module resolution.

这篇关于VSCode中TypeScript文件中的绝对模块路径解析的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！