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

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

提问by DauleDK

I am using Visual Studio Code version 1.17, and my objective is to debug the currenttypescript file. I have a build task running, so I always have a corresponding javascript file like this:

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

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

I have tried with the following launch.json configuration:

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

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

But I get the error: Cannot launch program '--full-path-to-project--/src/folder1/folder2/main.ts' because corresponding JavaScript cannot be found.

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

But the corresponding JavaScript file exists!

但是对应的 JavaScript 文件是存在的！

tsconfig.json:

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

采纳答案by lucascaro

The configuration for your outFilespoints to the wrong directory.

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

Replacing your launch.jsonconfig with this would fix it:

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

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

From the vscode launch.json variable reference:

来自vscode launch.json 变量参考：

${fileDirName}the current opened file's dirname

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

should be the directory you need.

应该是你需要的目录。

Note that you can also use "outFiles": ["${fileDirname}/**/*.js"]to include subdirectories.

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

The configuration you're using adds the following directory:

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

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

Which translates to something like:

这转化为类似的东西：

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

i.e. the path to the root is in there twice, making it an invalid path.

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

If your .js files are on a different outDir: simply use the path to such directory. Typescript sourceMapswill do the rest.

如果您的 .js 文件位于不同的outDir: 只需使用此类目录的路径即可。打字稿sourceMaps将完成剩下的工作。

For example, if you put your .jsfiles in a distdirectory:

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

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

回答by Aakash Malhotra

The problem may be with your map files and not with configuration.

问题可能与您的地图文件有关，而不是与配置有关。

Before trying anything else you want to make sure your paths that you are using in your launch configuration are correct.

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

You can do so by substituting the paths with absolute paths on your system temporarily to see if it works.

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

If it does not work you should:

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

Check your tsconfig and make sure mapRootunder compilerOptionsis not set to anything. This is what official documentation has to say about it:

检查您的 tsconfig 并确保mapRootundercompilerOptions未设置为任何内容。这是官方文档对它的描述：

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.

指定调试器应定位映射文件而不是生成位置的位置。如果 .map 文件在运行时位于与 .js 文件不同的位置，请使用此标志。指定的位置将嵌入到 sourceMap 中，以指示调试器将定位映射文件。

You can read more about it here

你可以在这里阅读更多关于它的信息

In most of the cases, you don't really want to set it to anything.

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

Also, make sure that

另外，请确保

"sourceMap": true`

"sourceMap"：真的`

is set in compilerOptionsin tsconfig.json and map files are getting generated.

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

回答by J. Perkins

In case someone else bumps into this: if you're using webpack to build your project, you have to use a devtoolsetting that generates VS Code compatible source maps. Through trial and error, cheap-module-source-mapand source-mapwork well. I ended up adding this to my webpack.config.js:

万一其他人碰到这个：如果你使用 webpack 来构建你的项目，你必须使用一个devtool设置来生成与 VS Code 兼容的源映射。经过反复试验，cheap-module-source-map并运行source-map良好。我最终将此添加到我的webpack.config.js：

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

回答by Scott w

You may need to enable source maps in your tsconfig.json

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

"sourceMap": true,

回答by Yogesh Umesh Vaity

Remember that the program file that you want to run should have the focus before you execute, otherwise you'll get the 'Cannot find Javascript' error dialog. Especially when the file you are executing is not a Javascript or a Typescript file. Becuase, in the default launch.jsonfile, configuration "program": "${file}"is specified. That means the file that is currently being displayed on the screen will be executed.

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

So for example: If you are in a non-js or non-ts file, say, tsconfig.jsonor launch.jsonand you click Run command, then you'll get that error dialog.

例如：如果你在一个非 js 或非 ts 文件中，比如说，tsconfig.json或者launch.json你点击运行命令，那么你会得到那个错误对话框。

Properly setting up a Typescript project in VS Code

在 VS Code 中正确设置 Typescript 项目

Make sure you have Typescript and Node.js installed on your machine before creating the project.

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

1.Intialize in the terminal

1.在终端初始化

In the terminal create a new folder for your project.

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

mkdir MyProject

Change the current directory to the folder you made above.

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

cd MyProject

Initialize the project to enable Typescript. This will create the tsconfig.jsonfile.

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

tsc --init

Open this folder in VS Code. This command works from MacOS. You can open manually too.

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

code .

2.Configure the output directory

2.配置输出目录

Now go to the file tsconfig.jsonand add the following lines to the compilerOptions. Yes, you need to specify the output directory here in tsconfig.jsoninstead of launch.json. VS Code will always look for files in default outDirof launch.jsonwhich is ${workspaceFolder}/**/*.js.

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

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

Running/Debugging the project

运行/调试项目

Write a simple program to test and run: welcome.ts

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

console.log('Welcome to Typescript');

1.Build

1.构建

Now Click Run Build Task (Shift + Command(Ctrl) + B) from the Terminal menu of the VS Code and type the following command and press enter:

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

tsc: watch - tsconfig.json

You need to Run Build Task once when you first open the project. This will start watching for code changes in the project.

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

2.Run

2.运行

Now go to the Typescript program that you want to run (Make sure your program file .tshas the focus). From the Run menu:

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

Click Start Debugging for debug (F5)

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

OR

或者

Click Run Without Debugging (Ctrl + F5)

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

Output will be displayed in the Debug Console.

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

That's it. It may seem overwhelming at first, but it's easy once you get used to it.

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

回答by Viswanath Lekshmanan

I got it fixed by adding "sourceMap": truein tsconfig.json

我把它固定加"sourceMap": true在tsconfig.json

launch.jsonlooks like

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

回答by asuciu

I had a weird situation where my machine worked perfectly fine based on @lucascaro suggestions but on someone else's computer with the same version of vscode, node, ts, etc. I could still see the error message.

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

So, if you have followed all the instructions from @lucascaro and you are still seeing the error message try adding this to your launch.json configuration after the program property, like this:

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

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

This addition made it work on the second machine, but if i added it to mine it would not work anymore.

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

So if you are in a place where it still fails give this a try.

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

回答by mneumann

This worked in my case:

这在我的情况下有效：

Go into your gulpfile.jsand find the line that contains sourcemaps.write(). Change this line to

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

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

Rebuild your project and try running the debugger again. Credit goes to roblourens on GitHub.He linked this page,which was helpful.

重建您的项目并再次尝试运行调试器。归功于 GitHub 上的 roblourens。他链接了这个页面，这很有帮助。

回答by mrmashal

In my case the culprit was setting the working directory to some directory other than the file's directory in launch.json:

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

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

Perhaps it could be a bug in VSCode.

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

回答by ???? ??????

Hi I had the same problem. You just need to add to the user pathor the global path variablethe path you have installed npm.

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

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