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

Question

我使用的是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"
]}

Answer 1

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

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

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

如果不起作用，您应该：

检查您的tsconfig并确保mapRoot下的compilerOptions未设置为任何内容。这是官方文件中有关它的说法：

  

指定调试器应该找到映射文件的位置   生成的位置。如果.map文件将使用此标志   位于运行时位于.js文件之外的其他位置。该   指定的位置将嵌入到sourceMap中以指示   地图文件所在的调试器。

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

在大多数情况下，你真的不想把它设置为任何东西。

另外，请确保

"sourceMap"：true`

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

Answer 2

您的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 上：只需使用该目录的路径即可。打字稿sourceMaps将完成其余工作。

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

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

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

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

"sourceMap": true,

Answer 5

我通过在"sourceMap": true

中添加 tsconfig.json 来解决此问题

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 6

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

因此，例如：如果您使用的是非js或非ts文件，请说tsconfig.json或launch.json，然后单击“运行命令”，则将显示该错误对话框。 / p>

使用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始终会在默认的{em> 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.Build

现在，从VS Code的“终端”菜单中单击“运行构建任务”（Shift + Command（Ctrl）+ B），然后键入以下命令，然后按Enter：

tsc: watch - tsconfig.json

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

2。运行

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

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

OR

点击无需调试即可运行（Ctrl + F5）

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

就是这样。乍一看似乎有些让人不知所措，但是一旦您习惯了它就很容易了。

Answer 7

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

因此，如果您遵循了@lucascaro的所有说明，并且仍然看到错误消息，请尝试将其添加到program属性之后的launch.json配置中，如下所示：

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

此添加使其可以在第二台计算机上使用，但是如果我将其添加到我的计算机上，将无法使用。

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

Answer 8

这对我而言有效：

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

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

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

Answer 9

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

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

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

Answer 10

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

$form = $request->request->get('form');
var_dump($form['quantity']);