How to execute vscode npm

How to execute vscode npm?

vscode Debugging node npm and nodemon

There are many ways to debug nodejs. You can read this article How to Debug Node.js with the Best Tools Available. Among them, my favorite method is V8 Inspector and vscode.

In vscode, click the spider button

to see the debug sidebar, then add the configuration

Select the environment

See the launch.json file.

When starting, select the corresponding configuration, and then click the green triangle pointing to the right

launch mode and attach mode

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceRoot}/index.js"
    },
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to Port",
      "address": "localhost",
      "port": 5858
    }
  ]
}

When the request is launch, it is launch mode Yes, this is the program started from vscode. If it is debugging, it will always be in debugging mode. The attach mode is to connect to an already started service. For example, if you have started the project outside and suddenly need to debug it, you do not need to close the started project and restart it in vscode. As long as you start it in attach mode, vscode can connect to the already started service. When debugging is over, just disconnect, which is obviously more convenient than launch.

Use npm to start in debug

Many times we write long startup commands and configurations in the scripts of package.json, such as

"scripts": {
  "start": "NODE_ENV=production PORT=8080 babel-node ./bin/www",
  "dev": "nodemon --inspect --exec babel-node --presets env ./bin/www"
},

We want vscode to start and debug using npm, which requires the following configuration

{
  "name": "Launch via NPM",
  "type": "node",
  "request": "launch",
  "runtimeExecutable": "npm",
  "runtimeArgs": [
    "run-script", "dev"//这里的dev就对应package.json中的scripts中的dev
  ],
    "port": 9229//这个端口是调试的端口，不是项目启动的端口
},

Use nodemon to start in debug

Just use npm to start , although nodemon is used in the dev command, the program can be restarted normally, but after restarting, debugging is disconnected. So you need to let vscode use nodemon to start the project.

{
  "type": "node",
  "request": "launch",
  "name": "nodemon",
  "runtimeExecutable": "nodemon",
  "args": ["${workspaceRoot}/bin/www"],
  "restart": true,
  "protocol": "inspector",//相当于--inspect了
  "sourceMaps": true,
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen",
  "runtimeArgs": [//对应nodemon --inspect之后除了启动文件之外的其他配置
    "--exec",
    "babel-node",
    "--presets",
    "env"
  ]
},

Pay attention to the runtimeArgs here. If these configurations are written in package.json, it will look like this.

nodemon --inspect --exec babel-node --presets env ./bin/www

This is very convenient. The project can be restarted normally, the same every time it is restarted. The debugging function will be enabled.

But what should we do if we don’t want to enable the debugging function all the time?

This requires using the attach mode mentioned above.

Use the following command to start the project normally

nodemon --inspect --exec babel-node --presets env ./bin/www

When we want to debug, run the following configuration in the debug of vscode

{
  "type": "node",
  "request": "attach",
  "name": "Attach to node",
  "restart": true,
  "port": 9229
}

Perfect!

The above is the detailed content of How to execute vscode npm. For more information, please follow other related articles on the PHP Chinese website!