VSCode - Launch.json specify arguments - node.js

I am using the dotenv package to inject environment variables to my OS which I can specify by calling the following:
node -r dotenv/config dist/app.js
How can I run the same command from launch.json? Currently I have the following but it doesn't load the dotenv package
"program": "${workspaceFolder}\\dist\\app.js",
"args": [
"-r dotenv/config"
],

Try using this as one of the keys instead of args:
"runtimeArgs": [
"-r",
"dotenv/config"
]

Related

Launch config for yarn in VSCode?

I'm trying to add a launch config to VSCode for local debugging. Our command line is
yarn dev (which in package.json is
"dev": "ENV_FILE=./config/.env.dev ts-node -r tsconfig-paths/register ./src/app.ts",
and runs fine)
I've added this launch config in VSCode:
{
"name": "Launch via yarn",
"outFiles": [
"${workspaceFolder}/dist/**/*.js",
"!**/node_modules/**"
],
"runtimeExecutable": "yarn",
"runtimeArgs": ["dev"],
"request": "launch",
"skipFiles": [
"<node_internals>/**"
],
"type": "node"
},
and it just exits with this in the debug console:
/usr/local/bin/yarn dev
Process exited with code 1
(it also errored out before when I had another process already running, so it couldn't listen on the port. But that's not the case now. And when that was failing, also no real output [while yarn dev correctly told me it couldn't listen on the port])
It's weird that there's no output at all.
I suspect I'm missing something very obvious. (Relatively new to both node and VSCode)

Debugging in VSCode with a npm script

In my package.json I have some scripts defined that look like this:
"scripts": {
"build": "tsc -p tsconfig.json",
"run": "node --experimental-specifier-resolution=node .",
"start": "npm run build && npm run run"
}
For now I just used npm run start from the terminal to compile and run everything but I want to use breakpoints now and would like to switch to the VSCode debugging.
I don't know what the launch.json configuration should look like to run scripts.
My project structure looks something like this:
.
├── package.json
├── src/
│ └── start.ts
└── dist/
└── start.js
What I think my best attempt so far was:
{
"name": "Launch via NPM",
"request": "launch",
"type": "node",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run",
"start"
],
},
Which sadly gives me the following error:
Exception has occurred: Error: ENOENT: no such file or directory, stat '{cwd}\git.COM'
Replacing "runtimeArgs": ["run","start"], with "command": "npm run start", gives me the same error.
Using a NPM script
You could create an additional script in your package.json to launch node with the instruction to wait for a debugger to be attached. IMHO, this is not ideal and I would avoid it but it's sometimes necessary (for example when node is launched by some shell script):
"scripts": {
"debug": "npm run build && node --experimental-specifier-resolution=node --inspect-brk ."
}
Then you would need a configuration in your launch.json to attach the debugger to the waiting node process:
{
"name": "Attach",
"type": "node",
"request": "attach",
"skipFiles": ["<node_internals>/**"],
"outFiles": ["${workspaceFolder}/dist/**/*.js"]
}
Launching node directly
Another possibility is to launch node in your launch.json with the appropriate arguments. There is a little code duplication with your package.json but that's how I do it myself.
Note that if you want to debug directly your TS files, you have to generate the source maps and indicate the location of the generated JS files.
Here is how it would look like:
{
"name": "Debug",
"type": "node",
"request": "launch",
"skipFiles": ["<node_internals>/**"],
"program": "${workspaceFolder}/src/start.ts",
"outFiles": ["${workspaceFolder}/dist/**/*.js"],
"runtimeArgs": [
"--experimental-specifier-resolution=node"
]
}
To ensure your TS code is built, I would run TSC in watch mode in another terminal window:
tsc -p tsconfig.json --watch

VSCode: how to set shell/args for automatically detected npm scripts

I'm trying to start NPM scripts from VSCode with a custom shell (I want the NPM command to be directly prefixed by wsl.exe --, e.g. wsl.exe -- npm start). I've found a way to make it work but it requires me to set my task type to "shell" and set my shell config like so:
"version": "2.0.0",
"options": {
"shell": { <-- Shell config that I need
"executable": "wsl.exe",
"args": [
"--"
]
},
},
"tasks": [
{
"type": "shell", <-- Sample task I want to execute
"command": "npm start",
"label": "...",
"detail": "...",
},
But VSCode automatic tasks detection ("NPM Scripts" section of the sidebar) uses tasks with the type set as "npm" instead of "shell". This is the config VSCode uses for such automatic tasks:
{
"type": "npm", <-- NPM task that I want, but for which the shell config won't apply
"script": "start",
"problemMatcher": [],
"label": "npm: start",
"detail": "ng serve --proxy-config proxy.conf.json"
}
And this type of tasks do not use the shell config from the first example above (it uses wsl.exe -e <npm command> instead, which can't work in my environment) Is there a way to set a terminal/shell config for this specific kind of tasks?
To reformulate: can I set a shell executable and args for tasks of type "npm" (if so, how?) or I am forced to use tasks of type "shell" and give up on using VSCode automatic tasks detection (which are of the "npm" type)?

Vscode breakpoints for TypeScript Mocha tests

I have started developing a Node/ExpreeJS project in TypeScript.
I should note that I am not running node directly. I am running node in a docker but I do not see any reason that this would be an issue.
I am using vscode as my editor and I am trying to configure a debug launch config for Mocha tests.
My launch configuration is
{
"type": "node",
"request": "launch",
"name": "SK - Mocha Tests",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "make",
"runtimeArgs": [
"test-brk"
],
"port": 9321,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"protocol": "inspector",
"sourceMaps": true,
}
The make test-brk command simply maps to a docker exec command that executes npm run test-brk within the container.
My package.json contains this script definition for test-brk
"test-brk": "mocha --require source-map-support/register --require node_modules/ts-node/register --inspect-brk=0.0.0.0:9222 --debug-brk --exit test/**/*.spec.ts"
Running the SK - Mocha Tests debug task from vscode launches Mocha and runs the tests as expected.
The inspect server is started and the vscode debugger successfully connects as can be seen in the output below.
$ cd /home/andrew/workspace/service-kit/sk-base-nodejs ; /usr/bin/make test-brk
(docker exec node npm run test-brk)
> sk-base-nodejs#0.0.1 test-brk /workspace
> mocha --require source-map-support/register --require node_modules/ts-node/register --inspect-brk=0.0.0.0:9321 --debug-brk --exit test/**/*.spec.ts
Debugger listening on ws://0.0.0.0:9321/d696c7a4-c4e1-4212-af85-ab1675856a7a
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
HTTP server listening on port 8080
Hello World
✓ should return 200 and Hello World
1 passing (34ms)
Waiting for the debugger to disconnect...
However breakpoints are not being hit.
I have set in both the application TS source and the test TS source.
When the tests are running the breakpoints grey out and show
Breakpoint ignored because generated code not found (source map problem?)
I understand that this is a source map issue between the source TS and the JS being executed for the tests.
As above I am using ts-node with Mocha there seems to be a problem because ts-node does not generate source map files for vscode to read.
This is described in ts-node/issues/46 however there is no solution in that issue. It ultimately links to vscode-chrome-debug-core/issues/533 which reports that it is fixed in a previous release of vscode.
There is also vscode/issues/3144 which suggests transpiling the TS tests into JS and then executing the JS.. but this doesn't allow debugging the source TS.
I would greatly appreciate any input to point me in the right direction.
I was able to get it to work with the following launch configuration:
{
"name": "Run Mocha",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
"args": [
"--no-timeouts",
"--require",
"ts-node/register",
"${workspaceRoot}/src/**/*.spec.ts"
],
"cwd": "${workspaceRoot}",
"protocol": "inspector"
}
I also had to set module as commonjs in my tsconfig.json:
{
"compilerOptions": {
"module": "commonjs",
}
}
Here's an example repo with all the files setup correctly
Further Reading
Issue with mocha test debugging from typescript
Running Mocha with TypeScript

VSCode editor - Restart NodeJs server when file is changed

I am using Visual Studio Code as my editor for NodeJS project.
Currently I need to manually restart server when I change files in my project.
Is there any plugin or configuration change in VSCode that can restart NodeJS server automatically when I make change in files.
You can now use Nodemon with VS Code to achieve this. I tested the Nodemon support for VS Code today and it worked well for me. Below are my VS Code details.
Version: 1.9.1
Commit: f9d0c687ff2ea7aabd85fb9a43129117c0ecf519
Date: 2017-02-09T00:26:45.394Z
Shell: 1.4.6
Renderer: 53.0.2785.143
Node: 6.5.0
I installed Nodemon globally npm install -g nodemon and created VS Code launch configuration as below
{
"name": "Nodemon Launch Server",
"type": "node",
"request": "launch",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "nodemon",
"runtimeArgs": [
"--debug=5858"
],
"program": "${workspaceRoot}/server.js",
"restart": true,
"port": 5858,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
Reference: https://code.visualstudio.com/docs/editor/node-debugging#_restarting-debug-sessions-automatically-when-source-is-edited
You can also install nodemon locally npm install nodemon --save-dev.
And the following example of configurations of VS Code launch.json:
[
{
"name": "Nodemon",
"type": "node",
"request": "launch",
"runtimeExecutable": "${workspaceFolder}/node_modules/nodemon/bin/nodemon.js",
"program": "${workspaceFolder}/src/server/index.js",
"restart": true,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
]
Restarting the debugger automatically after editing our Application files :
Add debugger configuration in Vscode lunch program for nodejs like below screen-shot.
Add two lines in below file path:
.vscode/launch.json
"runtimeExecutable": "nodemon",
"restart":true
Assuming the you have installed nodemon globally
npm install nodemon -g
More information follow the official document link: https://code.visualstudio.com/docs/nodejs/nodejs-debugging
Use pm2 to watch your code and restart automatically
npm install pm2 -g
npm install pm2
process.json
{
name : "App",
script : "app.js",
watch : true,
}
You can find the demo #
https://github.com/sivasankars/jade-title-rendering
To add to Siva's comments
This would go to the ecosystem.config.js with the new pm2 version
module.exports = {
apps : [{
**name: 'App',
script: 'app.js',
watch: false,**
max_memory_restart: '1G',
env: {
NODE_ENV: 'development'
},
env_production: {
NODE_ENV: 'production'
}
}],
deploy : {
production : {
user : 'node',
host : '212.83.163.1',
ref : 'origin/master',
repo : 'git#github.com:repo.git',
path : '/var/www/production',
'post-deploy' : 'npm install && pm2 reload ecosystem.config.js --env production'
}
}
};
Here is what worked for me to run an Express server:
{
"name": "Nodemon Launch Server",
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "nodemon",
"runtimeArgs": [
"--inspect-brk"
],
"program": "${workspaceFolder}/bin/www",
"restart": true,
// "console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
For me the Oleksandr's answer didn't work.
Instead of
"runtimeExecutable": "${workspaceFolder}/node_modules/nodemon/bin/nodemon.js",
the below should work.
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/nodemon",
Also note that making sure the node program file should be on the current or project directory, for example, nodemon-ning ./../file.js may not work but nodemon does not restart the program when its file change depending on the nodemon version or the environment. Your script file should be located on e.g. ./file.js

Resources