How to attach debugger to yarn start command - visual-studio-code

I have the following command yarn start-package with package being the project for package
I have configured the following launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Package Debuger",
"preLaunchTask": "yarn start-package"
}
]
}
I have configured the following tasks.json
{
"version": "2.0.0",
"tasks": [
{
"label": "yarn start-package",
"type": "npm",
"script": "start",
"path": "packages/package",
"problemMatcher": []
}
]
}
Now whenever i start debugger, it will never attach because the prelaunch task is starting the developing server and never finishes. How can i attach the debugger to the yarn start-package command correctly?
Note: I am using wsl for running the yarn command if it matters

Related

Preload module in VSCode Launch debug

I'm trying to configure my VSCode launch.json for my node app. My node command for starting the app uses the -r flag to preload a module (dotenv/config). How do I configure that in my launch.json? I can't figure it out.
My run command:
node -r dotenv/config server.js
My launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-node",
"request": "launch",
"name": "My Launch",
"skipFiles": ["<node_internals>/**"],
"program": "${workspaceRoot}\\myapp\\src\\server.js",
"env": {
"MY_CONFIG_PATH": ".env"
}
}
]
}
I am also struggling with adding the preLoadedModules in my launch.json, but if you are just wanting to load your environment file you can add "envFile":"${workspaceFolder}/.env" to your launch.json and your app should run.
Example below:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\dist\\index.js",
"preLaunchTask": "tsc: build - tsconfig.json",
"envFile": "${workspaceFolder}/.env",
"outFiles": [
"${workspaceFolder}/dist/**/*.js"
]
}
]
}

How do I setup VSCode to run and debug KeystoneJS application

I am trying to setup VSCode to run and debug my KeystoneJS application.
I currently run the application using npm run dev or yarn dev - in package.json, the dev script is set like this:
"scripts": {
"dev": "cross-env NODE_ENV=development DISABLE_LOGGING=true keystone dev"
},
If I try to run cross-env NODE_ENV=development DISABLE_LOGGING=true keystone dev from my prompt, I get the error, command not found. I would love to understand why this is not working...
I tried to setup my debug configuration in launch.json like this:
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/keystone",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceFolder}",
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"PORT":"3030",
"NODE_ENV":"development",
"DISABLE_LOGGING":"true"
}
}
]
}
but it returns the error
this is how you can do this by changing npm script for dev
"dev": "cross-env PORT=4000 NODE_ENV=development NODE_OPTIONS=--inspect DISABLE_LOGGING=true keystone dev",
NODE_OPTIONS=--inspect or NODE_OPTIONS=--inspect-brk does the magic.
You must do this after cross-env as indicated above and not like below.
"dev": "NODE_OPTIONS=--inspect cross-env PORT=4000 NODE_ENV=development DISABLE_LOGGING=true keystone dev", (does not work)
Edit: 8 may
You can use following config in launch.json in vscode, (ideally the npm script should be called debug)
With NPM
{
// 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": "node",
"request": "launch",
"name": "Launch via NPM",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script",
"dev"
],
"port": 9229,
"skipFiles": [
"<node_internals>/**"
]
}
]
}
with YARN
{
// 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": "node",
"request": "launch",
"name": "Launch via NPM",
"runtimeExecutable": "yarn",
"runtimeArgs": [
"dev"
],
"port": 9229,
"skipFiles": [
"<node_internals>/**"
]
}
]
}
change port only if you change port in NODE_OPTIONS in package.json script

VS Code tasks cannot be found by launch config when they are located in workspace config

In tradition, we put launch.json and tasks.json in .vscode folder in order to make debugger works. Meanwhile, VS Code also support developer to put these 2 configurations into workspace by setting them in *.vscode-workspace. Here are the steps to reproduce:
Create new js project by npm init with all default parameters.
Create new index.js with 1 line of code: console.log('done');
Create new ts-sample.code-workspace file within the same root folder, the content should be like following:
{
"launch": {
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/index.js",
"preLaunchTask": "nodeversion"
}
]
},
"tasks": {
"version": "2.0.0",
"tasks": [
{
"label": "nodeversion",
"type": "npm",
"script": "nodeversion",
}
]
},
"folders": [
{
"path": "."
}
]
}
Open the workspace
Open index.js and press F5
Error dialog prompted our with the following error message: Could not find the task 'nodeversion'
Open OUTPUT Panel and Error message is shown as following:
Error: The npm task detection didn't contribute a task for the following configuration:
{
"label": "nodeversion",
"type": "npm",
"script": "nodeversion"
}
The task will be ignored.
For easy demo please clone the sample project from https://github.com/mannok/WorkspaceLaunchTaskDemo
Is this a bug of VS Code or something I have missed?

Is it possible to open a new terminal inside VSCode from inside a script?

