Einrichten der Syntaxhervorhebung von Code mit der Visual Studio Code-Erweiterung

Vor kurzem haben wir über unsere neue Visual Studio Code Erweiterung berichtet, die es VS Code ermöglicht, mit 4D für das Code Management zu kommunizieren. Die Syntaxhervorhebung war die erste Funktion des Language Server Protocol in 4D v19 R6. Schauen wir uns an, wie Sie die Darstellung Ihres Quellcodes anpassen können.

Sie können die Syntaxhervorhebung an Ihre eigene Stilvorlage oder an die 4D Standardstilvorlage anpassen, wie unten gezeigt:

Werfen wir einen Blick auf weitere technische Informationen.

semantische tokens

In allen Programmiersprachen setzt sich der Code aus semantischen Token zusammen. Ein semantisches Token ist ein Teil des Codes mit einer eindeutigen Bedeutung, wie Klassen, Methoden, Variablen usw. Wie andere Sprachen auch, ist der 4D Code in semantische Token und Modifikatoren unterteilt.

VS Code ermöglicht es Ihnen, semantische Token in seinem Code-Editor zu überprüfen. Um sie anzuzeigen, öffnen Sie die Befehlspalette von VS Code, suchen Sie „Inspect Editor Tokens and Scopes“ und wählen Sie sie aus.

Eine Palette zeigt die Eigenschaften des Codeteils hinter dem Cursor an, einschließlich des semantischen Tokens und seines Modifikators, falls vorhanden. Wählen Sie einfach einen anderen Teil des Codes aus, um die zugehörigen Eigenschaften direkt zu sehen.

Hier ist die Zuordnungstabelle zwischen 4D Sprache und LSP semantischen Token:

Wie werden die Schriftarten eingestellt?

Sie werden vielleicht sagen: „Ok, VS Code erkennt 4D Code automatisch, aber was noch?“. Dies ist der letzte Schritt: die Einstellung der Schriftart für jedes semantische Token.
Um sie anzupassen, müssen Sie die von VS Code verwendete Einstellungsdatei bearbeiten. Öffnen Sie dazu die VS Code Befehlspalette, suchen Sie nach „Settings.json“ und bearbeiten Sie sie.
Zur Information, die VS Code Settings.json Datei befindet sich hier:

/Benutzer/{Benutzername}/Library/Application Support/Code/Benutzer/settings.json auf macOS
C:\Benutzer\{Benutzername}\AppData\Roaming\Code\User\settings.json unter Windows

Hier sind die JSON-Einstellungen, die hinzugefügt werden müssen, um den 4D-Code mit den Stylesheets „light 4D“ und „dark 4D“ anzuzeigen (suchen Sie in der settings.json nach der Zeile „4D-Analyzer.server.path“, und fügen Sie den gesamten folgenden Block in die Zeile darüber oder darunter ein):

"editor.semanticHighlighting.enabled": true,
    "editor.semanticTokenColorCustomizations": {
        "[Default Light+]":{
            "enabled": true,
            "rules": {
                "*:4d": {"foreground": "#000000", "bold": false, "italic": false, "underline": false, "strikethrough": false},
                "method:4d": {"foreground": "#000088", "bold": true, "italic": true},
                "method.defaultLibrary:4d": {"foreground": "#068c00", "italic": false},
                "method.plugin:4d": {"foreground": "#000000"},
                "property:4d": {"foreground": "#a0806b"},
                "function:4d": {"foreground": "#5f8e5e", "italic": true},
                "parameter:4d": {"foreground": "#000b76", "bold": true},
                "variable.interprocess:4d": {"foreground": "#ff0088"},
                "variable.process:4d": {"foreground": "#0000ff"},
                "variable.local:4d": {"foreground": "#0031ff"},
                "keyword:4d": {"foreground": "#034d00", "bold": true},
                "table:4d": {"foreground": "#532300"},
                "field:4d": {"foreground": "#323232"},
                "comment:4d": {"foreground": "#535353"},
                "type:4d": {"foreground": "#068c00", "bold": true},
                "constant:4d": {"foreground": "#4d004d", "underline": true},
                "string:4d": {"foreground": "#000000"},
                "error:4d": {"foreground": "#ff0000", "bold": true, "italic": true}
            }
        },
        "[Default Dark+]":{
            "enabled": true,
            "rules": {
                "*:4d": {"foreground": "#FFFFFF", "bold": false, "italic": false, "underline": false, "strikethrough": false},
                "method:4d": {"foreground": "#1B79F3", "bold": true, "italic": true},
                "method.defaultLibrary:4d": {"foreground": "#59BB00", "italic": false},
                "method.plugin:4d": {"foreground": "#BFBFBF"},
                "property:4d": {"foreground": "#A0806B"},
                "function:4d": {"foreground": "#4EC36E", "italic": true},
                "parameter:4d": {"foreground": "#0C70FF", "bold": true},
                "variable.interprocess:4d": {"foreground": "#FF0088"},
                "variable.process:4d": {"foreground": "#53B0EB"},
                "variable.local:4d": {"foreground": "#18B3F1"},
                "keyword:4d": {"foreground": "#575757", "bold": true},
                "table:4d": {"foreground": "#CF5600"},
                "field:4d": {"foreground": "#9C6765"},
                "comment:4d": {"foreground": "#8F8F8F"},
                "type:4d": {"foreground": "#59BB00", "bold": true},
                "constant:4d": {"foreground": "#FA647F", "underline": true},
                "string:4d": {"foreground": "#FFFFFF"},
                "error:4d": {"foreground": "#ff0000", "bold": true, "italic": true}
            }
        }
    },

Beachten Sie, dass das „:4d“ nach jedem semantischen Token-Typ nicht zwingend erforderlich ist, aber es ermöglicht Ihnen, diese Syntaxhervorhebung nur für die 4D-Sprache festzulegen. Dadurch bleibt die Syntaxhervorhebung für alle anderen Sprachen unberührt.
Wenn Sie die Einstellungen speichern, können Sie den Effekt direkt im Code-Editor sehen!

Diese Anpassung ist von Vorteil, wenn VS Code mit einem 4D Projekt verwendet wird, das ein Webpart enthält. Alle Sprachen behalten ihre eigene Syntaxhervorhebung: HTML, CSS, Javascript, und jetzt… 4D!