Running two projects at once in Visual Studio Code - visual-studio-code

I develop web project. Server is node.js application written in TypeScript. Client also written in Typescript. I need two ability:
to compile different projects with different compiler options in different folders.
to debug both projects at the same time.
How can I do this?

See our documentation on multitarget debugging: https://code.visualstudio.com/Docs/editor/debugging#_multitarget-debugging
In your launch.json, just create a compounds section that contains the targets you want to debug
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Server",
"program": "${workspaceRoot}/server.js",
"cwd": "${workspaceRoot}"
},
{
"type": "node",
"request": "launch",
"name": "Client",
"program": "${workspaceRoot}/client.js",
"cwd": "${workspaceRoot}"
}
],
"compounds": [
{
"name": "Server/Client",
"configurations": ["Server", "Client"]
}
]
}

Related

How to configure launch.json for NextJs and Typesctipt

I am trying to create a launch.json file for the following repo:
https://github.com/zakariamofaddel/shopify-nextjs-template
I have tried both the default VS Code node template and the NextJs launch file.
VS code default Node generated .vscode/launch.json file
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\server\\index.ts"
}
]
}
I am able to run yarn dev successfully and use console.log:
https://github.com/zakariamofaddel/shopify-nextjs-template/blob/38c700d8706818aa12d892b3f1193a969919e003/package.json#L9
I found the solution after adding the TypeScript Debugger extension in VS code.
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Localhost",
"type": "node",
"request": "launch",
"args": [
"${workspaceRoot}\\server\\server.ts"
],
"runtimeArgs": [
"-r",
"ts-node/register/transpile-only"
],
"cwd": "${workspaceRoot}",
"protocol": "inspector",
"internalConsoleOptions": "openOnSessionStart",
"env": {
"NODE_ENV": "development"
}
}
]
}

VSCode debugger not working in Jest tests

I'm struggling to get the Visual Studio Code debugger working in with Jest tests.
Here is my launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Jest All",
"program": "${workspaceFolder}/node_modules/jest/bin/jest",
"args": ["--runInBand"],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"sourceMaps": true
}
]
}
Here are my Jest tests with a couple of breakpoints:
When I hit the green play button to run the tests with the debugger, the breakpoints are never hit.
Any help would be appreciated
Personnally I use this configuration
{
"name": "Launch e2e test",
"type": "node",
"request": "launch",
"env": {
"NODE_ENV": "test"
},
"args": [
"--colors",
"--config=${workspaceFolder}/jest-e2e.config.js",
"--runInBand",
"--coverage"
],
"runtimeArgs": [
"--nolazy"
],
"windows": {
"program": "${workspaceFolder}/node_modules/jest/bin/jest",
},
"outputCapture": "std",
"internalConsoleOptions": "openOnSessionStart"
}
Change jest-e2e.config.js by your configuration file. And remove or keep coverage
Like Laura Slocum said you will certainly have problem with line number. In my case personnaly think that the problem come from the jest configuration, the transform :
transform: {
"^.+\\.(t|j)s$": "ts-jest"
},
This configuration let's me debug the jest test. Unfortunately hitting a breakpoint in the component does not show the correct line, even though it is stepping through the correct code. I believe this is probably a VSCode error though
{
"name": "Jest", // This is the configuration name you will see in debug sidebar
"type": "node",
"request": "launch",
"port": 5858,
"address": "localhost",
"stopOnEntry": false,
"runtimeExecutable": null,
"env": {
"NODE_ENV": "development"
},
"console": "integratedTerminal",
"preLaunchTask": "compile",
"runtimeArgs": [
"--inspect-brk", // node v8 use debug-brk if older version of node
"${workspaceRoot}/node_modules/.bin/jest",
"--watch",
"--bail",
"--runInBand"
],
"cwd": "${workspaceRoot}"
},
I had the same problem with line numbers being off. In the source file I had almost 30 lines of requires, and the test file that loaded in the debugger added a blank space between each require. So the file that got loaded in vscode was about 60 lines longer.
I found this post that fixed my problem: Debugging Jest Tests in VS Code: Breakpoints Move
The problem for me was the value of the program attribute in launch.json. If your launch.json is as follows:
"program": "${workspaceFolder}/node_modules/jest/bin/jest"
Check if ${workspaceFolder}/node_modules/jest/bin/jest is actually valid. For me, the node_modules did not exist here, but in a subdirectory of workspaceFolder.
The following is the only launch.config that worked for me after trying out everything else :|
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Jest",
"program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
"args": [
"-i"
],
"skipFiles": [
"<node_internals>/**/*.js", "node_modules",
]
}
]
}
If you are using transformers like babel or swc to transform your tests before running the actual tests, the debugger in vscode may not work.
For me I'll just use the debugger.

