@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.


Commands

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.

Local development

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.

Publish

To publish the NPM package, please make sure you have the right access via https://www.npmjs.com/ and run the following commands:

`sh
cd vscode-web-memfs
cd vscode-web
yarn build


bump the version field in vscode-web/package.json file.


npm publish --access public
`

Events

$3

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
})
`

$3

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',
}
}
`

$3

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
})
``