5 complementos increíbles para una interfaz de usuario de Visual Studio Code llamativa | de Vyacheslav Efimov | octubre de 2024

Haga que su código brille transformando el IDE en un impresionante entorno de codificación

he estado usando Código de estudio visual durante varios años, y lo considero firmemente uno de los mejores IDE existentes. Si bien es posible que algunos todavía prefieran los IDE de JetBrains, que también son muy populares, Visual Studio Code tiene ventajas significativas: es gratuito, liviano y altamente personalizable.

Visual Studio Code tiene una gran comunidad de desarrolladores y colaboradores. Teniendo esto en cuenta, existe una gran cantidad de complementos gratuitos disponibles. En mi experiencia, los complementos desempeñan un papel importante en términos de productividad al permitir a los ingenieros usar atajos personalizados, diseñar el IDE, guardar archivos automáticamente o incluso administrar flujos de trabajo de Git y contenedores Docker.

Como uso mucho Visual Studio Code en mi rutina diaria y aprecio mucho cómo hace que el proceso de codificación sea más agradable, decidí compartir mis complementos favoritos con los lectores.

Los complementos tienen diferentes propósitos y los que analizaré en este artículo se centran en hacer que la interfaz de usuario en Visual Studio Code sea más atractiva.

Átomo es otro IDE muy conocido en el desarrollo de software. Aunque es menos capaz que Visual Studio, una de las razones de su popularidad es su increíble tema de codificación integrado. Personalmente, el hermoso contraste entre el fondo negro y los colores de resaltado de sintaxis me hace querer mirar mi código con mucho placer y entusiasmo que si fuera un tema banal habitual.

Tema Atom One Dark en Visual Studio Code

De hecho, existen varias versiones de este complemento que se pueden encontrar en el mercado. Cada uno de ellos difiere en los colores de fondo y fuente para varias estructuras de sintaxis de código. El tema utilizado en la imagen de ejemplo de arriba es del Tema Átomo Uno Oscuro complemento.

Hay varias fuentes monoespaciadas predeterminadas disponibles en Visual Studio. Para mí son fuentes normales y no tienen nada especial. Sin embargo, existe otra fuente creada por JetBrains y que se puede integrar en Visual Studio a través del JetBrains Mono complemento.

Fuente JetBrains Mono. Imagen adaptada por el autor. Fuente: JetBrains Mono. Un espacio tipográfico para desarrolladores.

En cuanto a mí, encuentro el JetBrains Mono fuentes muy atractivo: todos los personajes principales tienen una forma coherente, lo que los hace fáciles de percibir por el ojo humano. Este es un aspecto importante ya que, como desarrollador, hay que mirar código durante varias horas al día. Puede que el siguiente hecho no sea obvio, pero los caracteres más legibles hacen que el cerebro esté más relajado al procesarlos e implícitamente resultan en una menor fatiga después de largas horas de trabajo en comparación con otras fuentes.

Fragmento de código usando la fuente JetBrains

El sitio oficial de JetBrains ofrece una fantástica manifestación que compara visualmente su fuente con otras fuentes populares desde diferentes ángulos.

Las ligaduras son otra gran característica de JetBrains Mono. A ligadura es un carácter que consta de varios símbolos unidos. Por ejemplo, el signo de comparación ≥ es una ligadura de los símbolos > y =. Cuando se escribe una combinación de dichos símbolos en un IDE, se transforman automáticamente en la ligadura correspondiente. Como resultado, las ligaduras hacen que el código sea un poco más elegante y legible.

Comparación visual de símbolos cuando las ligaduras están activadas o desactivadas

Me gustaría agradecer a los diseñadores de JetBrains, quienes deben haber puesto mucho esfuerzo en la creación de esta fuente estética y sobresaliente. Además, la fuente es altamente personalizable (en términos de versiones en negrita y cursiva) y actualmente está disponible en 148 idiomas.

