Develop Reference

Visual Studio Code extension development problem with typescript

as you see above, the building process never finishes and no extension host window appears.
the problem also exists when all extensions all disabled
but this problem doesn't exist when creating project with javascript (the problem is only with typescript)
the steps that I follow is from this tutorial
and I also tried the hello world sample from github.
but none of them worked.
EDIT:
I tried to open extension development host window manually by code --extensionDevelopmentPath="path/to/my/project" and it worked.
I think the issue is with some of vscode's configurations
possible fix: I should check the configurations such as npm: watch. but I don't know where are they and what should I do with them??
so any idea?
EDIT 2:
task.json
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "watch",
"problemMatcher": "$tsc-watch",
"isBackground": true,
"presentation": {
"reveal": "never"
},
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
launch.json
// A launch configuration that compiles the extension and then opens it inside a new window
// 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": [
{
"name": "Run Extension",
"type": "extensionHost",
"request": "launch",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}"
],
"outFiles": [
"${workspaceFolder}/out/**/*.js"
],
"preLaunchTask": "${defaultBuildTask}"
},
{
"name": "Extension Tests",
"type": "extensionHost",
"request": "launch",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}",
"--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
],
"outFiles": [
"${workspaceFolder}/out/test/**/*.js"
],
"preLaunchTask": "${defaultBuildTask}"
}
]
}
then I noticed that if I comment out "preLaunchTask": "${defaultBuildTask}" in launch.json file, the problem solves.

Finally I caught the issue. that was because of the locale of my system that was set to Persian which typescript problem matcher couldn't recognize(Persian digits).
By setting system locale to English the problem solved and everything now works fine as expected.
please see the issue on github

Working VSC Launch configuration for renderer process? ("breakpoint set but not bound" issue)

VSC: 1.42.1
Electron: 8.0.3
macOS: 10.14.5
node: 11.15.0
Here is one of the many example launch configurations I have tried. I can debug the main process successfully but the renderer process has the "breakpoint set but not bound" issue so the breakpoints are never triggered.
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Main Process",
"type": "node",
"request": "launch",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
"windows": {
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
},
"program": "${workspaceRoot}/main.js",
"protocol": "inspector"
},
{
"name": "Debug Renderer Process",
"type": "chrome",
"request": "launch",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
"windows": {
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
},
"runtimeArgs": [
"${workspaceRoot}/main.js",
"--remote-debugging-port=9222"
],
"webRoot": "${workspaceRoot}"
}
]
}
Also tried this example from Microsoft's "vscode-recipes" – with the same result as above: "breakpoint set but not bound" in the renderer process.
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Electron: Main",
"protocol": "inspector",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"runtimeArgs": [
"--remote-debugging-port=9223",
"."
],
"windows": {
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
}
},
{
"name": "Electron: Renderer",
"type": "chrome",
"request": "attach",
"port": 9223,
"webRoot": "${workspaceFolder}",
"timeout": 30000
}
],
"compounds": [
{
"name": "Electron: All",
"configurations": [
"Electron: Main",
"Electron: Renderer"
]
}
]
}
I've been struggling for months with the "breakpoint set but not bound" issue when trying to debug the renderer process in Electron. I will spend a few hours searching around, trying sample launch configurations, trying various suggestions (e.g. Electron main and renderer process debug configuration) and then I give up, until next time. . .
It DID work in VSC 5 or 6 versions ago and then it broke. I've been all over the VSC github "issues" pages and nothing works. I am able to debug the main process.
My project structure is shown below. I am not using webpack, angular, react or any other framework like that.
Does anyone have a launch configuration that works wwith this sort of set up? "console.log()" is getting really old . . .

I'm basically exactly using your second launch.json from vscode recipes. I do now recall having similar issues and these two things worked:
Start the renderer with devtools, and then Ctrl+R inside the devtools to refresh it for breakpoints to start working. (though this will rerun the script in the renderer, which may have unexpected effects)
Start your app using the "Electron: Main" configuration. When you app has started, switch to the "Electron: Renderer" option, click the triangle, and from the dropdown that should appear in the middle of VSCode, select the one that lists your app name. Then, breakpoints should work.

Using "esm" in VSCode's NodeJs Debugger

I am using Vscode.
I have a js file filled with a dozen+ class definitions which I wanted to be available in another jsfile.
So I used es6 imports in my other file, main.js
//main.js
import * as Helper from './helperClasses.js';
var myDoggy = new Helper.Pet("Fido");
But that wouldn't run with node, so I installed 'esm' with npm, and made a file called server.js, in which I added
//server.js
require = require("esm")(module/*, options*/)
module.exports = require("./main.js")
Now that runs with the code runner extension, or from a cmd window with the '-r esm' args (i.e. node -r esm server.js). But in the vsCode debugger, I get the following error:
import * as helper from './helperClasses.js';
^
SyntaxError: Unexpected token *
I tried changing the configuration settings in launch.json as follows, but that did not work:
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}\\game.js",
"args": ["-r","esm","server.js"]
}
]
I went and changed the .js extensions to .mjs, but then intellisense stopped working...
Is there something I'm missing? This is my first time trying to use Node and I'm just trying to easily import some helper functions.

I had a problem with the accepted answer. Using runtimeArgs worked better:
"configurations": [
{
"type": "node",
"name": "import-test-files",
"request": "launch",
"cwd": "${workspaceFolder}",
"program": "${workspaceFolder}/scripts/import-test-files.js",
"runtimeArgs": ["-r", "esm"]
}
]

