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

Question

我正在使用 Visual Studio 代码版本 1.17，我的 objective 用于调试 current 打字稿文件。我有一个构建任务运行，所以我总是有一个相应的 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"
]}

Answer 1

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

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

您可以临时用系统上的绝对路径替换路径，看看是否可行。

如果它不起作用你应该：

检查您的 tsconfig 并确保 compilerOptions 下的 mapRoot 没有设置任何内容。官方文档是这样说的：

Specifies the location where debugger should locate map files instead of generated locations. Use this flag if the .map files will be located at run-time in a different location than the .js files. The location specified will be embedded in the sourceMap to direct the debugger where the map files will be located.

您可以阅读更多相关信息here

在大多数情况下，您真的不想将其设置为任何内容。

此外，请确保

"sourceMap"：真`

在 tsconfig.json 中的 compilerOptions 中设置了

并且正在生成地图文件。

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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

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

来自vscode launch.json variable reference：

${fileDirName} the current opened file's dirname

应该是你需要的目录。

请注意，您也可以使用 "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"]

Answer 5

这对我有效：

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

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

重建您的项目并再次尝试运行调试器。 Credit goes to roblourens on GitHub. He linked this page, 很有帮助。

Answer 6

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

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

可能是 VSCode 中的错误。

Answer 7

我有一个奇怪的情况，我的机器根据@lucascaro 的建议工作得很好，但在其他人的电脑上使用相同版本的 vscode、node、ts 等。我仍然可以看到错误消息.

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

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

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

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

Answer 8

您可能需要在 tsconfig.json

中启用源地图

"sourceMap": true,

Answer 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"]
  }
]
}

Answer 10

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

例如：如果您在非 js 或非 ts 文件中，例如 tsconfig.json 或 launch.json 并单击运行命令，那么您将获取错误对话框。

在 VS Code 中正确设置 Typescript 项目

在创建项目之前，请确保您的计算机上安装了 Typescript 和 Node.js。

1.Intialize 在终端

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

mkdir MyProject

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

cd MyProject

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

tsc --init

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

code .

2.Configure输出目录

现在转到文件 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. */

Running/Debugging项目

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

console.log('Welcome to Typescript');

1.Build

现在从 VS Code 的终端菜单中单击运行 Build Task (Shift + Command(Ctrl) + B) 并键入以下命令并按回车键：

tsc: watch - tsconfig.json

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

2.Run

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

单击“开始调试”进行调试 (F5)

或

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

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

就是这样。一开始可能会觉得不知所措，但是一旦习惯了就很容易了。

Answer 11

在我的例子中，Base url 生成为

"baseUrl": "./",

里面tsconfig.json

我改成了

"baseUrl": "./src"

映射开始工作。

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

Can't debug current typescript file in VS Code because corresponding JavaScript cannot be found

javascript

typescript

visual-studio-code

vscode-settings

在 VS Code 中正确设置 Typescript 项目

Running/Debugging项目