How "Run-Script" works in VS Code for node.js applications when debugging?

Question

I added a config start:debug manually but then again VS Code shows another one as well. Both executes the application but when I run mine it does not show all the app console outputs in terminal e.g. errors, logs, etc. but when I run VS Code's one then everything works perfectly and I prefer to the use that config across our team.

Problem is I cant checkin the config so in another machine it does not show up as expected. How does VS Code get that config and execute it? If I can replicate that in my config then I can check it in my repo for others to use.

jsejcksn · Accepted Answer · 2021-12-15T14:00:08.083

Here are the steps to solve your mystery: by following along, you'll both discover the task configuration settings for the elusive option, and discover how it was added to your list:

Create an empty folder (I named mine so-70196209 after this question ID), and open it in a new VS Code workspace.

Create a package.json file in the folder. Make sure it has a start:debug script entry like this:

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

In the VS Code menu, select "Run" > "Add Configuration..."

In the list that appears, select "Node.js":

A file at .vscode/launch.json will be created with a default task like this:

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

You can delete this default task later if you don't want to keep it, but just leave it for now and follow along to the end.

Select the "Run and Debug" icon in the Activity Bar.
In the "Run and Debug" Side Bar, select the dropdown menu and choose "Node.js...":
In the list that appears, find the entry with the text "Run Script: start:debug". Find the gear icon on the right, and select the gear.

If you hover over the gear, a tooltip will appear with the text "Edit Debug Configuration in launch.json"

This will add a new entry to .vscode/launch.json, and this entry is the one that you've been searching for. (The reason why it wasn't in your launch config, but was in your dropdown list, is because you previously clicked the entry line at some point, but not the gear. I don't know why this adds it to the dropdown and not the config, but that's how it works right now.)

The config file now looks like this:

.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}"
    }
  ]
}
```
The "Run and Debug" dropdown menu now has the entry you want:

Problem solved!

dee · Answer 2 · 2021-12-16T06:59:24.223

You can certainly commit your .vscode folder as suggested by a VS code developer here and a video on it here

The additional Run:Script you see is added by VScode when you have start:debug defined in the scripts in your package.json.

In already existing projects, to share configs, committing your VScode folder is the only option and for new projects, best approach to share the configurations would be to have your own boilerplate creator with all the required configs added.

Create a wrapper around create-react-app to spawn the application boilerplate or your own custom webpack boilerplate with all the configurations needed ( the one I'd created with redux setup: https://www.npmjs.com/package/mytidbit-react-redux-app ), and have the configs added to .gitignore like below.

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

When your team uses this boilerplate creator to spawn/start a project from scratch, they all will have uniform configs as you wanted. so the entire team is in sync. Only issue would be cross-platform compatibility with respect to LF/CRLF EOL etc.

with start:debug in the package.json scripts and your custom config. VScode adds that Run-Script

After removing start:debug from the package.json scripts, delete vscode/launch.json and recreate/add. launch config below

I can definitely add the `.vscode` folder but as you can see from the screenshot that `Run-Script ...` is not part of the config. VS Code generated that somehow. I want that config not the one I wrote myself as shown in the screenshot. — lbrahim, Dec 09 '21 at 05:55

How "Run-Script" works in VS Code for node.js applications when debugging?

2 Answers2