Editor

Um ein F-Script zu erstellen oder zu editieren, kann praktisch jeder Editor verwendet werden. Opacc empfiehlt als Editor Visual Studio Code (OpenSource). WebLink: https://code.visualstudio.com/

            
Opacc bietet keine Support-Unterstützung zur Verwendung des Editors und/oder Erweiterungen dritter.
Die im nachfolgenden aufgeführten 3rd Party Erweiterungen sind "free to use". Bei Fragen zu diesen Erweiterungen sind die jeweiligen Personen oder die Community zu kontaktieren.
Bei Fragen wie spezifische Einstellungen an Visual Studio Code vorzunehmen sind, konsultieren Sie die offizielle Webseite: https://code.visualstudio.com/docs
Bei Fragen oder Problemen steht zudem eine Community zur Verfügung: https://code.visualstudio.com/community

Visual Studio Code

Einleitung

Was ist Visual Studio Code?

Visual Studio Code, kurz auch VS Code, ist ein Quelltext-Editor von Microsoft.
Dieser dient vorrangig der Entwicklung von Webanwendungen und ermöglicht die Programmierung mit Programmier- und Auszeichnungssprachen wie Batch, C#, C++, Clojure, CoffeeScript, CSS, Dart, Dockerfile, F#, Go, Groovy, Handlebars.js, HTML, Ini, Jade, Java, JavaScript, JSON, Less, Lua, Makefile, Markdown, Objective-C, Perl, PowerShell, PHP, Python, R, Razor, Ruby, Rust, Sass, SQL, Swift, TypeScript, Visual Basic und XML.
Es handelt sich bei VS Code um einen kostenlosen und quelloffenen Texteditor, der plattformübergreifend für die Betriebssysteme Windows, macOS und Linux verfügbar ist.
Bis auf den Namen, das Logo und einigen Funktionen wie IntelliSense hat VS Code nichts mit Visual Studio gemeinsam.
VS Code basiert auf dem Framework Electron und ermöglicht auch Debugging, Autovervollständigung und Versionsverwaltung. Im Unterschied zu Visual Studio arbeitet VS Code nicht mit Projektdateien, sondern auf Basis von Codedateien und Ordnern.
VS Code wird hauptsächlich von einem Team in der Schweiz entwickelt, das von Erich Gamma geleitet wird. Die erste finale Version (1.0.0) von VS Code erschien am 14. April 2016 auf Deutsch und in neun anderen Sprachen. Dabei bezifferte Microsoft die Anzahl der monatlich aktiven Nutzer von VS Code auf 500'000.

Vorteile von Visual Studio Code

Neben build-in support für JavaScript, TypeScript und Node.js ermöglicht VS Code die Erstellung kompletter Erweiterungen für spezifische Sprachen wie z.B. F-Scripts (s.g. Language-Extensions).
Extensions werden zentral über Microsoft Marketplace verwaltet und lassen sich somit automatisch updaten.
Quelle: Wikipedia

Benutzeroberfläche

Visual Studio Code besitzt eine einfache und intuitive Benutzeroberfläche, welche in 5 Bereiche aufgeteilt ist.
VSCode_1.png
Für weiterführende Informationen: https://code.visualstudio.com/docs

Activity Bar

Zugriff auf die einzelnen Ansichten. Öffnet/Schliesst die jeweilige Funktion der Side Bar.
VSCode_3.png

Editor

Hauptbereich, um Dateien anzupassen. Es können bis zu 3 Editor-Fenster nebeneinander geöffnet sein.
VSCode_2.png

Panels

Der Bereich Panels kann ein-/ausgeblendet werden, wie jeder andere Teilbereich. Standardmässig enthält der Bereich Panels folgende Register:
  • Terminal (wahlweise cmd/powershell)
  • Debugging-Konsole (wenn Debuger installiert)
  • Probleme (bei F-Script nicht verwendet)
  • Ausgabe (z.B. GIT Aktionen)
VSCode_5.png

Status Bar

