Como resaltar la línea guía de etiquetas en VSCode

Visual Studio Code, también conocido como VS Code, es un potente y versátil editor de código fuente desarrollado por Microsoft.

Ya sea que estés trabajando en un proyecto personal o en un equipo de desarrollo, Visual Studio Code te brinda una experiencia fluida y eficiente. Su comunidad activa y su amplia documentación aseguran que siempre puedas encontrar soporte y recursos adicionales para mejorar tu flujo de trabajo.

Cuando nos enfrentamos al maquetado de HTML o CSS o incluso codificando en Javascript, veremos que en el indentado que proporciona por defecto no es de mucha ayuda, ya que no indica donde empieza una etiqueta y donde termina la etiqueta. Para ello estuve buscando muchos recursos que nunca me dieron la solución.

Para ser más visual te mostraré, que es lo que tenemos por defecto. Ojo: casi independiente de la plantilla, porque encontré una plantilla alto el color verde que si cambiaba. En fin, tenemos esto:

Visual Studio Code por defecto, cuando hacemos clic en cualquier lado no nos indica entre qué etiquetas estamos.

Luego de los pasos simples que te mostraré veremos este resultado visual:

Visual Studio Code con diseño visual de línea guía en color amarillo

Bueno los pasos a seguir son:

1. Debes ir a las configuraciones de Visual Studio Code. Lo encuentras en Archivo > Preferencias > Configuración o Control + , como indica.

2. Ubicar la personalización de colores, en el panel de la izquierda debes ubicar Apariencia>Color Customizations y luego hacer click en editar setting.json

En el cuadro que se abra, dentro de las llaves de workbench.colorCustomizations, debes agregar el código:

"editorIndentGuide.activeBackground": "#d6e810",

Debería quedarte algo como esto:

Solo te queda guardar con Control + S o Archivo>Guardar para obtener el resultado que te mostré al inicio. Quiero volver a indicar que no es necesario un tema o un plugin especial para activar la línea guía en VScode.

Espero que te sea de ayuda, ya que me tomó años saber donde estaba esa línea de código.

Compartir

Sobre el autor:

Picture of Infocat

Infocat

Mi nombre es Carlos A. Pariona Valencia, soy programador, mi equipo y yo contamos con 12 años de experiencia en el campo de Desarrollo de Software y recientemente en Apps.

¿Tú que opinas?

Más contenido que tenemos: