Ça faisait un moment que je lorgnais la police de grafikart, en me demandant comment il pouvait avec des jolis signes de comparaison, et une police attachée pour certains mots, comme ça :

C'est trop bien non ?

J'ai enfin trouvé comment faire ça. On commence par installer le lot de polices qui permet de faire ça : FIRA CODE ISCRIPT. Elle est elle-même héritée de la police FIRA CODE, qui permet de gérer les signes de comparaisons transformés : FIRA CODE. Si vous voulez juste ça et pas l'italique, la seconde peut vous suffire.

Comme on peut le voir ci-contre, les signes de comparaisons sont rendus plus lisibles.

Installation

Installation des polices

Depuis ce dépôt, télécharger les trois polices et les installer sur votre ordinateur.

Paramétrage de VS Code

Ouvrez ensuite les réglages de VS Code (raccourci CTRL + , ) puis cherchez Éditeur de texte (text editor) puis Police (font), et renseignez pour le champ Font Family la valeur Fira Code iScript.

Activation des ligatures

Pour activer les ligatures, vous devez ensuite cliquer sur Modifier dans settings.json, et modifier la ligne comme suit :

"editor.fontLigatures": true,

Cela permet d'activer la transformation des signes de comparaison.

Personnalisation des mots en italique

Depuis le même fichier settings.json, nous pouvons aussi choisir quels seront les mots que l'on veut en italique. Pour cela, on peut venir ajouter (ou compléter) le fichier en question avec ces lignes :

Attention, ce sont mes choix, vous aurez peut-être envie de personnaliser tout ça !

"editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "scope": [
                    //  Pour ajouter ou modifier des mots en italique :
                    //  - mettre le curseur sur le mot,
                    //  - appuyer sur CTRL SHIFT P,
                    //  - choisir "Developer: inspect editor tokens and scopes"
                    //  lire "textmate scopes"

                    "comment", // - Commentaires
                    "constant.language", // - Constantes de langage (null,
                    "variable.parameter", // - Paramètres de fonction
                    "variable.language", // - Variables spécifiques au langage (this, self)
                    "variable.parameter.named", // - Paramètres nommés de fonction
                    "meta.parameter.object-literal.key", // - Paramètres nommés de fonction
                    "storage", // - Mots-clés de stockage (var, let, const)
                    "storage.type", // - Types de données
                    "storage.modifier", // - Modificateurs (static, final, abstract)
                    "keyword.operator.new", // - Opérateurs de construction (new)
                    "keyword.control.namespace", // - Mots-clés de contrôle (namespace)
                    "keyword.control.import", // - Mots-clés d'importation
                    "keyword.control.export", // - Mots-clés d'exportation
                    "keyword.control.use", // - Mots-clés d'utilisation de namespace et de classes (use)
                    "keyword.control.return", // - Mots-clés de retour (return)
                    "keyword.control.break", // - Mots-clés de rupture (break)
                    "keyword.control.die", // - Mots-clés de mort (die)
                    "keyword.control.exit", // - Mots-clés de sortie (exit)
                    "keyword.control.from", // - Mots-clés de transfert (from)
                    "keyword.control.default", // - Mots-clés pour l'export par défaut (default)
                    "keyword.declaration", // - Déclarations (function, class)
                    "keyword.other.new", // - Autres mots-clés de construction (new)
                    "keyword.other.namespace", // - Autres mots-clés de contrôle (namespace)
                    "keyword.other.use", // - Autres mots-clés d'utilisation de namespace et de classes (use)
                    "keyword.other.type", // - Autres mots-clés de type
                    "operator", // - Opérateurs génériques
                    "support", // - Support pour fonctions/classes intégrées
                    "entity.name", // - Noms d'entités
                    "keyword.control.at-rule.import.css", // - @import
                ],
                "settings": {
                    "fontStyle": "italic"
                }
            },
            {
                "scope": [
                    //following will be excluded from italics
                    "invalid",
                    "string", // - Chaînes de caractères
                    "support.type.property-name.css", // - Propriétés de CSS
                    "source.css entity.name.tag", // - Balises HTML dans le css
                    "storage.type.function", // le mots clé function
                    "storage.type.class", // le mots clé class
                ],
                "settings": {
                    "fontStyle": ""
                }
            }
        ]
    },

Mes préférences d'affichage en italique

Pour personnaliser les mots que vous voulez mettre en italique et ceux que vous ne voulez pas, il y a un moyen assez simple. La doc sur qu'est-ce qui peut exister comme clé de textMateRules est assez flou. Par contre, il existe un moyen hyper simple de cibler ce que vous voulez ajouter :

Allez dans votre projet de code, et mettez le curseur sur le mot que vous voulez mettre en italique (return par exemple),
Pressez ensuite CTRL + SHIFT + P
entrez ensuite Developer inspect editor token and scopes et entrez
vous verrez ensuite apparaître la fenêtre ci-contre, qui vous dit dans la partie textmate scope quel portée l'atteint. Ici, on peut voir que c'est keyword.control.return qui l'atteint, on peut inclure le .php si on veut ne cibler les return que pour le langage php, ou bien l'enlever si on veut que tous les return soient concernés, quelque soit le langage.

Une fois qu'on a trouvé le bon scope, on peut revenir dans le fichier settings.json, et ajouter la ligne dans la première partie.

Désactiver l'italique pour certains mots

Il peut arriver que certains mots soient déjà en italique, même si vous ne mettez rien dans la première section : le thème que vous choisissez peut en effet imposer certains styles par défaut.

Par exemple, dans mon cas les mots function et class sont déjà en italique, et ça ne me convient pas. Je peux donc faire la même chose à l'envers, c'est-à-dire récupérer le scope de ces mots, et venir les mettre dans la seconde partie du fichier settings.json.

That's all ! Bon dev !

Sommaire