Ganz unten am Editor befindet sich die Status Bar. Sie enthält Informationen über die geöffnete Datei und das geöffnete Projekt.
Ist ein Projekt geöffnet, befinden sich auf der linken Seite der Status Bar von links nach rechts der momentane Git-Branch und ein Git-Refresh-Button, wenn das Projekt per Git verwaltet wird.
Auf der rechten Seite sind von links nach rechts die Zeilen- und Spaltennummer der momentanen Position im Editor, das Encoding, der verwendete Zeilenumbruch und die erkannte Sprache der aktuellen Datei aufgeführt.
VSCode_4.png

Installation und Einrichten

Installation von Visual Studio Code

Laden Sie VS Code unter http://code.visualstudio.com/Download herunter und führen Sie anschliessend das Setup aus.
Setup_1.png
Setup_2.png
Setup_3.png
Setup_4.png

Installation von Extensions

Microsoft Marketplace
Microsoft Marketplace stellt eine Plattform dar, über welche die Installation und vor allem die Aktualisierung von Inhalten sehr einfach erledigt werden kann. Diese Inhalte werden "Extensions" resp. "Erweiterungen" genannt.
Der Zugriff des relevanten Bereichs von Microsoft Marketplace ist in Visual Studio Code direkt integriert und lässt sich über das entsprechende Icon starten.

            
Erweiterungen von Opacc
Wird im Suchpanel der Begriff "Opacc" eingegeben, werden die von Opacc zur Verfügung gestellten Erweiterungen angezeigt:
Klicken Sie auf "Installieren" und die gewünschten Erweiterungen werden automatisch zu VS Code hinzugefügt.
VSCode_13.png

            
Installation "Opacc F-Script"
Diese Extension stellt das Syntax-Highlighting (also das farbliche Hervorheben von Schlüsselwörtern) für F-Script bereit. Die Opacc F-Script Extension wird von Opacc regelmässig aktualisiert.
Klicken Sie nun auf die Schaltfläche "Installieren" neben der Erweiterung "Opacc F-Script", um diese zu VS Code hinzuzufügen.
Erweiterungen werden immer im Hintergrund heruntergeladen und installiert. Nachdem dies geschehen ist, werden Sie darauf hingewiesen, dass VS Code neu gestartet werden muss.
Klicken Sie nun auf die Schaltfläche "Neu starten".
VSCode_14.png
Notiz
Notiz
Dateien, welche noch geöffnet sind, werden beim Neustart automatisch wieder geöffnet!
Aktualisierung von Extensions
Wenn dies nicht explizit deaktiviert wurde, werden Extensions beim Start von VS Code automatisch geprüft. Findet VS Code aktualisierte Erweiterungen, werden diese automatisch heruntergeladen und Visual Studio Code fordert Sie zum neuen Starten des Editors auf.
Sollten Sie dies nicht wollen, finden Sie hier Informationen, wie dies deaktiviert werden kann:

            
Die "Opacc F-Script Extension" wird jeweils zum Termin "Freigabe alle" der entsprechenden OpaccERP Version aktualisiert und über Marketplace veröffentlicht.
Es ist nicht vorgesehen, dass mehrere Versionen von "Opacc F-Script" parallel installiert werden können.
Die Erweiterung hat keinen direkten Bezug zur bei Ihnen installierten Version von OpaccERP, sondern repräsentiert jeweils den aktuellsten Stand.

            
Verwendung einer älteren Version von "Opacc F-Script"
Die Extension "Opacc F-Script" wird automatisch bei "Freigabe alle" auf Marketplace aktualisiert. Dies führt dazu, dass die aktuellste Version automatisch installiert wird.
Dies kann natürlich dazu führen, dass innerhalb "Opacc F-Script" Funktionen enthalten sind, welche in der jeweiligen Version von OXAS (z.B. beim Kunden) noch gar nicht verfügbar wären.
Seit Version 1.30.2 von VS Code ist es möglich, auch auf ältere Stände einer Extension zurückzugreifen.
VSCode_15.png

Extension "Opacc F-Script"

Die Erweiterung "Opacc F-Script" besteht aus mehreren Bestandteilen.

            
Language Configuration (Sprache)
Dieser Teil beinhaltet die für die Erkennung von F-Script relevanten Funktionen.
  • Grammatik (Erkennung von Befehlen)
  • Definition von Kommentaren
  • Erkennung von Klammerpaaren (inkl. automatischem "Schliessen")
  • Auf-/Zuklappen von Subroutinen
  • Tastaturbefehl für das Einfügen von «» (ALT-174/ALT-175)
  • Vorgabe Default Schrift, Grösse, LineNumbers usw.
  • Auto-Vervollständigung auf Basis des bestehenden Scripts
  • Zuteilung von Encoding cp850 zu folgenden Filetypen:
    .ff .fs .fss .fx .lb .lbd .lbf .lbe .lbi .lbx .lb51 .lb53 .lb54 .lb55 .config

            
