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 runvsce publish
npm install -g @vscode/vscevsce 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.