Extensions

The built-in extensions that add views, editors and tools to the workbench, and how to pass your own.

Extensions are opt-in objects you pass to the workbench's extensions option. Each built-in extension has its own package entry, so a workbench only pays for the ones you import — nothing else is bundled. See Using extensions for how to pass them, and the API for writing your own.

#Files and previews

Markdown preview

A rendered preview of a Markdown file, beside the file itself.

HTML preview

The page itself beside the file, sandboxed until you trust it.

Media

Opens images, video and audio in a custom editor tab.

Tar export

Downloads any folder in the tree as a tarball.

#Shells and running code

Terminal

A terminal panel tab, driven by whatever shell profile you register.

just-bash

A shell profile for the terminal, running in the page over the workbench's own files.

WebContainer

node in the terminal, over a filesystem kept in step with the workbench's own.

npm Scripts

Runs the workspace's package.json scripts as tasks, in a terminal another extension provides.

Tasks

An activity bar pane listing every task the workspace's providers offer, and a way to run one.

#Language support

Language servers

Diagnostics, hover, completion and go-to-definition for a language.

#Collaboration and sources

Live Share

Shares the workspace, edits and carets with whoever opens a link.

GitHub

Opens any repository from GitHub in the workbench, with nothing cloned.

Remote

Backs the explorer with a real filesystem on a server.

Source control

A Source Control pane in the activity bar, and vscode.diff behind it.

#The workbench itself

Search

A sidebar view that searches file contents and paths.

Extensions view

Lists what the workbench is running and what each one contributed.

Logs

A panel tab that captures console output, errors and output channels.

Marketplace

Open VSX searched from the page, and a .vsix unpacked and run in this window.

Settings editor

The reader's settings as a JSON tab, built from what every extension declared.

Chat

A conversation about the workspace in the secondary side bar.

#Try it

This workbench runs three extensions together. It opens on the Extensions view — see what each one contributed, then click the Search icon and type greet.

#Adding extensions

Pass an array to extensions. Each entry is either an extension object or, for extensions that take options, the result of calling one:

import { search } from "codelet/extensions/search";
import { extensions } from "codelet/extensions/extensions";
import { logs } from "codelet/extensions/logs";
import { Workbench, FileSystem } from "codelet/workbench";

const workbench = new Workbench({
  parent: document.getElementById("app")!,
  fs: new FileSystem({ "/README.md": "# Hello" }),
  extensions: [search, extensions, logs({ level: "info" })],
});

Note

A few of these need something from the host: cross-origin isolation for a SharedArrayBuffer, a server to talk to, or a network call to a CDN or a third party. Each page says so up front.