Saltar al contenido

¿Cómo personalizo el color de las etiquetas HTML en Visual Studio Code?

Queremos enseñarte la mejor solución que encontramos por todo internet. Nosotros queremos que te resulte de mucha utilidad y si deseas aportar alguna mejora hazlo con libertad.

Solución:

Puede acceder al archivo .json del tema y modificarlo para adaptarlo a sus necesidades, como se menciona en esta publicación. El mío estaba ubicado en C:Program FilesMicrosoft VS Coderesourcesappextensionstheme-abyssthemes

EDITAR: Como se señaló en los comentarios de @www-0av-Com, la ruta al archivo ahora es C:UsersAppDataLocalProgramsMicrosoft VS Coderesourcesappextensionstheme-abyssthemesdónde es su usuario de Windows.

Puedes usar Ctrl + Shift + P para abrir la Paleta de comandos y luego abra Desarrollador: Inspeccionar tokens y ámbitos del editor para ver el ámbito de TextMate del elemento que le interesa modificar. En el caso de la etiqueta HTML en el tema abyss es entity.name.tag. Puede ver cómo se ve el Inspector de alcance en la segunda imagen a continuación.

Luego ingrese al archivo abyss-color-theme.json y busque eso string y modifica el color de las etiquetas como mejor te parezca. Cambié el mío a un feo color naranja como se muestra a continuación:

Modificar la fuente del tema

Coloreado de etiqueta HTML modificado

La respuesta aceptada es buena, pero pensé en agregar esto, ya que evita la necesidad de editar el tema JSON en sí. Edité mi configuración de la siguiente manera:

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

Sé que puede ser demasiado tarde, pero para cualquiera que no quiera hacer esto manualmente, existe la extensión Rainbow Tags.

Lo estoy usando durante un par de semanas y es muy satisfactorio.

Recuerda que te brindamos la opción de reseñar tu experiencia si te fue de ayuda.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *