web-dev-qa-db-fra.com

Comment personnaliser la couleur des balises HTML dans Visual Studio Code?

J'utilise le thème des Abysses que j'aime bien, mais certaines couleurs sont trop sombres. J'ai personnalisé certaines couleurs de jeton en utilisant (par exemple):

"editor.tokenColorCustomizations": {
    "[Abyss]": {
        "keywords": "#7ea4df",

mais je ne peux pas comprendre comment changer la couleur des balises HTML dans l'éditeur. Quelqu'un peut-il aider?

visual-studio-codevscode-settings
4
see sharper

Vous pouvez aller dans le fichier .json du thème et le modifier en fonction de vos besoins, comme mentionné dans cet article . La mienne était située dans C:\Program Files\Microsoft VS Code\resources\app\extensions\theme-abyss\themes

Vous pouvez utiliser Ctrl + Shift + P pour ouvrir la palette de commandes, puis les développeurs: inspecter les portées TM pour examiner la portée TextMate de l'élément que vous souhaitez modifier. Dans le cas de la balise HTML dans le thème abyss, il s'agit de entity.name.tag. Vous pouvez voir à quoi ressemble l'inspecteur de la portée dans la deuxième image ci-dessous.

Ensuite, allez dans le fichier abyss-color-theme.json, recherchez cette chaîne et modifiez la couleur des balises à votre guise. J'ai changé le mien à une couleur orange laide comme ci-dessous:

Modifying the theme source

Modified HTML tag coloring

7
Mihai Chelaru

La réponse acceptée est bonne, mais je pense que j'ajouterais ceci car cela évite d'avoir à modifier le thème JSON lui-même. J'ai modifié mes paramètres comme suit:

"editor.tokenColorCustomizations": {
    "[Abyss]": {
        "keywords": "#7ea4df",
        "types": "#1fa8d8",
        "comments": "#727272",
        "strings": "#29a792",
        "textMateRules": [
            {
                "scope": "entity.name.tag",
                "settings": {
                    "foreground": "#7ea4df"
                }
            }
        ]
    }
},
4
see sharper

Je sais que c'est peut-être trop tard, mais pour ceux qui ne veulent pas faire cela manuellement, il y a l'extension Rainbow Tags .

Je l'utilise depuis quelques semaines et c'est très satisfaisant.

1
Lodoss