Custom Command

Overview

The two main scenarios to employ comand are as follows:

Extension

OpenSumi commands can be used in the extension by the following example:

import { commands, Uri } from 'sumi';

// OpenSumi deals with the command call of plug-in process specifically, which converts `Uri` to `URI` in real execution
let uri = Uri.file('/some/path/to/folder');
let success = await commands.executeCommand('vscode.openFolder', uri);

Module

The following example shows how to use OpenSumi commands in the module:

import { Injectable, Autowired } from '@opensumi/common-di';
import { CommandService, URI } from '@opensumi/ide-core-browser';

@Injectable()
class DemoModule {
  ...
  @Autowired(CommandService)
  private readonly commandService: CommandService;

  run () {
    let uri = new URI('/some/path/to/folder');
    await this.commandService.executeCommand('vscode.openFolder', uri);
  }

  ...
}

React Component

in React component, you can use useInjectable function to get the command service:

import React from 'react';

import { useInjectable, FILE_COMMANDS } from '@opensumi/ide-core-browser';
import { localize, CommandService } from '@opensumi/ide-core-common';

export const DemoView = () => {
  const commandService: CommandService = useInjectable(CommandService);

  const openFolder = () => {
    commandService.executeCommand(FILE_COMMANDS.OPEN_FOLDER.id, { newWindow: false });
  };

  return (
    <a className={styles.empty_button} onClick={openFolder}>
      {localize('file.empty.openFolder')}
    </a>
  );
};

Built-in Command

In the OpenSumi framework, many basic commands are built-in. When you need to implement them, you can go to the module to find the corresponding implementation first to avoid repetitive work. the following table lists some frequently used built-in commands.

CommandFunctionalityparameter
revealInExplorerLocate the file on the Explorer pageuri: URI
setContextSet the Context variable valuekey:键, value:值
workbench.action.closeActiveEditorClose this active editor
workbench.action.revertAndCloseActiveEditorRestore this file contents while closing active editor
workbench.action.splitEditorRightSplit this editor right
workbench.action.splitEditorDownSplit this editor down
workbench.action.files.newUntitledFileCreat temporary editor file
workbench.action.closeAllEditorsClose all editors
workbench.action.closeOtherEditorsClose Other editors
workbench.action.files.saveSave this file
workbench.action.splitEditorOpen the file and split to the rightresource : ResourceArgs
workbench.action.splitEditorOrthogonalOpen the file and split downresource : ResourceArgs
workbench.action.navigateLeftSwitch to the left editor
workbench.action.navigateUpSwitch to the top editor
workbench.action.navigateRightSwitch to the right editor
workbench.action.navigateDownSwitch to the bottom editor
workbench.action.navigateEditorGroupsSwitch editor groups
workbench.action.nextEditorSwitch to the next file
workbench.action.previousEditorSwitch to the previous file
workbench.action.openEditorAtIndexOpen the editor by subscript position
workbench.action.files.revertRestores the contents of the current active file
workbench.action.terminal.clearClear the contents of the currently active terminal window
workbench.action.terminal.toggleTerminalOpen/close the terminal window
workbench.files.action.focusFilesExplorerOpen the active editor group
vscode.openOpen file(only in Electron)uri: URI, newWindow: boolean
vscode.openFolderOpen file(only in Electron)uri: URI, newWindow: boolean
workbench.action.reloadWindow (reload_window)Reload the Window
copyFilePathCopy files's absolute path touri: URI
copyRelativeFilePathCopy file relative pathuri: URI
workbench.action.openSettingsOpen the Settings panel
workbench.action.navigateBackNavigate back to the previous editor
workbench.action.navigateForwardNavigate back to the forward editor
workbench.action.files.saveAllSave all files
workbench.action.debug.stepIntoDebug to step into
workbench.action.debug.stepOutDebug to step out
workbench.action.debug.stepOverDebug to step over
workbench.action.debug.continueDebug to continue
workbench.action.debug.run (workbench.action.debug.start)Debug to run
workbench.action.debug.pauseDebug to pause
workbench.action.debug.restartDebug to restart
workbench.action.debug.stopDebug to stop
workbench.action.showAllSymbolsShow all symbols

Register a Customized Command

There are also two ways to register a custom command:

Register by Extensions

Extension registration mainly relies on commands contribution points. For more details, please seecontributes.commands

The following code illustrate a simple example of declaring a custom command in the extension's package.json.

{
  "contributes": {
    "commands": [
      {
        "command": "extension.sayHello",
        "title": "Hello World",
        "category": "Hello",
        "icon": {
          "light": "path/to/light/icon.svg",
          "dark": "path/to/dark/icon.svg"
        }
      }
    ]
  }
}

The advantage of declaration is that the command is "explicitly" present in the frame, that is, it can be found in the Quick Navigation panel opened by ⇧⌘P or in the menu, and commands registered directly without the declaration will not appear in the above panel.

// sumi's built-in extension API
import * as sumi from 'sumi';

export async function activate(context: sumi.ExtensionContext) {
  context.subscriptions.push(
    sumi.commands.registerCommand('extension.sayHello', async () => {
      sumi.window.showInformationMessage('Hello World');
    })
  );
}

Register by Modules

In module, we usually register by CommandContribution, which is detailed in the documentation Command Register