The **vscode engine** provides a list of connectors & plugins for a **plugin engine** that is built inside vscode. ``` npm install @remix-project/engine-vscode ```
npm install @remix-project/engine-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.
`typescript
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.$3
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.`typescript
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')$3
The terminal plugin gives access to the current terminal in vscode.`typescript
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');
}
`
$3
Provides access to the native window of vscode.`typescript
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');
}
`$3
Provides access to the file system through vscode api.
`typescript
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');
}
`$3
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.
`typescript
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
}
``