Shulou(Shulou.com)06/02 Report--

This article is about how to implement vscode npm. Xiaobian thinks it is quite practical, so share it with everyone for reference. Let's follow Xiaobian and have a look.

How does vscode npm work?

vscode debug node npm and nodemon

How to Debug Node.js with the Best Tools Available, my favorite of which is V8 Inspector and vscode.

In vscode, click the spider button

You can see the sidebar where debug appears, and then add configuration

selection context

You can see the launch.json file.

To start, select the appropriate configuration and click on 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 request is launch, it is launch mode, which is the program is launched from vscode here, if it is debugging it will always be in debug mode. The attach mode is to connect services that have already been started. For example, if you have started a project outside and suddenly need to debug, you don't 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 started service. When debugging is over, disconnect, which is obviously a little more convenient than launch.

Start with npm in debug

Many times we write very long startup commands and configurations in the scripts of package.json. For example,

"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 here corresponds to dev ] in scripts in package.json. "port": 9229//This port is the debug port, not the project startup port},

Start with nodemon in debug

Just start with npm, although nodemon is used in dev command, the program will restart normally, but after restarting, debugging will be disconnected. So you need to get vscode to start the project using nodemon.

{ "type":"node", "request": "launch", "name": "nodemon", "runtimeExecutable": "nodemon", "args": ["${workspaceRoot}/bin/www"], "restart": true, "protocol": "inspector",//equivalent to--inspect "sourceMaps": true, "console": "integratedTerminal", "internalConsoleOptions": "neverOpen", "runtimeArgs":[//corresponds to nodemon --inspect after other configuration except boot file "--exec", "babel-node", "--presets", "env" ]},

Note the runtimeArgs here, which is what this configuration would look like if it were written in package.json.

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

This is very convenient, the project can be restarted normally, and each restart will open the debugging function.

But what if we don't want to turn on debugging all the time?

This requires the use of the attach mode described 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 vscode debug

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

Perfect!

Thank you for reading! About "vscode npm how to implement" this article is shared here, I hope the above content can be of some help to everyone, so that everyone can learn more knowledge, if you think the article is good, you can share it to let more people see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.