Tutorial: Hello World

In diesem Tutorial erstellen Sie Ihre erste Extension, die ein Command registriert und eine Notification anzeigt.

Was Sie lernen

Command registrieren
Command in der Command Palette verfügbar machen
Notifications anzeigen
Keybinding zuweisen

Die Extension

Entry-Point erstellen

Erstellen Sie die Datei index.ts:


import { Studio } from '@5minds/processcube_studio_sdk';
 
export function onLoad(studio: Studio): void {
  // Command registrieren und in der Command Palette anzeigen
  studio.commands.registerInCommandSearch(
    'helloWorld.showGreeting',         // Eindeutige Command-ID
    'Hello World: Begrüßung anzeigen', // Label in der Command Palette
    () => {
      studio.notifications.open('Hallo Welt! 👋 Meine erste Extension funktioniert.');
    },
  );
}

Bauen und testen


npm run build

Starten Sie das Studio mit Ihrer Extension und öffnen Sie die Command Palette (Cmd+Shift+P / Ctrl+Shift+P). Suchen Sie nach “Hello World” — Ihr Command sollte erscheinen.

Erweiterung: Mehrere Commands

Eine Extension kann beliebig viele Commands registrieren:


import { Studio } from '@5minds/processcube_studio_sdk';
 
export function onLoad(studio: Studio): void {
  // Command 1: Einfache Notification
  studio.commands.registerInCommandSearch(
    'helloWorld.showGreeting',
    'Hello World: Begrüßung anzeigen',
    () => {
      studio.notifications.open('Hallo Welt!');
    },
  );
 
  // Command 2: Dialog mit Benutzereingabe
  studio.commands.registerInCommandSearch(
    'helloWorld.askName',
    'Hello World: Name erfragen',
    async () => {
      const name = await studio.dialog.prompt('Wie heißen Sie?', 'Ihr Name');
      if (name) {
        studio.notifications.open(`Hallo, ${name}!`);
      }
    },
  );
 
  // Command 3: Umgebungsinformationen anzeigen
  studio.commands.registerInCommandSearch(
    'helloWorld.showEnvInfo',
    'Hello World: Umgebung anzeigen',
    () => {
      const env = studio.env;
      studio.notifications.open(
        `Studio ${env.appVersion} auf ${env.operatingSystem} (${env.client})`,
      );
    },
  );
}

Commands mit Bedingung

Commands können eine Predicate-Funktion haben, die bestimmt, wann sie verfügbar sind:


// Nur verfügbar, wenn ein Dokument geöffnet ist
studio.commands.registerInCommandSearch(
  'helloWorld.showDocInfo',
  'Hello World: Dokument-Info anzeigen',
  () => {
    const doc = studio.editors.getFocusedEditorDocument();
    if (doc) {
      studio.notifications.open(`Aktuelles Dokument: ${doc.uri}`);
    }
  },
  () => {
    // Predicate: Command nur aktiviert, wenn ein Dokument fokussiert ist
    return studio.editors.getFocusedEditorDocument() != null;
  },
);

Keybinding zuweisen

Weisen Sie Ihrem Command eine Tastenkombination zu:


export function onLoad(studio: Studio): void {
  studio.commands.registerInCommandSearch(
    'helloWorld.showGreeting',
    'Hello World: Begrüßung anzeigen',
    () => {
      studio.notifications.open('Hallo Welt!');
    },
  );
 
  // Keybinding registrieren
  studio.keybindings.registerKeyBindings([
    {
      key: 'ctrl+alt+h',         // Windows/Linux
      mac: 'cmd+alt+h',          // macOS
      command: 'helloWorld.showGreeting',
    },
  ]);
}

Zusammenfassung

Nächste Schritte

Menüs erweitern — Commands in Menüs einbinden
Activity Bar & Panes — Eigene UI-Bereiche erstellen