VSCode and flutter, how to connect multiple devices?

I am using Visual Studio Code on macOS for developing Flutter apps.
I can select a single device in the bottom-left of VSC. I can also run on multiple devices using flutter run -d all. I am wondering how I can run on multiple devices using the debug console in VSC. Or, at the very least, debug one device but show updates on all.
Thank you
If you're on recent versions of Flutter and the Dart/Flutter extensions (Dec 2019 onwards) this is now supported using VS Code's compound launch configurations.
Your .vscode/launch.json should contain an entry for each device, along with its deviceId (this is the ID you would pass to flutter run -d xxx):
{
"version": "0.2.0",
"configurations": [
{
"name": "Current Device",
"request": "launch",
"type": "dart"
},
{
"name": "Android",
"request": "launch",
"type": "dart",
"deviceId": "android"
},
{
"name": "iPhone",
"request": "launch",
"type": "dart",
"deviceId": "iphone"
},
],
"compounds": [
{
"name": "All Devices",
"configurations": ["Android", "iPhone"],
}
]
}
For more information, see https://github.com/flutter/flutter/wiki/Multi-device-debugging-in-VS-Code.
How about this one, it worked for me
flutter run -d all
well you can run only two devices or two virtual machine at the same time
one using command flutter run -d <put the id of the device>
and the other using f5 and choose the other device
In Flutter 1.12 support multi device debugging in VS Code
https://github.com/flutter/flutter/wiki/Multi-device-debugging-in-VS-Code
If you have different flavors, you can configure your launch.json config as follows.
{
"version": "0.2.0",
"configurations": [
// config "Run Dev Android" and "Run Dev Iphone" will be user for multiple debuging,
{
"name": "Run Dev Android",
"request": "launch",
"deviceId": "SM",
"type": "dart",
"program": "lib/app/flavors/main_development.dart",
"flutterMode": "debug",
"args": [
"--flavor", "development",
]
},
{
"name": "Run Dev Iphone",
"flutterMode": "debug",
"deviceId": "Iphone",
"program": "lib/app/flavors/main_development.dart",
"type": "dart",
"args": [
"--flavor", "development",
]
},
{
"name": "Run Dev",
"program": "lib/app/flavors/main_development.dart",
"flutterMode": "debug",
"deviceId": "Android",
"type": "dart",
"args": [
"--flavor", "development",
]
},
{
"name": "Run Stage",
"program": "lib/app/flavors/main_staging.dart",
"flutterMode": "debug",
"type": "dart",
"args": [
"--flavor", "staging"
]
},
{
"name": "Run Prod",
"program": "lib/app/flavors/main_development.dart",
"flutterMode": "release",
"type": "dart",
"args": [
"--flavor", "production"
]
},
],
"compounds": [{
"name": "All Devices",
"configurations": ["Run Dev Android", "Run Dev Iphone"],
}]
}
Now you can select the All Device and hit run.

How to debug Cucumber in Visual Studio Code (VSCode)?

