agorum.codeEditor

Das System zeigt dieses Widget als Code-Editor an.

Als Editor-Komponente wird der Monaco Editor eingesetzt.
Sie können Skripte der unterstützten Sprachen editieren.
Das Widget bietet eine farbliche Unterstützung der Eingabe und Syntax-Prüfung der gewählten Sprache an.
Der Editor analysiert automatisch sowohl geöffnete als auch per require() eingebundene Skripte, um Vorschläge anzubieten, wie die aktuelle Eingabe fortgesetzt werden könnte.
Beim Speichern eines Skripts oder ausgelöst durch die Tastenkombination Alt + Shift + F (siehe Aktionen ausführen) formatiert das System den Code automatisch einheitlich. (Gilt nicht für auskommentierte Codezeilen und nicht für Codezeilen, die falsche Syntax aufweisen.) Als Formatter wird Prettier verwendet.
Zur schnellen Entdeckung von potenziellen Fehlern ist ESLint für die statische Analyse integriert. Entdeckte Probleme werden automatisch hervorgehoben.
Neben der Bildlaufleiste erscheint rechts eine Vorschauansicht des gesamten Codes, die die Orientierung in Skripten erleichtert. Fehler in der Syntax erscheinen in der Vorschauansicht mit einem roten Punkt.
Beim Tippen schlägt der Editor automatisch Funktionen vor, die verwendet werden können.

Hilfe öffnen

Der Code-Editor besitzt eine integrierte Hilfe, die Sie über die Taste F1 aufrufen können. Mit dieser Hilfe können Sie diverse Befehle schneller ausführen, etwa direkt an eine bestimmte Zeile im Code springen (über den Befehl Go to Line/Column).

Aktionen ausführen

Klicken Sie etwa auf den Namen einer Funktion oder Variablen, öffnen sich über ein Kontextmenü diverse Aktionen.

Aktion	Beschreibung	Tastaturkürzel
Go to Definition	Springt zur Stelle im Code, in der die Funktion oder Variable definiert ist.	STRG + F12 STRG + Linksklick
Go to References	Listet alle vorhandenen Stellen im Code auf, in denen die Funktion oder Variable verwendet wird, und springt an die entsprechende Stelle.	SHIFT + F12
Go to Symbol	Listet alle verfügbaren Variablen, Funktionen und sonstigen Symbole im Code auf und springt an die entsprechende Stelle.	STRG + SHIFT + O
Peek > Peek Definition	Zeigt die Stelle, in der die Variable oder Funktion definiert wurde, in einer Vorschau an. Diese Aktion zeigt auch externe Dateien an, d. h. die Definition muss nicht in der gleichen Datei durchgeführt worden sein, in der die Variable oder Funktion verwendet wird.	ALT + F12
Peek > Peek References	Zeigt die Stellen, in der die Variable oder Funktion verwendet wird, in einer Vorschau an. Diese Aktion zeigt auch externe Dateien an, d. h. Dateien, in denen die Variable oder Funktion ebenfalls verwendet wird.
Rename Symbol	Benennt alle Stellen, in denen die Funktion oder die Variable im Code vorkommt, gleichzeitig um.	F2
Change All Occurrences	Ermöglicht es, alle Stellen, in denen die Funktion oder die Variable im Code vorkommt, gleichzeitig zu ändern.	STRG + F2
Format Document	Formatiert den gesamten Code automatisch einheitlich.	SHIFT + ALT + F
Format Selection	Formatiert den Code-Abschnitt, in dem Sie sich gerade befinden, automatisch einheitlich.	STRG + K STRG + F
Cut	Schneidet markierten Code aus.
Copy	Kopiert markierten Code.
Command Palette	Öffnet eine integrierte Hilfe.	F1

Weitere Tastaturkürzel und Aktionen

Tastaturkürzel	Beschreibung
STRG + ALT + Pfeiltaste hoch/runter	Lässt einen weiteren Cursor ober- oder unterhalb der aktuellen Zeile erscheinen. Wenn Sie nach dem Erscheinen des Cursors tippen, können Sie in mehrere Zeilen schreiben, um etwa in mehreren Zeilen die Formatierung zu ändern, wenn Copy-and-paste nicht funktioniert, weil etwa Variablen anders lauten.
SHIFT + ALT + Pfeiltaste hoch/runter	Kopiert eine oder mehrere Codezeilen.
ALT + Pfeiltaste hoch/runter	Verschiebt eine oder mehrere Codezeilen. Verwenden Sie das Verschieben, nachdem Sie Codezeilen mit SHIFT + ALT + Pfeiltaste hoch/runter kopiert haben, um Codezeilen zu duplizieren, an eine gewünschte Stelle zu verschieben und dann zu ändern.
STRG + G	Öffnet eine Liste, in der Sie die Nummer einer Codezeile eingeben können, und springt zu der eingegebenen Zeile.
STRG + U	Springt bei jedem Ausführen von STRG + U in die Cursorposition zurück, die zuvor aufgerufen wurde.

Verwendung

let aguila = require('common/aguila');

let codeEditor = aguila.create({
  type: 'agorum.codeEditor'
});

codeEditor;

Events

keine

Parameter

border (Boolean)

Wert	Beschreibung
true	Erzwingt die Darstellung eines Rahmens um dieses Widget (sofern unterstützt).
false	Unterdrückt die Darstellung eines Rahmens um dieses Widget (sofern unterstützt).

language (string)

Definiert die Skriptsprache.

Möglich sind die Werte:

javascript (Standard)
json
yaml
xml

Hinweis: Wenn Sie keinen Wert für den Code-Editor setzen, setzt das System diesen im Standard-JavaScript. Sollten Sie einen unbekannten Wert verwenden, wechselt der Editor zu einem TXT-Editor (Fallback).

Funktionen

keine

Beispiele

Code-Editor für XML

// Requirements
let aguila = require('common/aguila');

// Create code editor widget for the XML language
let codeEditor = aguila.create({
  height: 300,
  width: 500,
  type: 'agorum.codeEditor',
  language: 'xml'
});

// Return the code editor to the user
codeEditor;

Code-Editor für JavaScript

// Requirements
let aguila = require('common/aguila');

// Create code editor widget for the JavaScript language
let codeEditor = aguila.create({
  height: 300,
  width: 500,
  type: 'agorum.codeEditor',
  language: 'javascript'
});

// Return the code editor to the user
codeEditor;

Code-Editor für YAML

// Requirements
let aguila = require('common/aguila');

// Create code editor widget for the YAML language
let codeEditor = aguila.create({
  height: 300,
  width: 500,
  type: 'agorum.codeEditor',
  language: 'yaml'
});

// Return the code editor to the user
codeEditor;