De forma predeterminada, Visual Studio muestra un ícono cerca de cada nombre de archivo correspondiente a su tipo para que sea más fácil para los desarrolladores identificar visualmente el tipo de archivo sin leer su nombre. Esta es una característica útil porque los proyectos de ingeniería de software pueden incluir múltiples lenguajes de programación, marcos y una variedad de archivos de configuración escritos en varios formatos.

Existe un complemento llamado Iconosque representa los iconos originales de una forma más bonita. A continuación se muestra un ejemplo de cómo podría verse el directorio del proyecto en Visual Studio con este complemento activado:

Vista del directorio del proyecto con el activo Iconos complemento

Otra ventaja de este complemento es que también transforma directorios cuyos nombres corresponden a un tipo determinado. Por ejemplo, si un directorio se llama “fuente” luego, el complemento Iconos agregará un pequeño ícono que representa una etiqueta HTML para resaltar ese directorio.

Todos los cientos de íconos disponibles para diferentes lenguajes y marcos se pueden encontrar en el página web oficial del complemento.

Es una práctica común en ingeniería de software compartir fragmentos de código con colegas y otros desarrolladores. Hay muchas formas de hacer esto: enviando una imagen con un fragmento de código, enviando un enlace a un archivo ubicado en un repositorio Git remoto, usando GitHub gists u otros servicios de terceros.

Pero, ¿qué pasa si es necesario mostrar un fragmento de código en una presentación? ¿Cuál es la mejor manera de hacerlo? La respuesta a esta pregunta se puede encontrar a través del Instantánea del código complemento.

Instantánea del código le permite resaltar un fragmento de código determinado y diseñarlo bellamente con un borde personalizado. La imagen del código generada se puede copiar y utilizar fácilmente según las necesidades del desarrollador.

Fragmento de código obtenido por el Foto de código complemento

Las opciones de estilo del borde, incluido el color del borde y el relleno, se pueden configurar en la configuración de la extensión.

Personalización del estilo del borde en la configuración de la extensión.

En ciencia de datos, es común trabajar con datos tabulares, que a menudo se representan en forma de archivos CSV. Pandas es la biblioteca más popular para procesar datos tabulares en Python. Con Pandas, es fácil realizar diversas operaciones en marcos de datos, agrupar datos por columnas determinadas o visualizar datos en Jupyter Notebooks.

Sin embargo, en la práctica, a veces puede que sólo sea necesario echar un vistazo rápido al archivo CSV para comprender su estructura de columnas o simplemente mirar ejemplos de varias filas. Si bien es inconveniente mirar un archivo CSV grande y sin formato con muchas columnas, leer un archivo CSV con Pandas en un Jupyter Notebook cada vez puede llevar mucho tiempo. ¿Existe una mejor alternativa?

¡La respuesta es sí! Arcoiris CSV es un complemento muy simple pero muy útil. Todo lo que hace es colorear cada columna del conjunto de datos con un color separado, lo que hace que sea mucho más fácil distinguir visualmente entre diferentes valores de columna.

Un ejemplo de una vista de archivo CSV con el activo Arcoiris CSV complemento

Si bien hay otros complementos similares disponibles en el mercado, en mi opinión, Rainbow CSV proporciona un excelente tema de color.

Los complementos juegan un papel importante en la productividad del desarrollador. Aunque muchos ingenieros de software no prestan demasiada atención al diseño del IDE que utilizan, creo que los aspectos visuales del IDE son tan importantes como los funcionales. Al hacer que todo el entorno parezca más atractivo, hay muchas más posibilidades de ver el código con mayor placer y disfrutar aún más del proceso de desarrollo.

Los complementos que hemos visto en este artículo proporcionan un buen punto de partida para hacer que la interfaz de usuario del IDE sea más atractiva. Sin embargo, existe una amplia variedad de otros complementos útiles disponibles en el mercado de Visual Studio. Como es común en la ingeniería de software, es una cualidad crucial del desarrollador ampliar sus horizontes explorando nuevas herramientas y tecnologías.

Todas las imágenes, a menos que se indique lo contrario, son del autor.