Use webview in VS Code for user interface of VS Code extension.
npm install vscode-express --save
import * as vscode from 'vscode';
import {VSCExpress} from 'vscode-express';
export function activate(context: vscode.ExtensionContext) {
// initial vscode express
// 'view' is the ABSOLUTE root path of the web view in the extension
const vscexpress = new VSCExpress(context, 'view');
// register command
context.subscriptions.push(vscode.commands.registerCommand('extension.vscexpress', () => {
vscexpress.open('index.html', 'VS Code Express Example', vscode.ViewColumn.One);
}));
// rest code...
}
Insert script below in your web page:
const callbackStack = [];
const vscode = acquireVsCodeApi();
function command(cmd, callback) {
if (!cmd) {
return;
}
let args = Array.from(arguments);
if (typeof args[args.length - 1] === 'function') {
callback = args[args.length - 1];
args.length = args.length - 1;
} else {
callback = undefined;
}
args.shift();
const messageId = new Date().getTime() + Math.random();
callbackStack.push({
messageId,
callback
});
vscode.postMessage({
messageId,
command: cmd,
parameter: args
});
}
window.addEventListener('message', event => {
const message = event.data;
for (let index = 0; index < callbackStack.length; index++) {
const callbackItem = callbackStack[index];
if (callbackItem.messageId === message.messageId) {
if (callbackItem.callback) {
callbackItem.callback(message.payload);
}
callbackStack.splice(index, 1);
break;
}
}
});
And call VS Code command with command
function. Such as:
command('extension.sayHello');
You can also do something after the command executed with callback:
command('extension.sayHello', function(res) {
// res.code === 0 with success,
// res.message is error message if error occurred
// do something
});
If you need pass parameter to the command, send it with command
:
command('extension.command', 'arg1', 'arg2', callback);
Generally, you can pass some initial data with location.search
or location.hash
to JavaScript in web. The VS Code webview doesn't support search
or hash
as it uses file system to open the file you request. As a workaround, you can use a built-in variable of VSCExpress, _location
to accesee location.search
, location.hash
and location.href
.
Thus, you need to change your origin code a bit:
const href = _location ? _location.href : location.href;
Note: Different from
location
,_location
has onlysearch
,hash
andhref
property.
Unfortunately, VS Code webview doesn't support CORS. However, it's not hard to make a workaround by using message passing. You can register the action to fetch remote content (with request
module or something else) as a VS Code command, and call the action with command
function mentioned above in the web.
vscode.commands.registerCommand('myExtension.httpRequest', async (uri: string) => {
return await request(uri);
});
Open links in browser is similar:
vscode.commands.registerCommand('myExtension.openUri', (uri: string) => {
vscode.commands.executeCommand('vscode.open', vscode.Uri.parse(uri));
});
https://github.com/Sneezry/vscode-express-example
git clone https://github.com/Sneezry/vscode-express.git
cd vscode express
And you need add prepare
script in package.json
for npm install
:
...
"fix": "gts fix",
"prepare": "node ./node_modules/vscode/bin/install"
}
Then run npm install
npm install
npm run compile
To run the example, compile the code first, then open the example folder with VS Code:
code example
In VS Code, press F5
to start debug.
MIT License