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

Traduit automatiquement de Deepl

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.

blank

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.

blank

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

Jeton sémantique LSP langage 4D
méthode méthodes
méthode.defaultLibrary commandes
méthode.plugin méthodes de plugin
propriété attributs des objets
fonction fonctions membres de l’objet
paramètre paramètres de la méthode, paramètres des fonctions membres de l’objet
variable.interprocess variables interprocessus
variable.process variables de processus
variable.locale variables locales
mot-clé mots-clés
tableau tableaux
champ champs
commentaire commentaires
type types
constante constantes
chaîne de caractères chaînes de caractères
erreur erreurs

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

blank

blank

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 !

Avatar
- Product Owner -Damien Fuzeau a rejoint l'équipe 4D Product en février 2019. En tant que Product Owner, il est en charge de la rédaction des user stories, puis de leur traduction en spécifications fonctionnelles. Son travail consiste également à s'assurer que les implémentations de fonctionnalités livrées répondent aux besoins des clients.Damien est diplômé de l'Université de Nantes en génie logiciel. Il a passé plus de 23 ans dans son ancienne entreprise, d'abord en tant que développeur (découverte de 4D en 1997), puis en tant que responsable de l'ingénierie et architecte logiciel. Cette société est un partenaire OEM de 4D et a déployé des logiciels d'entreprise basés sur 4D pour des milliers d'utilisateurs, sur des centaines de serveurs. Damien est donc habitué au développement et au déploiement 4D dans un contexte multi-langues.