This project produces a VSCode OSS web build without mangling or minification.
To get the official build, please use this link, see also @vscode/test-web.
For alternative build methods, see @github1s/vscode-web, Felx-B/vscode-web and progrium/vscode-web.
Minimal Setup.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
/>
<link rel="stylesheet" href="https://raw.esm.sh/code-oss@latest/out/vs/workbench/workbench.web.main.internal.css" />
</head>
<body></body>
<script type="module">
const CDN_PREFIX = "https://raw.esm.sh/code-oss@latest";
globalThis._VSCODE_FILE_ROOT = `${CDN_PREFIX}/out/`;
await import(`${CDN_PREFIX}/out/nls.messages.js`);
// You can implement `workbench.js` yourself; this project provides a convenient implementation for quick setup
const { default: init } = await import(`${CDN_PREFIX}/workbench.js`);
init();
</script>
</html>Use the convenient workbench.js for manual setup.
Most of the time, you'll want to set up a custom built-in extension.
For example, this project sets up a memfs so all files can be stored in the browser memory.
const CDN_PREFIX = "https://raw.esm.sh/code-oss@latest";
globalThis._VSCODE_FILE_ROOT = `${CDN_PREFIX}/out/`;
await import(`${CDN_PREFIX}/out/nls.messages.js`);
const { default: init } = await import(`${CDN_PREFIX}/workbench.js`);
const url = new URL(location.href);
init(document.body, {
/** https://github.com/Microsoft/vscode/blob/main/product.json */
productConfiguration: {
nameShort: "Code - OSS",
nameLong: "Code - OSS",
applicationName: "code-oss",
dataFolderName: ".vscode-oss",
extensionsGallery: {
serviceUrl: "https://open-vsx.org/vscode/gallery",
itemUrl: "https://open-vsx.org/vscode/item",
resourceUrlTemplate: "https://openvsxorg.blob.core.windows.net/resources/{publisher}/{name}/{version}/{path}",
},
extensionEnabledApiProposals: {},
/** this config is required for `webWorkerExtensionHostIframe.html` to work */
webEndpointUrlTemplate: CDN_PREFIX,
/** this is also required */
quality: "stable",
},
/**
* optional:
* this sets the default workspace folder URI
*/
folderUri: {
scheme: "my-file-scheme",
authority: url.host,
query: url.search,
path: url.pathname,
},
/**
* optional:
* check out this project to see how to set up built-in extensions
* https://github.com/YieldRay/vscode-web-extension-memfs
*/
additionalBuiltinExtensions: [
{
scheme: url.protocol.replace(":", ""),
authority: url.host,
path: url.pathname + "path-to-extension",
},
],
});