Engine vscode

The vscode engine provides a list of connectors & plugins for a plugin engine that is built inside vscode.

npm install @remix-project/engine-vscode

Setup

You can use the remix-project engine to create a plugin system on top of a vscode extension. For that you need to create an engine and start registering your plugins.

checkout @remix-project/engine documentation for more details.

import { Engine, Manager } from '@remix-project/engine';

export async function activate(context: ExtensionContext) {
  const manager = new Manager();
  const engine = new Engine();
}

Build-in plugins

@remix-project/engine-vscode comes with build-in plugins for vscode.

webview

The webview plugin opens a webview in the workspace and connects to it. The plugin must use @remix-project/plugin-webview to be able to establish connection.

import { WebviewPlugin } from '@remix-project/engine-vscode'
import { Engine, Manager } from '@remix-project/engine';

export async function activate(context: ExtensionContext) {
  const manager = new Manager();
  const engine = new Engine();
  const webview = new WebviewPlugin({
    name: 'webview-plugin',
    url: 'https://my-plugin-path.com',
    methods: ['getData']
  }, { context }) // We need to pass the context as scond parameter
  engine.register([manager, webview]);
  // This will create the webview and inject the code inside
  await manager.activatePlugin('webview-plugin');
  const data = manager.call('webview-plugin', 'getData');
}

The url can be :

• remote
• absolute
• relative to the extension file (option.relativeTo === 'extension')
• relative to the open workspace (option.relativeTo === 'workspace')

The url can also be local. In this case you must provide an absolute path.

Options

• context: The context of the vscode extension.
• column: The ViewColumn in which run the webview.
• relativeTo: If url is relative, is it relative to 'workspace' or 'extension' (default to 'extension')

terminal

The terminal plugin gives access to the current terminal in vscode.

import { TerminalPlugin } from '@remix-project/engine-vscode'
import { Engine, Manager } from '@remix-project/engine';

export async function activate(context: ExtensionContext) {
  const manager = new Manager();
  const engine = new Engine();
  const terminal = new TerminalPlugin()

  engine.register([manager, terminal]);
  await manager.activatePlugin('terminal');
  // Execute "npm run build" in the terminal
  manager.call('terminal', 'exec', 'npm run build');
}

Window

Provides access to the native window of vscode.

import { WindowPlugin } from '@remix-project/engine-vscode'
import { Engine, Manager } from '@remix-project/engine';

export async function activate(context: ExtensionContext) {
  const manager = new Manager();
  const engine = new Engine();
  const window = new WindowPlugin()

  engine.register([manager, window]);
  await manager.activatePlugin('window');
  // Open a prompt to the user
  const fortyTwo = await manager.call('window', 'prompt', 'What is The Answer to the Ultimate Question of Life, the Universe, and Everything');
}

File Manager

Provides access to the file system through vscode api.

import { FileManagerPlugin } from '@remix-project/engine-vscode'
import { Engine, Manager } from '@remix-project/engine';

export async function activate(context: ExtensionContext) {
  const manager = new Manager();
  const engine = new Engine();
  const fs = new FileManagerPlugin()

  engine.register([manager, fs]);
  await manager.activatePlugin('filemanager');
  // Open a file into vscode
  // If path is relative it will look at the root of the open folder in vscode
  await manager.call('filemanager', 'open', 'package.json');
}

Theme

Remix's standard theme wrapper for vscode. Use this plugin to take advantage of the Remix's standard themes for your plugins. Otherwise, consider using vscode's color api directly in your webview.

import { ThemePlugin } from '@remix-project/engine-vscode'
import { Engine, Manager } from '@remix-project/engine';

export async function activate(context: ExtensionContext) {
  const manager = new Manager();
  const engine = new Engine();
  const theme = new ThemePlugin();

  engine.register([manager, fs]);
  await manager.activatePlugin('theme');
  // Now your webview can listen on themeChanged event from the theme plugin
}