I want to start 3 servers from a single command.
I have package.json scripts like so:
"serve_auth": "cd dev/mock/auth && nodemon --exec babel-node ./server.js --presets #babel/env",
"serve_db": "cd dev/mock/db && nodemon --exec babel-node ./server.js --presets #babel/env",
"start": "react-scripts start",
"develop": "./launch_script.sh"
and I have a script launch_script.sh like so:
#!/bin/bash
( yarn serve_db ) & ( yarn serve_auth ) & ( yarn start )
but this opens them all in a single terminal window, and they end up tripping all over each other.
I know you can open new terminals from the VSCode GUI, but is it possible to open a new terminal from within one? Or to tell VSCode to open 3 terminals each with a separate command ?
I think this could be something for compound tasks
{
"version": "2.0.0",
"tasks": [
{
"label": "Client Build",
"command": "gulp",
"args": ["build"],
"options": {
"cwd": "${workspaceRoot}/client"
}
},
{
"label": "Server Build",
"command": "gulp",
"args": ["build"],
"options": {
"cwd": "${workspaceRoot}/server"
}
},
{
"label": "Build",
"dependsOn": ["Client Build", "Server Build"]
}
]
}
Compound tasks
You can also compose tasks out of simpler tasks with
the dependsOn property. For example, if you have a workspace with a
client and server folder and both contain a build script, you can
create a task that starts both build scripts in separate terminals. If
you list more than one task in the dependsOn property, they are
executed in parallel by default.
Also compound launch configurations may be interesting to you as it seems like your scripts are for starting a frontend and backend app.
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Server",
"program": "${workspaceFolder}/server.js",
"cwd": "${workspaceFolder}"
},
{
"type": "node",
"request": "launch",
"name": "Client",
"program": "${workspaceFolder}/client.js",
"cwd": "${workspaceFolder}"
}
],
"compounds": [
{
"name": "Server/Client",
"configurations": ["Server", "Client"]
}
]
}
Both are examples from the corresponding docs page but adjusting them to your scripts should be straightforward.

How to run a command in Visual Studio Code with launch.json

Is there a way to execute an ssh command when debugging a project with .vscode/launch.json?
For example: ssh -i xxxxx.
Or is it possible to create a command that you can run from the F1 command palette pop-up? Something like RunCustomCommandxx.
You can define a task in your tasks.json file and specify that as the preLaunchTask in your launch.json and the task will be executed before debugging begins.
Example:
In tasks.json:
For version 0.1.0:
{
"version": "0.1.0",
"tasks": [{
"taskName": "echotest",
"command": "echo", // Could be any other shell command
"args": ["test"],
"isShellCommand": true
}]
}
For version 2.0.0 (newer and recommended):
{
"version": "2.0.0",
"tasks": [{
"label": "echotest",
"command": "echo", // Could be any other shell command
"args": ["test"],
"type": "shell"
}]
}
In launch.json:
{
"configurations": [
{
// ...
"preLaunchTask": "echotest", // The name of the task defined above
// ...
}
]
}
Tasks documentation: https://code.visualstudio.com/docs/editor/tasks
Launch configuration: https://code.visualstudio.com/docs/editor/debugging#_launch-configurations
The format changed. Visual Studio Code can create the tasks.json file for you. Inside your launch.json file and inside any configurations object, just define preLaunchTask to force auto-creation of the tasks.json template file:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "launch program",
"skipFiles": [ "<node_internals>/**"],
"preLaunchTask": "myShellCommand",
"program": "${workspaceFolder}/test.js"
}
]
}
If you do not have file tasks.json configured:
launch the debugger. Visual Studio Code will inform you: "could not find the task
myShellCommand"
select Configure Task → Create tasks.json file
from template → Others
Your tasks.json template file will then be created for you. Add your command to command and the name you put in preLaunchTask to label:
{
"version": "2.0.0",
"tasks": [
{
"label": "myShellCommand",
"type": "shell",
"command": "echo goodfood"
}
]
}
For me, I just needed an environment variable, which is different. You don't want a task for this because (at least for me) it doesn't work when the launcher is run.
Thanks to here, I got it working like this, inside my launcher (launch.json) entry:
"environment": [{
"name": "ENVIRONMENT_VARIABLE_NAME",
"value": "${workspaceFolder}/lib" //Set to whatever value you want.
}],
My version of the configuration allows to just run a defined task and carried on (in my case, the task is to run the currently open Groovy file):
"configurations": [
{
"name": "Launch groovy",
"request": "launch",
"type": "coreclr",
"preLaunchTask": "groovy",
"program": "cmd.exe",
"args": ["/c"],
"cwd": "${workspaceFolder}",
"console": "internalConsole",
"internalConsoleOptions": "neverOpen"
}
]
And the task:
"tasks": [
{
"label": "groovy",
"type": "shell",
"command": "groovy ${file}"
}
]
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch app",
"program": "lib/main.dart",
"request": "launch",
"type": "dart"
},
{
"name": "Build an APK Release",
"command": "flutter build apk --release",
"request": "launch",
"type": "node-terminal"
},
{
"name": "Install an APK on a device",
"command": "flutter install",
"request": "launch",
"type": "node-terminal"
}
]
}
for flutter developers who is searching how to run flutter build commands.
in tasks.json add
"tasks": [
{
"type": "flutter",
"command": "flutter",
"args": [
"pub",
"run",
"build_runner",
"build",
"--delete-conflicting-outputs"
],
"problemMatcher": [
"$dart-build_runner"
],
"group": "build",
"label": "flutter: flutter pub run build_runner build --delete-conflicting-outputs"
},
]
then from vscode you can try "run task" it will show you flutter: flutter pub run build_runner build --delete-conflicting-outputs
this way you don't need to memorize and type to terminal source code generation/build commands