Configuration de la coloration syntaxique du code à l’aide de l’extension Visual Studio Code

Nous avons récemment parlé de notre nouvelle extension Visual Studio Code permettant à VS Code de communiquer avec 4D pour la gestion du code. La coloration syntaxique a été la première fonctionnalité du Language Server Protocol dans 4D v19 R6. Voyons comment personnaliser le rendu de votre code source.

Vous pouvez adapter la coloration syntaxique à votre propre feuille de style ou à la feuille de style par défaut de 4D, comme indiqué ci-dessous :

Jetons un coup d’œil aux informations techniques supplémentaires.

Jetons sémantiques

Dans tous les langages de programmation, le code est composé de jetons sémantiques. Un jeton sémantique est une partie du code ayant un sens unique, comme les classes, les méthodes, les variables, etc. Comme les autres langages, le code 4D est divisé en jetons sémantiques et en modificateurs.

VS Code vous permet de vérifier les tokens sémantiques dans son éditeur de code. Pour les afficher, ouvrez la palette de commande de VS Code, cherchez « Inspecter les tokens et les scopes de l’éditeur » et sélectionnez-le.

Une palette affiche les propriétés de la partie du code située derrière le curseur, y compris le token sémantique et son modificateur, le cas échéant. Il suffit de sélectionner une autre partie du code pour voir directement les propriétés correspondantes.

Voici le tableau de correspondance entre le langage 4D et les jetons sémantiques LSP :

Comment configurer les polices de caractères ?

Vous pouvez dire, « Ok, VS Code reconnaît le code 4D automatiquement, mais quoi de plus ? ». Il s’agit de la dernière étape : le paramétrage de la police de chaque token sémantique.
Pour la personnaliser, vous devez éditer le fichier de configuration utilisé par votre VS Code. Pour ce faire, ouvrez la palette de commande de VS Code, recherchez « Settings.json » et éditez-le.
Pour information, le fichier Settings.json de VS Code est placé ici :

/Users/{UserName}/Library/Application Support/Code/User/settings.json sur macOS.
C:\Users\{UserName}\AppData\Roaming\Code\User\settings.json sur Windows

Voici les paramètres JSON à ajouter pour afficher le code 4D avec les feuilles de style « light 4D » et « dark 4D » (cherchez dans le settings.json la ligne « 4D-Analyzer.server.path, » et insérez tout le bloc suivant dans la ligne au-dessus ou au-dessous) :

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

Notez que le « :4d » après chaque type de jeton sémantique n’est pas obligatoire, mais il vous permet de définir cette coloration syntaxique uniquement pour le langage 4D. En faisant cela, la coloration syntaxique pour toutes les autres langues ne sera pas modifiée.
Lorsque vous enregistrez les paramètres, vous pouvez voir l’effet directement dans l’éditeur de code !

Cette personnalisation est bénéfique lorsque vous utilisez VS Code avec un projet 4D contenant un composant Web. Tous les langages conservent leur propre coloration syntaxique : HTML, CSS, Javascript, et maintenant… 4D !