Nastavení zvýrazňování syntaxe kódu pomocí rozšíření Visual Studio Code

Nedávno jsme hovořili o našem novém rozšíření Visual Studio Code, které umožňuje komunikaci VS Code se 4D pro správu kódu. Zvýrazňování syntaxe bylo první funkcí protokolu jazykového serveru ve 4D v19 R6. Pojďme se podívat, jak si přizpůsobit vykreslování zdrojového kódu.

Zvýrazňování syntaxe můžete přizpůsobit vlastnímu listu stylu nebo výchozímu listu stylu 4D, jak je uvedeno níže:

Podívejme se na další technické informace.

Sémantické tokeny

Ve všech programovacích jazycích se kód skládá ze sémantických tokenů. Sémantický token je část kódu s jedinečným smyslem, například třídy, metody, proměnné atd. Stejně jako jiné jazyky je i kód 4D rozdělen na sémantické tokeny a modifikátory.

VS Code umožňuje kontrolu sémantických tokenů ve svém editoru kódu. Chcete-li je zobrazit, otevřete paletu příkazů VS Code, vyhledejte položku „Inspect Editor Tokens and Scopes“ a vyberte ji.

Na paletě se zobrazí vlastnosti části kódu za kurzorem, včetně sémantického tokenu a jeho případného modifikátoru. Pro přímé zobrazení souvisejících vlastností stačí vybrat jinou část kódu.

Zde je tabulka mapování mezi sémantickými tokeny jazyka 4D a LSP:

Jak nastavit písma?

Možná si řeknete: „Dobře, VS Code rozpoznává kód 4D automaticky, ale co víc?“. Jedná se o poslední krok: nastavení písma jednotlivých sémantických tokenů.
Chcete-li jej přizpůsobit, musíte upravit soubor s nastavením, který používá váš VS Code. Za tímto účelem otevřete paletu příkazů VS Code, vyhledejte soubor „Settings.json“ a upravte jej.
Pro informaci je soubor Settings.json kódu VS umístěn zde:

V systému MacOS je tento soubor: /Users/{Jméno uživatele}/Library/Application Support/Code/User/settings.json
C:\Users\{UserName}\AppData\Roaming\Code\User\settings.json v systému Windows

Zde je nastavení JSON, které je třeba přidat pro zobrazení kódu 4D se styly „light 4D“ a „dark 4D“ (vyhledejte v souboru settings.json řádek „4D-Analyzer.server.path“ a vložte celý následující blok do řádku výše nebo níže):

"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}
            }
        }
    },

Všimněte si, že „:4d“ za každým typem sémantického tokenu není povinné, ale umožňuje nastavit toto zvýraznění syntaxe pouze pro jazyk 4D. Tímto postupem zůstane zvýraznění syntaxe pro všechny ostatní jazyky nedotčeno.
Po uložení nastavení můžete vidět efekt přímo v editoru kódu!

Toto přizpůsobení je výhodné při použití VS Code s projektem 4D obsahujícím webovou část. Všechny jazyky si zachovávají vlastní zvýraznění syntaxe: HTML, CSS, Javascript a nyní… 4D!