Visual Studio Code 中 TypeScript 文件中的绝对模块路径解析 [英] Absolute module path resolution in TypeScript files in Visual Studio Code

问题描述

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

//当源文件在/src/here/there/file.ts 中时这有效//并在/src/api/interfaces.ts 中导入一个接口从'../../api/interfaces'导入{接口}；//这不起作用从'api/interfaces'导入{接口}；从'/api/interfaces'导入{接口}；从'src/api/interfaces'导入{接口}；从'/src/api/interfaces'导入{接口}；//这有效，但它当然不应该被使用从'c:/..../src/api/interfaces'导入{接口}；

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

//不起作用从'%ProjectXRoot%/api/interfaces'导入{接口}；

<块引用>

当前安装的版本
• 打字稿:1.8.10
• VSCode:1.1.1

问题

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

<代码>{...编译器选项":{"baseUrl": "./src",//不起作用...},"baseUrl": "./src",//也不起作用...}

我尝试过诸如 src、./src 和 ./src/ 之类的值，但它们都不适用于任何上配置的地方.

那么如何配置 Visual Studio Code 来解析某个文件夹中的绝对模块路径?

如果这是不可能的，至少从项目根目录解析绝对路径会更好.Visual Studio Code 如何确定这一点?它是您打开文件夹的位置还是.vscode文件夹所在的位置?

但它仍然是绝对路径的可行解决方案.我曾尝试使用类似于 Visual Studio 的 ~，但也无济于事.

^(未解决)

--正如 steinso 在 他的回答，所有以 /、./ 或 ../ 开头的模块都被认为是相对的.特别是第一个完全让我惊讶，因为我通常认为这是一个项目根相对路径.

但这个事实基本上意味着主要问题现在变成:我如何将模块导入提供为绝对路径 ^{(来自某些项目em> 根文件夹路径)}?以斜线开头的路径通常表示绝对，但在本例中并非如此.

即使我将编译器选项 moduleResolution 设置为 classic(因此模块解析不会查看 node_modules 文件夹)上面的第二组导入实际上应该所有工作都按照 Microsoft 的链接文档进行.但出于某种原因，我仍然在 Visual Studio Code 中看到红色波浪线，并且在编译过程中出现错误.

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

解决方案

为了能够使用 Visual Studio Code 在 TypeScript 中导入的绝对路径，您应该使用 TypeScript 的下一个版本 - typescript@next 这是 TypeScript v2.为此，请执行以下操作:

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

   npm i typescript@next -D

2. 在 Visual Studio 代码中

   i) 转到菜单 File → Preferences → Workspace Settings(这会生成 .vscode 目录在项目根目录并初始化 settings.json 文件.)

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

   typescript.tsdk":node_modules/typescript/lib"

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

{编译器选项":{baseUrl":./"，路径":{src/*":[./src/*"]}}}

4. 重新加载 Visual Studio 代码

如果您有以下目录结构:

+ node_modules+ 来源|+ 应用程序||+ 共享|||-service.ts||-main.ts+ 打字- tsconfig.json- webpack.config.json- 包.json- 索引.html

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

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

解决:{扩展名:[''，'.js'，'.ts']，别名:{src":path.resolve('./src')}}

请参阅this了解绝对模块分辨率.

I can't seem to convince Visual Studio Code to resolve absolute TypeScript module paths. Relative paths work, but absolute don't. I would like Visual Studio Code 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 it is of course not supposed to be used
import { Interface } from 'c:/..../src/api/interfaces';

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. Visual Studio Code will not resolve such module path. I've tried.

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

Currently installed versions
• TypeScript: 1.8.10
• VSCode: 1.1.1

Question

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

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

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

So how does one configure Visual Studio Code to resolve absolute module paths from a certain folder?

If that's not possible, it would be at least better to resolve absolute paths from project root. How does Visual Studio Code determine that? Is it where you Open Folder or is it where the .vscode folder is?

But it would still be a viable solution for absolute paths. I've tried using ~ similar to Visual Studio, but to no avail either.

^(Unresolved)

-- 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 ^{(from some project root folder path)} at all? Starting paths with slashes usually meant absolute, but in this case it doesn't.

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 Visual Studio Code and errors during compilation.

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

解决方案

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

1. Install typescript@next via npm. For installing TypeScript v2.x

   npm i typescript@next -D

2. In Visual Studio Code

   i) Go to menu File → Preferences → Workspace Settings (This generates the .vscode directory at the project root and initializes the settings.json file.)

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

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

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

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

4. Reload Visual Studio Code

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

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

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.

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