Snippets (Codeauschnitte)
"Opacc F-Script" enthält über hundert Snippets, welche die Erstellung von Scripts vereinfachen und durch Auto-Vervollständigung beschleunigen soll.
Die Snippets sind in folgende Bereiche unterteilt:
  • APSFUNCTION.CastTo (Casten von Werten)
  • APSFUNCTION.Expression (Expressions)
  • APSFUNCTION.Math (Rechnungsoperationen)
  • APSFUNCTION.Validation (Validierungen)
  • COMMENT (Kommentarblöcke)
  • CONTEXT (Kontext-Befehle)
  • CONDITION (Bedingungen)
  • OPERATION (Operationen (IBOS))
  • SCRIPTFUNC (ScriptFunctions)
  • SERVICES (Services (XSER / XRES / XQRY / XQRS))
  • SYSTEM (System-Befehle)

            
Color Themes (Farbdesigns)
In der aktuellen Version der Extension sind zwei verschiedene Farb Designs enthalten, welche die grundlegenden Farbeinstellungen der Benutzeroberfläche, sowie die Farben für das Syntax-Highlighting (farbliche Hinterlegung des Codes) enthalten. Grundsätzlich kann auch ein anderes Farbdesign verwendet werden, auch diese erkennen die meisten Befehle korrekt, jedoch werden Gruppierungen von Befehlen nicht zwingend differenziert.

            
"F-Script light"
VSCode_16.png
"F-Script dark"
VSCode_17.png
Standard Farbschema "Dark+"
VSCode_18.png

Einrichten von Visual Studio Code

