无法在 VS Code 中调试当前的打字稿文件，因为找不到相应的 JavaScript答案

【问题标题】：Can't debug current typescript file in VS Code because corresponding JavaScript cannot be found无法在 VS Code 中调试当前的打字稿文件，因为找不到相应的 JavaScript
【发布时间】：2018-04-17 23:11:42
【问题描述】：

我正在使用 Visual Studio Code 1.17 版，我的目标是调试当前打字稿文件。我有一个构建任务正在运行，所以我总是有一个相应的 javascript 文件，如下所示：

src/folder1/folder2/main.ts
src/folder1/folder2/main.js

我已尝试使用以下 launch.json 配置：

{
  "type": "node",
  "request": "launch",
  "name": "Current File",
  "program": "${file}",
  "console": "integratedTerminal",
  "outFiles": [
    "${workspaceFolder}/${fileDirname}**/*.js"
  ]
}

但我得到了错误：Cannot launch program '--full-path-to-project--/src/folder1/folder2/main.ts' because corresponding JavaScript cannot be found.

但是对应的JavaScript文件存在！

tsconfig.json：

{
"compileOnSave": true,
"compilerOptions": {
    "target": "es6",
    "lib": [
        "es2017",
        "dom"
    ],
    "module": "commonjs",
    "watch": true,
    "moduleResolution": "node",
    "sourceMap": true
    // "types": []
},
"include": [
    "src",
    "test"
],
"exclude": [
    "node_modules",
    "typings"
]}

【问题讨论】：

添加了 stackoverflow.com/a/53236103/428486 解决方案相同的目录和单独的目录，我确认这两个都在 vscode 中工作，希望对您有所帮助！

标签： javascript typescript visual-studio-code vscode-settings

【解决方案1】：

问题可能出在您的地图文件上，而不是配置上。

在尝试任何其他操作之前，您要确保在启动配置中使用的路径是正确的。

您可以通过暂时用系统上的绝对路径替换路径来查看它是否有效。

如果它不起作用，您应该：

检查您的 tsconfig 并确保 compilerOptions 下的 mapRoot 未设置为任何内容。这就是官方文档所说的：

指定调试器应该定位映射文件的位置生成的位置。如果 .map 文件是在运行时位于与 .js 文件不同的位置。这指定的位置将嵌入到 sourceMap 中以引导映射文件所在的调试器。

您可以阅读更多关于它的信息here

在大多数情况下，您并不想将其设置为任何值。

另外，请确保

