vscode-react

vscode-react embeds the VSCode editor right in your React application. Uses quickbus for IPC & filesystem access.

You can build & host your own static instance of VSCode with vscode-static-web. You'll need the file-bus extension added under extra_extensions/.

Installation

npm install vscode-react

I am giving up my bed for one night.

My Sleep Out helps youth facing homelessness find safe shelter and loving care at Covenant House. That care includes essential services like education, job training, medical care, mental health and substance use counseling, and legal aid — everything they need to build independent, sustainable futures.

By supporting my Sleep Out, you are supporting the dreams of young people overcoming homelessness.

Click here to help out: https://www.sleepout.org/participants/62915

More info: https://www.sleepout.org/ | https://www.covenanthouse.org/ | https://www.charitynavigator.org/ein/132725416

Together, we are working towards a future where every young person has a safe place to sleep.

Thank you.

and now back to your documentation...

Usage

import React from 'react';
import { useVSCode } from 'vscode-react';

function App() {
  const fsHandlers = {
    // Provide your custom file system handlers here
  };

  const { VSCode, openFile, executeCommand } = useVSCode({
    url: 'https://oss-code.pages.dev',
    fsHandlers,
  });

  // You can call openFile('/path/to/file') or executeCommand('workbench.action.files.newUntitledFile') as needed.

  return <VSCode className="editor" />;
}

export default App;

Hook API

useVSCode(options)

| Option | Type | Description | | ---------- | -------- | --------------------------------------| | url | string | Base URL of the VSCode editor server. | | fsHandlers | object | Custom file-system handler callbacks. |

Returned values

| Return | Type | Description | | ---------------- | ------------------------------------------------- | -------------------------------------------- | | VSCode | React component | The iframe-based VSCode component to render. | | openFile | (path: string) => void | Opens the given file in the VSCode editor. | | executeCommand | (command: string, ...args: any[]) => void | Executes a VS Code command in the editor. |

Available VS Code commands

executeCommand proxies to the VS Code command registry. You can call any built-in or extension command by its identifier. For example:

• workbench.action.files.newUntitledFile
• workbench.action.openFolder
• workbench.action.quickOpen
• workbench.action.findInFiles
• editor.action.gotoLine
• editor.action.rename

See the full list of VS Code commands.

File System Handlers

The fsHandlers option lets you override the file-system callbacks. The API is geared toward interacting with the Emscripten Filesystem API. By default, this hook uses the following stub handlers:

const defaultFsHandlers = {
  readdir(path: string, opts?: object): string[],
  async readFile(path: string, opts?: object): number[],
  analyzePath(path: string): { exists: boolean, isFile?: boolean, isDir?: boolean },
  writeFile(path: string, data: number[]): void,
  rename(oldPath: string, newPath: string): void,
  mkdir(path: string, opts?: { recursive?: boolean }): void,
  unlink(path: string): void,
  rmdir(path: string): void,
  activate(): void
};

Handler signatures

| Handler | Signature | Description | | ------------ | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | | readdir | (path: string, opts?: object) => string[] | Reads a directory and returns an array of entry names. | | readFile | (path: string, opts?: object) => Promise<number[]> | Reads a file and returns content as an array of bytes (number[]). | | analyzePath| (path: string) => { exists: boolean, isFile?: boolean, isDir?: boolean } | Checks if the path exists and whether it is a file or directory. | | writeFile | (path: string, data: number[]) => void | Writes raw bytes to a file (data should be an array of numbers representing bytes). | | rename | (oldPath: string, newPath: string) => void | Renames or moves a file or directory. | | mkdir | (path: string, opts?: { recursive?: boolean }) => void | Creates a directory. Use opts.recursive to create nested directories if needed. | | unlink | (path: string) => void | Removes a file. | | rmdir | (path: string) => void | Removes a (empty) directory. | | activate | () => void | Called when the FS bridge is activated (e.g., after initial mount). |

Building

This package uses Babel to compile JSX and modern JavaScript for distribution.

npm run build

The compiled files will be placed in dist/.

License

Apache-2.0