Test and Run your VS Code extension locally

install yo generator for basic boilerplate of vs code

Install the yo generator and few other packages to build and test
Follow Your First extension from VS Code official blog vs code extension page,
open folder of extension code and remove comments, if you want

> npm install --global yo generator-code

then run

yo code

select typescript and esbuild for the extension; you can choose anything as per the need.

Code Files

How to Run the vscode extension

Open Command Panel in the vs code where extension codebase is opened
Type Debug and choose Debug: Select and Start Debugging option
Select Run Extension ; you might not see this option then you have some other build or empty/invalid .vscode/launch.json file.

or Open Run and Debug ( Ctrl + Shift + D ) tab , the least used tab , from activity bar and select Run Extensions from Drop Down

Note: if you see Node.js as an option then it will check package.json command and you can select to run.

it will open new Extension Host Window.
whatever you rite in console.log() will be printed on parent Window under Debug Console panel Note: if you clear the log then there are chances you will not see that log again, so if you clear then restart complete vs code.

in Extension Host Window

Open Command Center ( Ctrl + Shift + P )
Type the command which is in package.json ’s contributes —> commands —> command attribute
make sure the same command must be registered in src/extension.ts under vscode.commands.registerCommand method command panel will not suggest command until you type , so type complete an correct command name

 "contributes": {
    "commands": [
      {
        "command": "nut-bolt.suggestThemeName",
        "title": "Suggest Theme Name",
        "category": "Theme Zero"
      }
    ]
 }

and it will execute and display “Hello World” on Bottom Right panel, this message can be changed in extension.ts file

import * as vscode from 'vscode';


export function activate(context: vscode.ExtensionContext) {
  console.log('Congratulations, "nut-bolt" is now active!');  // displayed in the parent window, under DEBUG CONSOLE
  const disposable = vscode.commands.registerCommand('nut-bolt.suggestThemeName', async () => {
    vscode.window.showInformationMessage('Hello World nut-bolt!'); // displayed in child window i.e. Extension Host Window
  });
  context.subscriptions.push(disposable);
}

it is hot reload so if you make any change in extension code from parent, it will reflect immediately.

How to debug

add breakpoint in a file and it reload the debugger or restart the task and now it will stops;
sometimes you see inactive dot, that will be active when extension start executing that file.

Bonus

Install my extension

if you want to install as a package locally then install vsce ( VS Code Extension ) CLI and then run vsce publish

npm install -g @vscode/vsce
vsce publish

it will generate <extension-name>.vsix file in project directory. copy the file and

open extension panel in vs code and click on ... in Extension:MarketPlace Tab and then select Install from VSIX... option and choose the downloaded .vsix file.

Test and run your own VS Code extension