Your launch.json has to be
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}\\server.js",
"args": ["-r","esm"]
}
]
The path of the server.js has to be accurate though. For example, in case, if it is under folder 'app' make it
"program": "${workspaceFolder}\\app\\server.js"
Let know if it helps or if the issues persits.

thats one works for me:
"configurations": [
{
"type": "pwa-node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\index.js",
"runtimeArgs": ["--experimental-modules"]
}
]

Jest + Babel in VS Code debugger causes breakpoints to move

I am trying to debug a simple project using babel, jest, and vs code. When I set a breakpoint and then start debugging, my breakpoints jump around and are no longer where they were when I started. A sample repo can be seen here - https://github.com/RyanHirsch/starter-node
I've updated my launch.json to contain
{
"name": "Jest",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
"stopOnEntry": false,
"args": ["-i", "${file}"],
"cwd": "${workspaceRoot}",
"runtimeExecutable": null,
"sourceMaps": true,
"protocol": "inspector"
}
And my .babelrc looks like:
{
"plugins": ["#babel/plugin-proposal-object-rest-spread"],
"sourceMaps": "inline",
"presets": [
[
"#babel/preset-env",
{
"targets": {
"node": "6.10"
}
}
]
]
}
I thought that the source map options were enough to get this to work but I was wrong. What needs to change in order to keep my breakpoints in their original locations? Specifically when trying to debug my tests.
==== Edit ====
Before my breakpoints are on test line 10 and implementation line 4:
When I start debugging by selection my test file and then run Jest in the VS Code debug pane, my breakpoints jump to test line 9 and implementation line 6:
Running on Node 9.6.1 with the following extensions:
DavidAnson.vscode-markdownlint
EditorConfig.EditorConfig
Orta.vscode-jest
PKief.material-icon-theme
PeterJausovec.vscode-docker
Shan.code-settings-sync
bungcip.better-toml
dbaeumer.vscode-eslint
dracula-theme.theme-dracula
dzannotti.vscode-babel-coloring
eamodio.gitlens
esbenp.prettier-vscode
gerane.Theme-FlatlandMonokai
humao.rest-client
mauve.terraform
mikestead.dotenv
mjmcloug.vscode-elixir
mohsen1.prettify-json
ms-vscode.Theme-MaterialKit
ms-vscode.azure-account
ms-vscode.cpptools
ritwickdey.LiveServer
sbrink.elm
shanoor.vscode-nginx
vscodevim.vim

#RyanHirsch ; just use retainLines": true alongside sourceMap: "inline" in your babelrc and It will work.

Got this issue (using jest 23.6.0), checked that this was a known issue on create react app, resolved on this pull request:
https://github.com/facebook/create-react-app/pull/3605/files
Applied the following config to my launch.json
{
"type": "node",
"request": "launch",
"name": "Jest All",
"program": "${workspaceFolder}/node_modules/jest/bin/jest",
"args": [
"test",
"--runInBand",
"--no-cache"
],
"sourceMaps": false,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
},
Managed to get it breaking on the right breakpoints.

After much struggling, here's how I got Jest with Babel debugging to consistently work and break on the correct lines.
Mainly, I used the excellent Jest plugin for VSCode by developer 'Orta', and via searching 'Jest' in the extensions pane of VSCode:
From there I just hit the Debug link that appears in my test, which allows me to correctly hit breakpoints in both my tests and application code.
Breakpoint successfully hit in the test file:
Breakpoint successfully hit in the source code file:

The correct config which works for babel-jest 25.0.0 &
jest 25.0.0 is the following:
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Jest Tests",
"type": "node",
"request": "launch",
"runtimeArgs": [
"--inspect-brk",
"${workspaceRoot}/node_modules/.bin/jest",
"--runInBand"
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"port": 9229
}
]
}
For more information I took my config from the following repository

What worked for me is the turning off sourcemap by adding "sourceMaps": false to the launch config. I don't fully understand why it works though.
Example:
{
"type": "node",
"request": "launch",
"name": "Jest Current File",
"program": "${workspaceFolder}/node_modules/.bin/jest",
"args": [
"${relativeFile}",
"--config",
"jest.config.js",
"--no-cache"
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"disableOptimisticBPs": true,
"sourceMaps": false,
"windows": {
"program": "${workspaceFolder}/node_modules/jest/bin/jest",
}
}

Install node:
https://nodejs.org/en/download/
Install Chrome Plugin:
https://chrome.google.com/webstore/detail/nodejs-v8-inspector-manag/gnhhdgbaldcilmgcpfddgdbkhjohddkj?hl=en
In your terminal run the following script
node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand
More reference for troubleshooting in vs code follow instruction in
https://jestjs.io/docs/en/troubleshooting
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Jest Tests",
"type": "node",
"request": "launch",
"runtimeArgs": [
"--inspect-brk",
"${workspaceRoot}/node_modules/jest/bin/jest.js",
"--runInBand"
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
]
}
Babel will be converting es6 to es5, so its not dependent for inspecting.
For inspecting you need node and node chrome extension.
Enjoy Coding

New to Visual Studio Code - my program isn't compiling

I have a folder called foo and within that folder I have a very simple html file that should output some basic code. I don't know how to run this.
Every time I try running and compiling the html file, I get the error
"Could not find the preLaunchTask 'exe'."
This is my launch.json file:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Extension",
"type": "extensionHost",
"request": "launch",
"runtimeExecutable": "${execPath}",
"args": [
"--extensionDevelopmentPath=${workspaceRoot}"
],
"sourceMaps": true,
"outFiles": [
"${workspaceRoot}/out/**/*.js"
],
"preLaunchTask": "exe"
}
]
Any help would be awesome, thanks!