Impostazione dell’evidenziazione della sintassi del codice con l’estensione Visual Studio Code

Recentemente abbiamo parlato della nuova estensione di Visual Studio Code che consente a VS Code di comunicare con 4D per la gestione del codice. L’evidenziazione della sintassi è stata la prima caratteristica del Language Server Protocol in 4D v19 R6. Vediamo come personalizzare il rendering del codice sorgente.

È possibile personalizzare l’evidenziazione della sintassi in base al proprio foglio di stile o al foglio di stile predefinito di 4D, come mostrato di seguito:

Vediamo ulteriori informazioni tecniche.

token semantici

In tutti i linguaggi di programmazione, il codice è composto da token semantici. Un token semantico è una parte del codice con un senso univoco, come classi, metodi, variabili, ecc. Come altri linguaggi, il codice 4D è suddiviso in token semantici e modificatori.

VS Code consente di controllare i token semantici nel suo editor di codice. Per visualizzarli, aprire la palette dei comandi di VS Code, cercare “Inspect Editor Tokens and Scopes” e selezionarlo.

Una palette mostra le proprietà della parte di codice dietro il cursore, compresi il token semantico e il suo eventuale modificatore. È sufficiente selezionare un’altra parte del codice per vedere direttamente le relative proprietà.

Ecco la tabella di mappatura tra il linguaggio 4D e i token semantici LSP:

Come impostare i font?

Potreste dire: “Ok, VS Code riconosce automaticamente il codice 4D, ma cos’altro?”. Questo è l’ultimo passo: impostare il carattere di ogni token semantico.
Per personalizzarlo, dovete modificare il file di impostazioni utilizzato da VS Code. Per farlo, aprite la palette dei comandi di VS Code, cercate “Settings.json” e modificatelo.
A titolo informativo, il file Settings.json di VS Code si trova qui:

/Users/{NomeUtente}/Libreria/Application Support/Code/User/settings.json su macOS
C:\Users\{NomeUtente}\AppData\Roaming\Code\User\settings.json su Windows

Ecco le impostazioni JSON da aggiungere per visualizzare il codice 4D con i fogli di stile “light 4D” e “dark 4D” (cercare nel settings.json la riga “4D-Analyzer.server.path” e inserire l’intero blocco seguente nella riga sopra o sotto):

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

Si noti che il “:4d” dopo ogni tipo di token semantico non è obbligatorio, ma consente di impostare l’evidenziazione della sintassi solo per il linguaggio 4D. In questo modo, l’evidenziazione della sintassi per tutte le altre lingue rimarrà inalterata.
Quando si salvano le impostazioni, si può vedere l’effetto direttamente nell’editor di codice!

Questa personalizzazione è utile quando si utilizza VS Code con un progetto 4D contenente una parte Web. Tutti i linguaggi mantengono la propria evidenziazione della sintassi: HTML, CSS, Javascript e ora… 4D!