Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to restart/reload VS Code host window on extension source code file changes?

I'm developing a VS Code extension following the vscode-extension-samples/helloworld-sample.

Question:

  • Is there a way to Hot Module Replace or otherwise "patch" the source code loaded by the host window?
  • Alternatively is there a way to reload the host window on source code changes?

When running the Run Extension launch configuration, tsc is executed in --watch mode watching for file changes and a new VS Code window is launched acting as the in-development-extension's host.

Expectation:

Updating the extentions's source code (e.g. extension.ts) updates the hosted extension's behaviour accordingly.

Actual:

Updating the extentions's source code dosn't have any effect in the hosted extension's behaviour.

Notes:

Updating the extentions's source code and then manually hitting Ctrl + R to reload the extension host window seems to "reload" the latest version of the extension's source code too, updating the hosted extension's behaviour as expected.


Here's my current config source code:

// launch.json
{
  "version": "0.2.0",
  "configurations": [{
      "name": "Develop Extension",
      "type": "extensionHost",
      "request": "launch",
      "runtimeExecutable": "${execPath}",
      "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
      "preLaunchTask": "npm: dev",
      "postDebugTask": "Terminate All Tasks",
    },
  ]
}
// tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "dev",
      "detail": "Launch extension for local development in a new (host) VS Code window.",
      "problemMatcher": "$tsc-watch",
      "isBackground": true,
      "presentation": { "reveal": "always" },
      "group": {
        "kind": "build",
        "isDefault": true,
      },
      "icon": { "id": "tools" },
    },
    {
      "label": "Terminate All Tasks",
      "detail": "Stop all running tasks.", // e.g. useful for endless tasks like file watchers
      "command": "echo ${input:terminate}",
      "type": "shell",
      "problemMatcher": [],
      "icon": { "id": "stop-circle" },
    },
  ],
  "inputs": [
    {
      "id": "terminate",
      "type": "command",
      "command": "workbench.action.tasks.terminate",
      "args": "terminateAll",
    },
  ],
}
like image 505
maninak Avatar asked Jun 25 '26 00:06

maninak


2 Answers

There's no automatic reload of the extension development host. You have to do it manually.

like image 88
Mike Lischke Avatar answered Jun 26 '26 14:06

Mike Lischke


You can try something like this. There's also reload webviews command somewhere, but not sure how to call it yet.

export async function activate(context: vscode.ExtensionContext) {
    context.subscriptions.push(
      vscode.commands.registerCommand(REFRESH_COMMAND, () => {
        vscode.commands.executeCommand("workbench.action.reloadWindow");
      })
    );
}

function watchForExtensionChanges() {
  const uiFolderPath = path.resolve(__dirname, "../src"); // Replace with the actual path to your "src" directory
  console.log("Start watching uiFolderPath :>> ", uiFolderPath);
  fs.watch(uiFolderPath, { recursive: true }, (eventType, filename) => {
    console.log(`File ${filename} changed`, eventType);
    if (eventType === "change") {
      vscode.commands.executeCommand(REFRESH_COMMAND);
    }
  });
}
like image 45
Danil T Avatar answered Jun 26 '26 15:06

Danil T