VS Code web for browser
npm install @tbbjs/vscode-web> This project Fork is from @github1s/vscode-web, the following document description is from GitHub1s, the startup process remains unchanged.
The project is modified in accordance with Github1s. Because it meets the light-weight front-end coding requirements of pure Web scenarios, some non-essential capabilities are removed, including SCM module, Run&Debug module, Terminal module, Manage and Account modules in the bottom-left corner. In order to compile common operation paths for easier execution, the theme switching and Zen mode switching buttons are added in the bottom-left corner. The specific renderings are as follows.

yarn clone - clone the official VS Code repo.
yarn build - build the VS Code with the custom code under src.
yarn watch - watch the code change under src directory and rebuild VS Code.
There are two ways to do local development with VSCodeMemfs. For feature development, you could use the yarn watch-with-vscode under the root directory.
To verify the NPM package content itself before publish. You need to install the yalc first (yarn global add yalc).
Then run the following commands:
``sh
cd vscode-web-memfs
yarn build:vscode # Build the VS Code
yarn yalc # Install local package via yalc
yarn build # Build the VSCodeMemfs & other extensions
yarn serve
`
And visit the http://localhost:5000 to verify the change. Please revert any changes related to yalc before commit, i.e. the package.json, the .yalc/ and yalc.lock files.
To publish the NPM package, please make sure you have the right access via https://www.npmjs.com/ and run the following commands:
`shversion
cd vscode-web-memfs
cd vscode-web
yarn buildbump the
field in vscode-web/package.json file.`
npm publish --access public
The callback event after the function workbench.open() is executed.
`js`
window.addEventListener('vscode-ready', (event) => {
console.log('[event]', 'vscode-ready', event);
const workbench = event.detail.workbench; // IWorkbench
})
Theme switching event.
`js`
window.addEventListener('vscode-theme', (event) => {
console.log('[event]', 'vscode-theme', event);
const theme = event.detail.theme; // GitHub Light
const isDark = event.detail.isDark; // false
})
When the project starts, the theme will be initialized according to the data-theme attribute of the html tag. The following code will use the light theme after entering the page.
`html`
If you want to use a third-party theme, you can configure it in configurationDefaults.
`js`
var dataSetting = {
folderUri: {scheme: 'memfs', authority: '', path: '/'},
configurationDefaults: {
'workbench.colorTheme': 'GitHub Light',
'workbench.preferredDarkColorTheme': 'GitHub Dark',
'workbench.preferredLightColorTheme': 'GitHub Light',
'workbench.preferredHighContrastColorTheme': 'GitHub Dark High Contrast',
}
}
zen mode switching event.
`js``
window.addEventListener('vscode-zen-mode', (event) => {
console.log('[event]', 'vscode-zen-mode', event);
const active = event.detail.active; // true or false
})