调试时“运行脚本”如何在 VS Code 中为 node.js 应用程序工作？

Posted 2023-03-16

【中文标题】调试时“运行脚本”如何在 VS Code 中为 node.js 应用程序工作？

【英文标题】：How "Run-Script" works in VS Code for node.js applications when debugging?

【发布时间】：2022-01-08 18:04:34

【问题描述】：

我手动添加了一个配置start:debug，但是 VS Code 又显示了另一个。两者都执行应用程序，但是当我运行我的应用程序时，它不会在终端中显示所有应用程序控制台输出，例如错误、日志等，但是当我运行 VS Code 时，一切正常，我更喜欢在我们的团队中使用该配置。

问题是我无法签入配置，因此在另一台机器上它没有按预期显示。 VS Code 如何获取该配置并执行它？如果我可以在我的配置中复制它，那么我可以在我的仓库中检查它以供其他人使用。

【参考方案1】：

您当然可以按照VS code developer here 和video on it here 的建议提交您的.vscode 文件夹

当您在package.json 的脚本中定义了start:debug 时，您看到的额外Run:Script 是由VScode 添加的。

在现有项目中，要共享配置，提交 VScode 文件夹是唯一的选择，对于新项目，共享配置的最佳方法是拥有您自己的样板创建者，并添加了所有必需的配置。

围绕create-react-app 创建一个包装器，以生成应用程序样板或您自己的自定义webpack 样板，其中包含所需的所有配置（我使用redux 设置创建的那个：https://www.npmjs.com/package/mytidbit-react-redux-app） ，并将配置添加到.gitignore，如下所示。

#IDE
.vscode/*
!.vscode/launch.json

当您的团队使用此样板创建器从头开始生成/启动项目时，他们都将拥有您想要的 uniform configs。所以整个团队是同步的。唯一的问题是 LF/CRLF EOL 等方面的跨平台兼容性。

在package.json 脚本和您的自定义配置中使用start:debug。 VScode 补充说 Run-Script

从package.json 脚本中删除start:debug 后，删除vscode/launch.json 并重新创建/添加。下面启动配置

【讨论】：

我绝对可以添加.vscode 文件夹，但从截图中可以看出Run-Script ... 不是配置的一部分。 VS Code 以某种方式生成了它。我想要那个配置不是我自己写的，如屏幕截图所示。

更新了我的答案。

【参考方案2】：

以下是解开谜团的步骤：按照以下步骤，您将发现难以捉摸的选项的任务配置设置，并发现它是如何添加到您的列表中的：

创建一个空文件夹（我以这个问题 ID 命名我的 so-70196209），并在新的 VS Code 工作区中打开它。

在文件夹中创建一个package.json 文件。确保它有一个像这样的start:debug 脚本条目：

package.json:

  "name": "so-70196209",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": 
    "start:debug": "echo \"Success\"",
    "test": "echo \"Error: no test specified\" && exit 1"
  ,
  "author": "",
  "license": "MIT"

在 VS Code 菜单中，选择“运行”>“添加配置...”

在出现的列表中，选择“Node.js”：

.vscode/launch.json 的文件将使用如下默认任务创建：

.vscode/launch.json:

  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    
      "type": "pwa-node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "$file"
    
  ]

如果您不想保留此默认任务，可以稍后将其删除，但暂时保留它并继续进行到最后。

在Activity Bar 中选择“运行和调试”图标。

在“运行和调试”侧边栏中，选择下拉菜单并选择“Node.js...”：

在出现的列表中，找到带有“运行脚本：启动：调试”文本的条目。找到右侧的齿轮图标，然后选择齿轮。

如果您将鼠标悬停在齿轮上，则会出现一个工具提示，其中包含文本“Edit Debug Configuration in launch.json”

这将为.vscode/launch.json 添加一个新条目，该条目就是您一直在搜索的条目。 （它不在您的启动配置中，而是在您的下拉列表中的原因是因为您之前在某个时候单击了入口行，而不是齿轮。我不知道为什么这会将其添加到下拉列表中并且不是配置，但这就是它现在的工作方式。）

配置文件现在如下所示：

.vscode/launch.json:

  "version": "0.2.0",
  "configurations": [
    
      "type": "pwa-node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "$file"
    ,
    
      "type": "node-terminal",
      "name": "Run Script: start:debug",
      "request": "launch",
      "command": "npm run start:debug",
      "cwd": "$workspaceFolder"
    
  ]

“运行和调试”下拉菜单现在包含您想要的条目：

问题解决了！ ?