I was trying to debug Cucumber scenarios in Visual Studio code and made below changes in the launch.json.
{
"name": "e2e",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}\\node_modules\\.bin\\cucumber-js",
"stopOnEntry": false,
"args": ["--no-timeouts", "--colors"],
"cwd": "${workspaceRoot}",
"runtimeExecutable": null,
"outFiles": [
"${workspaceRoot}\\features\\step_definitions\\*.js"
]
},
However, I am not able run a debug session using the above configuration. The step def. files I created in JavaScript.
So, just need a help on the script above if that looks fine?
You could try below configuration to make your debug working in VS Code. In the outFiles give your feature file path.
{
"name": "e2e",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/cucumber/bin/cucumber.js",
"outFiles": [
"${workspaceRoot}/features/*.feature"
]
}
============================================
UPDATE AS OF cucumber ^5.0.2:
{
"name": "NPM Cukes",
"type": "node",
"request": "launch",
"console": "integratedTerminal",
"program": "${workspaceRoot}/node_modules/cucumber/bin/cucumber-js",
"args": [
"path/to/features/**/*.feature",
"-r",
"path/to/steps/**/*",
"--tags",
"#your-tags"
]
}
If you want to debug only CURRENT feature, add this to launch.json
{
"type": "node",
"request": "launch",
"program": "${workspaceFolder}/node_modules/.bin/cucumber-js",
"args": ["${relativeFile}"],
"name": "Cukes current",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"windows": {
"program": "${workspaceFolder}/node_modules/cucumber/bin/cucumber"
}
}
When working with Ruby, it could be used on this way to run specific feature files:
{
"name": "Cucumber",
"type": "Ruby",
"request": "launch",
"cwd": "${workspaceRoot}",
"program": "${workspaceRoot}/bin/cucumber",
"args": [
"--tags", "#Mytags",
]
}
Tweaking the answer from Mukesh Rawat plus ensuring additional file paths were correct, got it working for me, :
Launch.json
{
"name": "DebugMode",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/cucumber/bin/cucumber-js",
"args": [
"${workspaceRoot}/features/*.feature",
"--tags", "#debug"
]
}
Workspace.json
{
"cucumberautocomplete.steps": [
"features/steps/*.js"
],
"cucumberautocomplete.syncfeatures": "features/*.feature",
"cucumberautocomplete.strictGherkinCompletion": true,
"settings": {},
"folders": [
{
"path": "/Users/{me}/Documents/{project folder}/{project name}"
}
]
}
Package.json
"scripts": {
"debug": "node --inspect=1337 --debug-brk --nolazy node_modules/cucumber/bin/cucumber-js --tags #debug --format json:./reports/report.json",
CucumberTest.feature
#debug
Scenario: Validate I can get debug working
This works
{
"name": "DebugMode",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/cucumber/bin/cucumber-js",
"args": [
"${workspaceRoot}/features/*.feature",
"--tags", "#debug"
]
}
Here's the simplest way I've found to run Cucumber.js in the VS Code debugger:
Set JavaScript debugger auto attach to "onlyWithFlag" (Ctrl+Shift+P, type "Toggle Auto Attach")
Run Cucumber.js as follows: node --inspect ./node_modules/.bin/cucumber-js <args...>
For convenience, set an NPM run script in your test project for "debug" so you can run this as npm run debug -- <args...>
with the latest Cucumber, Playwright, typescript as of January 2023 - F5 (run in VSCode) - set debugger in ts step files and use .vscode/launch.json (you might tweak your reports location)
{
"version": "0.1.0",
"configurations": [
{
"name": "debugMode",
"type": "node",
"request": "launch",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"program": "node_modules/#cucumber/cucumber/bin/cucumber-js",
"args": [
"./features/*.feature",
"--require-module",
"ts-node/register",
"--require",
"./steps/*.steps.ts",
"--tags",
"#demoX",
"--format", "progress",
"--format", "json:./Reports/cucumber_report.json"
]
}
]
}

using grunt in launch.json

I loaded the yeoman generator-meanjs and opened it with Visual Studio Code.
The debugger works nicely. When I clicked on the debug side bar button a
launch.json file was generated for me. The launch.json generator is looking at the package.json which has "scripts": { "start": "grunt"}.
The generator uses grunt to launch the application. The launch.json file had
the following:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "grunt",
"stopOnEntry": false,
"args": [],
"cwd": ".",
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"externalConsole": false,
"sourceMaps": false,
"outDir": null
},
{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858
}
]
}
When I replace 'program' : 'grunt' with server.js it works. If I could change the type to grunt, but it seems only node or mono is supported there.
I managed to make it work by using an absolute path to grunt-cli, as follows:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Grunt",
"args": ["build"],
"program": "${env.APPDATA}\\npm\\node_modules\\grunt-cli\\bin\\grunt",
"stopOnEntry": true,
"cwd": "${workspaceRoot}"
}
]
}
As pointed by #L.Butz, on newer vscode versions, replace env.APPDATA by env:APPDATA.