"sourceMap": 是的`

在 tsconfig.json 中的compilerOptions 中设置，并且正在生成地图文件。

【讨论】：

如果给定绝对路径，调试器正在工作。 mapRoot 未设置 - 我将编辑原始问题，以便包含 tsconfig.json。最后 - 地图文件正在生成。
如果它使用绝对路径，那么显然意味着您需要正确设置“program”和“outFiles”。我都这样设置："program": "${workspaceFolder}/backend/src/app.ts", "outFiles": [ "${workspaceFolder}/backend/build/**/*.js"] ${workspaceFolder} 为您提供项目主文件夹的位置。从那里您可以导航到您的文件。您可以在下面的答案中查看我的完整配置。 stackoverflow.com/questions/31169259/…
stackoverflow.com/a/47215246/7022062
VS Code Insiders 目前（2019 年 1 月）默认退出 SourceMap（tsconfig.json）。我必须取消注释 Sourcemap:true 否则不会创建源映射，并且 launch.json 中的默认调试启动配置将导致 VS-C 抛出“找不到相应的 Javascript 文件”错误。您可能希望 VS-C 的默认行为是生成源映射，但显然情况并非如此。
我一直在使用VScode 1.46.1，我即将测试我的最后一个和第十个launch.json...注意它是在VsCode帮助页面底部用纯文本编写的“找不到对应的 JavaScript”这对于 TypeScript 新手来说是个严重的问题！放置绝对路径会增加日志中的错误数量，因此绝对是正确方向的标记。非常感谢。

【解决方案2】：

您好，我遇到了同样的问题。您只需要将安装 npm 的路径添加到 用户路径 或 全局路径变量。

C:\Users\userName\AppData\Roaming\npm

【讨论】：

【解决方案3】：

以防其他人遇到这种情况：如果您使用 webpack 构建项目，则必须使用 devtool 设置来生成与 VS Code 兼容的源映射。经过反复试验，cheap-module-source-map 和 source-map 运行良好。我最终将此添加到我的webpack.config.js：

devtool: env.production ? 'source-map' : 'cheap-module-source-map'

【讨论】：

【解决方案4】：

outFiles 的配置指向错误的目录。

用这个替换你的launch.json 配置可以解决它：

{
  "type": "node",
  "request": "launch",
  "name": "Current File",
  "program": "${file}",
  "console": "integratedTerminal",
  "outFiles": ["${fileDirname}/*.js"]
}

来自vscode launch.json variable reference：

${fileDirName}当前打开文件的目录名

应该是你需要的目录。

请注意，您也可以使用"outFiles": ["${fileDirname}/**/*.js"] 来包含子目录。

您使用的配置添加了以下目录：

"${workspaceFolder}/${fileDirname}**/*.js"

意思是这样的：

"/path/to/root/path/to/root/src/folder1/folder2/**/*.js"

即到根目录的路径在那里两次，使其成为无效路径。

如果您的 .js 文件位于不同的 outDir：只需使用该目录的路径即可。 Typescript sourceMaps 将完成剩下的工作。

例如，如果您将.js 文件放在dist 目录中：

"outFiles": ["${workspaceFolder}/dist/**/*.js"]

【讨论】：

做了一些测试，你成功了 - outFiles 是使它成为可能的属性。我想我的问题是我认为系统不够“智能”，无法在源映射的帮助下 lkp 文件，但现在由于您的回答而更加清楚。换句话说，这不适用于禁用源映射？
正确，它不适用于禁用源映射。在文档中不是很清楚，但是如果您在 tsconfig.json 中禁用 sourceMaps 则它不起作用：code.visualstudio.com/docs/nodejs/nodejs-debugging#_source-maps

【解决方案5】：

这在我的情况下有效：

进入您的gulpfile.js 并找到包含sourcemaps.write() 的行。将此行更改为

.pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '../lib' }))

重新构建您的项目并尝试再次运行调试器。 Credit goes to roblourens on GitHub. 他链接了this page,，这很有帮助。

【讨论】：

【解决方案6】：

在我的情况下，罪魁祸首是将工作目录设置为launch.json中文件目录以外的某个目录：

"cwd": "${workspaceFolder}/dist"

也许这可能是 VSCode 中的一个错误。

【讨论】：

【解决方案7】：

我遇到了一个奇怪的情况，我的机器根据@lucascaro 的建议运行得非常好，但在其他人的计算机上使用相同版本的 vscode、node、ts 等。我仍然可以看到错误消息。

因此，如果您已按照 @lucascaro 的所有说明进行操作，但仍然看到错误消息，请尝试将其添加到您的 launch.json 配置中的程序属性之后，如下所示：

{
  ...
  "preLaunchTask": "tsc: build - tsconfig.json",
  ...
}

这个添加使它可以在第二台机器上运行，但如果我将它添加到我的机器上，它就不再工作了。

因此，如果您处于仍然失败的地方，请尝试一下。

【讨论】：

【解决方案8】：

您可能需要在 tsconfig.json 中启用源映射

"sourceMap": true,

【讨论】：

【解决方案9】：

我通过在 tsconfig.json

中添加 "sourceMap": true 解决了这个问题

launch.json 看起来像

{
"version": "0.2.0",
"configurations": [
  {
    "type": "node",
    "request": "launch",
    "name": "Launch Program",
    "program": "${workspaceFolder}/src/index.ts",
    "preLaunchTask": "tsc: build - tsconfig.json",
    "outFiles": ["${workspaceFolder}/build/**/*.js"]
  }
]
}

【讨论】：

【解决方案10】：

请记住，您要运行的程序文件在执行之前应具有焦点，否则您将收到“找不到 Javascript”错误对话框。特别是当您正在执行的文件不是 Javascript 或 Typescript 文件时。因为，在默认的launch.json 文件中，指定了配置"program": "${file}"。这意味着当前正在屏幕上显示的文件将被执行。

例如：如果您在非 js 或非 ts 文件中，例如 tsconfig.json 或 launch.json，然后单击“运行”命令，则会出现该错误对话框。

在 VS Code 中正确设置 Typescript 项目

在创建项目之前，确保你的机器上安装了 Typescript 和 Node.js。

1.在终端初始化

在终端中为您的项目创建一个新文件夹。

mkdir MyProject

将当前目录更改为您在上面创建的文件夹。

cd MyProject

初始化项目以启用 Typescript。这将创建 tsconfig.json 文件。

tsc --init

在 VS Code 中打开此文件夹。此命令适用于 MacOS。也可以手动打开。

code .

2.配置输出目录

现在转到文件 tsconfig.json 并将以下行添加到 compilerOptions。是的，您需要在 tsconfig.json 中指定输出目录，而不是 launch.json。 VS Code 将始终在 launch.json 的默认 outDir 中查找文件，即 ${workspaceFolder}/**/*.js。

"outDir": "./out",  /* Specify .js output files. */
"sourceMap": true   /* Generate corresponding .map files. */

运行/调试项目

编写一个简单的程序来测试并运行：welcome.ts

console.log('Welcome to Typescript');

1.构建

现在从 VS Code 的 Terminal 菜单中点击 Run Build Task (Shift + Command(Ctrl) + B) 并输入以下命令并回车：

tsc: watch - tsconfig.json

您需要在首次打开项目时运行一次构建任务。这将开始监视项目中的代码更改。

2.运行

现在转到您要运行的 Typescript 程序（确保您的程序文件 .ts 具有焦点）。从运行菜单：

点击开始调试进行调试（F5）

或

单击运行而不调试 (Ctrl + F5)

输出将显示在调试控制台中。

就是这样。一开始可能会觉得很费力，但是一旦习惯了就很容易了。

【讨论】：