Bundling versus debugging in a Visual Studio Code extension

Question

I have written an extension for VS Code and now am creating a package for it.

It is recommended then to bundle the files, which I do with esbuild. Packaging works, but it leaves me with a dilemma. In package.json, I can either write

"main": "./out/main.js",

which lets VS Code use the bundled code; this results in a usable package but I cannot debug the code.

Or I can write

"main": "./out/extension.js",

which directs VS Code to the original code; then I can debug but I do not generate a usable package.

Surely I must misunderstand something, but what is it?

How are you running your extension? Make sure that your bundle `esbuild` command has `--sourcemap` in it. — Reem, Jul 05 '22 at 12:45

score 1 · Answer 1 · answered Jun 30 '22 at 08:28

Update yo code and generate a new extension from it. The sample has already been configured to bundle the files so you don't need to do anything yourself.

But if you want to use esbuild for bundling, then probably you are on your own. Moving to rebuild has been mentioned last year, but no progress ever after, https://github.com/microsoft/vscode/issues/115023#issuecomment-771692495

score 1 · Answer 2 · answered Apr 09 '23 at 01:05

Assuming your esbuild command includes --sourcemap to generate source maps, set up your VS Code launch configuration in .vscode/launch.json to use esbuild output:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "my extension",
      "type": "extensionHost",
      "request": "launch",
      "runtimeExecutable": "${execPath}",
      "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
      "outFiles": ["${workspaceFolder}/out/main.js"],
      "preLaunchTask": "${defaultBuildTask}"
    }
  }

Then define your default build task in .vscode/tasks.json so that it uses your esbuild watch npm script:

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "esbuild-watch",
      "isBackground": true,
      "presentation": {
        "reveal": "never",
        "group": "watchers"
      },
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

score 0 · Answer 3 · answered Nov 08 '22 at 23:37

If you "npm run esbuild" in a powershell terminal, it runs the "esbuild" script (which I copied into package.json from https://code.visualstudio.com/api/working-with-extensions/bundling-extension ) that uses --sourcemap, and that seems to make debugging possible. (You can use breakpoints in extension.ts even though it's running main.js.)

Then, you can replace the "watch" script names in tasks.json with "esbuild-watch", and it will automatically run esbuild when you make changes.

I haven't tested this thoroughly (I'm about as lost as you are with this stuff) but I thought this might help anyway.

Bundling versus debugging in a Visual Studio Code extension

3 Answers3