Farbschema (Color Theme)
Um das gewünschte Farbschema auszuwählen, gehen Sie folgendermassen vor:
1. Klicken Sie auf das Icon für "Verwalten" in der unteren linken Ecke von VS Code
2. Wählen Sie "Farbdesign"
3. Nun können Sie aus der Dropdownliste das gewünschte Farbschema auswählen
Diese Einstellung kann jederzeit wieder geändert werden.
VSCode_6.png

            
Einstellungen
Möchten Sie Einstellungen des Editors vornehmen, gehen Sie wie folgt vor:
1. Klicken Sie auf das Icon für "Verwalten" in der unteren linken Ecke von VS Code
2. Alle Einstellungen des Editors werden gruppiert nach Themenbereich angezeigt.
Wenn Sie Einstellungen direkt in der entsprechenden JSON-Datei vornehmen möchten, können Sie auch einfach auf das Symbol { } klicken.
VSCode_7.png
Dies öffnet die Datei settings.json und erlaubt es gezielt nach Einstellungen zu filtern und diese gemäss eigenem Wunsch zu modifizieren.
VSCode_8.png
Möchten Sie z.B. eine andere Schriftart für F-Scripts verwenden, als dies vorgegeben ist, können Sie einfach nach dem Begriff "f-script" filtern und mittels Klick auf das "edit-Symbol" in die eigenen Einstellungen übernehmen ändern:
VSCode_9.png

            
Tastenkombinationen
Um eine Tastenkombination für das Einfügen von F-Script Klammern zu definieren, gehen Sie folgendermassen vor:
1. Klicken Sie auf das Icon für "Verwalten" in der unteren linken Ecke von VS Code
2. Wählen Sie "Tastenkombinationen"
3. Klicken Sie auf "keyBindings.json"
VSCode_10.png
4. Fügenden Sie folgende Einstellungen ein:
// Place your key bindings in this file to overwrite the defaults
[
    {
        "key": "ctrl+oem_2",
        "command": "editor.action.insertSnippet",
        "description": "Einfügen der F-Script Klammern (Alt+174 / Alt+175)",
        "when": "editorTextFocus && !editorReadonly",
        "args": {
            "name": "fscript.brackets"
        }
] 
Dies weist die Tastenkombination CTRL + § dem Snippet "fscript.brackets" zu. Wird nun diese Tastenkombination aufgerufen, fügt VS Code automatisch die F-Script Klammern « und » ein und der Cursor wird automatisch "dazwischen" platziert.
Diese Einstellung kann jederzeit wieder geändert werden.
Sollten Sie eine andere Tastenkombination wünschen, klicken Sie auf den Button "Tastenbindung definieren" und lassen sich so den entsprechenden Wert für das Attribut „key“ des obigen Textes anzeigen.
VSCode_12.png
Ersetzten Sie anschliessend lediglich den Inhalt des Wertes „key“ im oberen Muster mit dem Wert der eigenen Definition.

Empfohlene 3rd Party Erweiterungen

Nachfolgend werden empfohlene Erweiterungen im Zusammenhang mit F-Script aufgeführt.

            
German Language Pack for Visual Studio Code
Das deutsche Sprachpaket bietet eine lokalisierte Benutzeroberfläche für VS Code. Diese Erweiterung wir je nach Ländereinstellungen automatisch vorgeschlagen.

            
Bookmarks
Diese Erweiterung ermöglicht das Setzen von Markierungen auf Codezeilen und das Springen zu diesen Markierungen.
VSCode_39.png

            
Todo Tree
Stellt definierte Begriffe (in unserem Fall Subroutinen) in einer Baumansicht dar. Damit dies korrekt funktioniert, müssen entsprechende Einstellungen vorgenommen werden.
VSCode_40.png

            
Einstellungen für empfohlene Erweiterungen
Damit man nicht immer die Einstellungen für die vorab erwähnten Erweiterungen manuell vornehmen muss, können diese von hier 1:1 nach "settings.json" kopiert werden.
Dies stellt den Editor sowie die Erweiterungen für die Verwendung von F-Scripts ideal ein.
Wie und wo diese einzufügen sind, entnehmen Sie unter dem Kapitel Einrichten von Visual Studio Code > Einstellungen.
{
    "window.menuBarVisibility": "default",
    "workbench.startupEditor": "newUntitledFile",
    "window.titleBarStyle": "native",
    "workbench.editor.enablePreview": false,
    "extensions.autoUpdate": true,
    "search.usePCRE2": true,
    "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\cmd.exe",
    "telemetry.enableTelemetry": false,
    "todo-tree.regexCaseSensitive" : false,
    "todo-tree.regex": "^(/[a-zA-Z0-9_.\\\\-«»/(/)]{1,}|# TODO|# FIXME)", 
    "todo-tree.showTagsFromOpenFilesOnly": true,
    "todo-tree.autoRefresh": true,
    "todo-tree.filterCaseSensitive": false,
    "todo-tree.defaultHighlight": 
    {
        "foreground": "#088A08",
        "type": "none"
    },
    "todo-tree.customHighlight": 
    {
        "(/headerreport|/headerpage|/headercarry|/totalcarry|/totalreport|/body|/totalpage|/totalreport)": 
        {
            "foreground": "#FFFF00"
        },
        "GetInfoScript": 
        {
            "foreground": "#A5DF00"
        },
        "LIB": 
        {
            "foreground": "#FF00FF"
        },
        "(TODO|FIXME)": 
        {
            "foreground": "#FF0000"
        } 
    },
    "workbench.colorTheme": "F-Script dark",
}

            
Keybindings für empfohlene Erweiterungen
Damit man nicht immer die Keybindings für die vorab erwähnten Erweiterungen manuell vornehmen muss, können diese von hier 1:1 nach "keybindings.json" kopiert werden.
Dies stellt den Editor sowie die Erweiterungen für die Verwendung von F-Scripts ideal ein.
Wie und wo diese einzufügen sind, entnehmen Sie Kapitel Einrichten von Visual Studio Code > Tastenkombinationen.
// Place your key bindings in this file to overwrite the defaults
[
    {
        "key": "ctrl+oem_2",
        "command": "editor.action.insertSnippet",
        "description": "Einfügen der F-Script Klammern (Alt+174 / Alt+175)",
        "when": "editorTextFocus && !editorReadonly",
        "args": {
            "name": "fscript.brackets"
        }
    },
    {
        "key": "ctrl+f2",
        "command": "bookmarks.toggle",
        "when": "editorTextFocus"
    },
    {
        "key": "f2",
        "command": "bookmarks.jumpToNext",
        "when": "editorTextFocus"
    }
]

Arbeiten mit Visual Studio Code

Kommando-Palette
Das wichtigste Tool in VS Code ist die Kommando-Palette. Sie erlaubt es, den kompletten Editor mit Kommandos zu bedienen. Mit F1 können Sie den Kommando-Modus öffnen.
Es erscheint eine Eingabebox und eine Liste mit allen Befehlen. Das Eingabefenster funktioniert dabei wie ein Such-Dialog, zeigt die entsprechenden Befehle an und mit den Pfeiltasten können Sie diese weiter durchsuchen. Mit Enter kann ein Kommando ausgewählt werden, das dann ausgeführt wird.
VSCode_04.jpg
Wenn Sie das Zeichen > löschen und danach einen Dateinamen angeben, wird im Arbeitsbereich nach dieser Datei gesucht. Diese Funktion ist insbesondere dann hilfreich, wenn Sie einen F-Script Ordner (\Insyde\Ff) im Arbeitsbereich geöffnet haben.
VSCode_05.jpg
Allerdings ist noch mehr möglich, denn bei genauerem Hinsehen erkennt man, dass nach Klick auf F1 bereits ein > in der Eingabezeile steht. Das erste Zeichen oder Wort bestimmt den Modus der Eingabe. Das „>“zum Beispiel aktiviert den Kommando-Modus.
VSCode_19.png
Es gibt noch weitere Modi, mit denen sich viele Bereiche von VS Code steuern lassen. Eine Liste aller Kombinationen wird nach Eingabe von ? angezeigt.
VSCode_20.png

            
Dateien vs. Ordner vs. Arbeitsbereiche
Visual Studio Code kennt 3 verschiedene Varianten, um Code-Dateien zu bearbeiten.
Wird Visual Studio Code geschlossen, merkt sich Visual Studio Code die geöffneten Dateien/Ordner/Arbeitsbereiche und stellt diese direkt wieder zur Verfügung, wenn die Applikation erneut gestartet wird.

            
Einzelne Dateien:
Eine einzelne Datei wird geöffnet und direkt bearbeitet.

            
Ordner:
In Visual Studio Code können ganze Ordner geöffnet werden. Dieser wird dann inkl. Subverzeichnissen im Navigationsbereich angezeigt. Dateien können direkt per Klick geöffnet werden.
Sie können ein Verzeichnis auch direkt aus Windows Explorer über das Kontextmenü öffnen.
VSCode_21.png
Wenn Sie den Ordner \Insyde\Ff\ hinzufügen, werden Ihnen alle F-Scripts dieses Ordners im Navigationsbereich aufgelistet.
VSCode_22.png

            
Arbeitsbereiche:
In einem Arbeitsbereich können Sie mehrere Ordner und Dateien (auch von unterschiedlichen Quellen) zusammenfassen. Diese Gruppierung von Verzeichnissen kann dann in einer spezifischen Datei abgelegt werden.
Dies hat den Vorteil, dass man auf viel verwendete Ressourcen schnell wieder zurückgreifen kann.
Arbeitsbereiche erlauben die projektübergreifende Verwaltung von Source-Dateien und den entsprechenden Verzeichnissen.
Notiz
Notiz
Wenn beim Öffnen via UNC-Pfad ein Fehler auftritt, muss allenfalls über die Einstellung (Settings) > Allowed UNCHosts der entsprechende UNCHost mittels Klick auf den Button "Add Item" hinzugefügt werden.
Settings_UNCHost.jpg

            
Suchpanel
Das Suchpanel erlaubt das direkte Durchsuchen von Dateien ausgehend des aktiven Ordners in welchem gearbeitet wird.
VSCode_23.png
Über das Suchpanel kann nach Stichworten oder auch nach regulären Ausdrücken (Regex) gesucht werden:
VSCode_24.png

            
Integriertes DIFF (Dateien miteinander vergeleichen)
Über die Kommando-Palette können Dateien miteinander verglichen werden.
Drücken Sie hierzu die Taste F1 und geben "compare" oder "vergleichen" ein.
VSCode_25.png
Wählen Sie anschliessend die zu vergleichende Datei aus:
VSCode_26.png
VS Code zeigt nun sämtliche Unterschiede mittels Hervorhebung an:
VSCode_27.png

            
Mehrfach-Cursor
VS Code erlaubt es an mehreren Positionen gleichzeitig einen Cursor zu positionieren. Dies erlaubt es gleichzeitig an mehreren Stellen Änderungen vorzunehmen.
Klicken Sie hierzu an die erste gewünschte Stelle und markieren mit gedrückter ALT-Taste die weiteren Positionen.
VSCode_28.png
Nun können Sie einfach mittels Tastatur die gewünschten Änderungen vornehmen.
VSCode_29.png
Gleiche Begriffe können Sie auch direkt über das Kommando "alle Vorkommen ändern" anpassen.
VSCode_30.png

Tipps und Tricks

Informationen zur Bedienung von Visual Studio Code können Sie in der Online-Dokumentation (Hilfe) nachlesen. Wir listen hier aber einige Tipps und Tricks zum Arbeiten mit Visual Studio Code auf, welche wir als nützlich betrachten. Die hier beschriebenen Befehle/Tastenkombinationen beziehen sich auf die Standardeinstellungen von Visual Studio Code.

            
Massenmutation eines Begriffs
Mit der Tastenkombination Ctrl + F2 werden alle Treffer des aktuell markierten Begriffs gleichzeitig ausgewählt. So können Sie alle Treffer innerhalb eines F-Scripts auf einmal mutieren.
VSCode_06.jpg
Wichtig
Wichtig
Beachten Sie, dass über diese Funktion auch "Teil-Strings" gefunden werden.

            
Blockweise markieren
Um Code blockweise zu markieren, halten Sie Alt + Shift gedrückt und markieren anschliessend bei gedrückter linker Maustaste den zu bearbeitenden Bereich.
VSCode_07.jpg

            
Encoding wird nicht korrekt erkannt
Visual Studio Code lädt Eigenschaften einer Extension erst nach dem Start der Applikation.
Wird ein F-Script per Doppelklick z.B. aus Windows Explorer gestartet, kann es vorkommen, dass das Encoding nicht automatisch erkannt wird.
Dieses Problem besteht nur bei direktem Start von VS Code auf Basis einer Datei. Wenn mit Ordnern und/oder Arbeitsbereichen gearbeitet wird, tritt dieses Problem nicht auf.
Wenn das Encoding nicht erkannt wird, sieht das wie folgt aus:
VSCode_31.png
Um nun im korrekten Encoding weiterarbeiten zu können, gehen Sie wie folgt vor:
1. Klicken Sie in diesem Falle auf das Encoding (hier UTF-8)…
VSCode_32.png
2. Wählen Sie im Funktionsmenü „Mit Codierung erneut öffnen“
VSCode_33.png
3. Wählen Sie Western European DOS (CP 850)
VSCode_34.png

            
Automatisches Speichern
Unter "Datei / Automatisch speichern" kann die automatische Speicherung aktiviert werden. Per Default wird, wenn diese Einstellung aktiv ist, alle 1000ms gespeichert.
Möchten Sie diese Frequenz anpassen, fügen Sie unter der Einstellung…
VSCode_35.png
…zusätzlich folgende Einstellung ein:
VSCode_36.png

            
Zuordnen eines Dateityps zur Sprache F-Script
Durch die Erweiterung "Opacc F-Script" werden alle Dateitypen gem. Standardkonzept automatisch mit der Sprache F-Script gemappt.
In den Projekten kann es nebst F-Script auch andere Datei-Typen geben. Um einen „unbekannten“ Dateityp der Sprache F-Script zuteilen zu können, gehen Sie wie folgt vor:
1. Öffnen Sie die gewünschte Datei im Editor von VS Code
2. Auf der Taskbar wird das vermutete Encoding und die Sprachzuteilung angezeigt
VSCode_37.png
3. Klicken Sie nun auf "Nur-Text", um die Dateizuordnung zu öffnen.
Klicken Sie anschliessend auf Dateizuordnung für "<DateiTyp>" konfigurieren… und wählen die gewünschte Sprache, zu welcher Sie den Dateityp hinzufügen wollen aus
VSCode_38.png