Personalización del código VS

Visual Studio Code
personalización
temas del editor de código
Personalización del código VS cover image

Introducción

Visual Studio Code (VS Code) es uno de los editores de código más populares de la industria tecnológica, ya que ofrece funciones sólidas y un diseño ligero que lo han convertido en el editor de código preferido por los desarrolladores de todo el mundo. Su popularidad puede atribuirse, en parte, a su apariencia personalizable, que nos permite crear espacios de codificación elegantes y llamativos. En este artículo, exploraremos cómo personalizar la apariencia de tu vs code según tus preferencias, incluidos los temas del editor de código, los temas de los iconos y los cambios de color de la barra de herramientas.

Temas de iconos

Aunque los iconos predeterminados de Visual Studio Code están bien, ¿por qué limitarse a ellos cuando puedes darte un festín visual? Puedes cambiar la apariencia de tu explorador de archivos con temas de iconos, que mejoran tanto su atractivo visual como su usabilidad.

Una de las opciones más populares entre los desarrolladores es la extensión Material Icon Theme. Con esta extensión, tu explorador de archivos tendrá una colección de iconos colorida y bien organizada, modelada según el Material Design de Google. Cada tipo de archivo tiene su propio icono distintivo e identificable al instante, lo que mejora el aspecto general de tu espacio de trabajo.

Para instalar la extensión Material Icon Theme, siga estos pasos:

  1. Abra Visual Studio Code.

  2. Vaya a la vista Extensiones haciendo clic en el icono Extensiones de la barra de herramientas situada en la parte izquierda de la ventana.

  3. Busca "Material Icon Theme" y haz clic en instalar.

Tras la instalación, haz clic en el icono de engranaje de la esquina inferior izquierda y selecciona "Tema de icono de archivo" para elegir el tema de icono de material.

Temas del editor de código

Ahora que el explorador de archivos tiene buen aspecto, centrémonos en el propio editor de código. Aunque los temas claros y oscuros por defecto de VS Code son geniales, hay ocasiones en las que te gustaría algo un poco más personalizado y elegante.

Una buena opción como tema, especialmente para quienes prefieren codificar en la oscuridad, es la extensión temática Night Owl. Night Owl, que se creó pensando en el contraste y la legibilidad, tiene un esquema de colores calmante que ayuda a aliviar la fatiga visual durante largas sesiones de codificación.

Para instalar la extensión temática Night Owl:

Vaya a la vista Extensiones.

Busca "Night Owl" y haz clic en instalar.

Tras la instalación, elige Night Owl como tema abriendo la paleta de comandos (Ctrl Mayús P en Windows/Linux, Cmd Mayús P en macOS), seleccionando "Tema de color" y eligiendo Night Owl de la lista de temas instalados en tu editor de código.

Color de la barra de herramientas

Ahora que la apariencia de tu editor de código es perfecta, vamos a personalizar el color de la barra de herramientas para poner la guinda. Aquí es donde la extensión pavo real entra en juego.

Gracias a la extensión Peacock, puedes personalizar tu espacio de trabajo cambiando el color de la barra de herramientas en el lateral de tu editor de código. No sólo es estéticamente agradable, sino que si tienes varias instancias de VS Code abiertas, también puede ayudarte a distinguirlas.

Para instalar la extensión Peacock:

  1. Vaya a la vista Extensiones.

  2. Busque "Peacock" y haga clic en instalar.

Tras la instalación, puede personalizar el color de la barra de herramientas abriendo la paleta de comandos, buscando "Peacock: Introduzca un color" y, a continuación, ponga el valor hexadecimal del color que desea establecer para su barra de herramientas de código vs.

Conclusión

Personalizar el código de Visual Studio es algo más que cambiar los colores. También es necesario crear un entorno de codificación que se adapte a tu estilo y aumente la productividad. Así que siéntete libre de jugar y crear un área de codificación que estimule tu imaginación en términos de apariencia, así como explorar otras características de fantasía del increíble VS Code. ¡Feliz programación!


Career Services background pattern

Servicios profesionales

Contact Section background image

Mantengámonos en contacto

Code Labs Academy © 2024 Todos los derechos reservados.