web-dev-qa-db-fra.com

Personnalisation de la coloration syntaxique dans Visual Studio Code

J'essaie actuellement d'écrire une extension pour un nouveau type de fichier (ANTLR) et je me demande comment changer les couleurs utilisées pour la coloration syntaxique dans Visual Studio Code. Pour moi, il semble que cela ne soit pas défini dans l'extension, mais ailleurs. Il n'y a pas d'entrée de préférences pour les couleurs et je n'ai pas trouvé de fichier CSS qui définit cela (ce à quoi je m'attendrais puisque vscode utilise Electron). J'ai également regardé le fichier de paramètres généré par vscode et les fichiers qui l'accompagnaient, mais aucun indice non plus. La recherche sur le Web n'a pas non plus aidé. Donc, je suis un peu perdu maintenant.

Quelqu'un peut-il me donner des conseils ou me diriger vers les documents pertinents?

visual-studio-codevscode-extensions
18
Mike Lischke

Un peu tard pour la fête, mais je vais ajouter ceci ici, pour épargner au prochain gars quelques heures de recherche.

Il y a deux concepts en jeu ici:

  • grammaires linguistiques, qui transforment un fichier texte en jetons avec différents étendues, et
  • thèmes, qui colorent ces étendues d'une manière (espérons-le) agréable à l'œil.

Si vous écrivez votre propre grammaire ou effectuez une conversion à partir de TextMate, etc., il est possible que vous utilisiez des étendues différentes de celles définies par le thème. Dans ce cas, il n'y aura pas de distinction claire entre les jetons que vous définissez, même s'ils sont réellement définis.

Il y a deux solutions à cela. La première consiste à étendre un thème avec vos étendues personnalisées et à les colorier comme vous le souhaitez. Ce n'est pas vraiment une bonne façon de procéder, à moins que tous ceux qui utilisent votre langue aiment aussi votre jeu de couleurs. L'autre est d'utiliser les (étendues limitées) d'étendues déjà définies et colorisées par VSCode et les auteurs du thème. Il y a de fortes chances que votre langue soit bonne dans le thème de votre choix et assez bonne dans les autres.

Pour vous donner un exemple, voici l'étendue comment définie par le thème VSCode sombre par défaut.

"name": "Dark Visual Studio",
"settings": [
    {
        "scope": "comment",
        "settings": {
            "foreground": "#608b4e"
        }
    },

et voici l'extrait de langage équivalent de la grammaire C++:

"comments": {
    "patterns": [
        {
            "captures": {
                "0": {
                    "name": "punctuation.definition.comment.Java"
                }
            },
            "match": "/\\*\\*/",
            "name": "comment.block.empty.Java"
        },

Fondamentalement, le langage définit plusieurs jetons sous comment, selon les besoins, et puisque le thème dit que comment.* sera vert, ils seront tous colorisés de la même manière.

17
Laur

Les règles de coloration syntaxique sont stockées dans .plist fichiers (ou alternativement dans .tmLanguage des dossiers). Dans ces fichiers, différents types de jetons sont déclarés pour la coloration syntaxique:

  • Qu'est-ce qu'un mot-clé?
  • Qu'est-ce qu'un littéral de chaîne?
  • Qu'est-ce qu'un commentaire?
  • etc.

Jetez un œil ici pour obtenir plus d'informations à ce sujet: https://code.visualstudio.com/Docs/customization/colorizer

Vous ne définissez pas de couleurs dans .plist fichiers!

La relation entre les types de jetons et les couleurs se fait dans les déclarations de thème de couleur.

En savoir plus à ce sujet ici https://code.visualstudio.com/Docs/customization/themes et ici Comment ajouter un thème dans Visual Studio Code?

En général, ce document est également utile lorsque vous essayez d'étendre VSCode: https://code.visualstudio.com/docs/extensionAPI/overview

5
Wosi

Il n'est pas nécessaire de patcher le thème, depuis la documentation officielle :

Pour régler la syntaxe de l'éditeur en mettant en surbrillance les couleurs, utilisez editor.tokenColorCustomizations dans votre fichier de paramètres utilisateur settings.json

Outre la personnalisation simple des jetons, vous pouvez remplacer complètement les règles TextMate avec un paramètre légèrement plus complexe, par exemple:

"editor.tokenColorCustomizations": {"textMateRules": [{
        "scope": "keyword.control.ref.latex",
        "settings": {
            "foreground": "#FF0000"
        }
    }]}
0
memeplex