En este post te voy a contar cuáles son mis extensiones preferidas de VSCode, que es el IDE que más he estado usando en los últimos años.
Para diferenciarme un poco de otros artículos similares, decidí no incluir los linters de código, temas y plugins comunes que todo el mundo tiene. Bueno, tal vez incluya alguno bastante conocido, pero la idea es que no encuentres lo mismo que en cualquier otra web o video de YouTube.
A pesar de que uso VSCode a diario, la verdad es que no soy muy fan de este IDE. Al menos, no lo siento tan propio como los IDEs de JetBrains, que me siguen pareciendo los mejores (al menos los dos que usé: PHPStorm y WebStorm).
Más allá de eso, reconozco que VSCode es casi una herramienta universal, así que decidí aprenderlo y adoptarlo.
A continuación, las extensiones que más utilizo.
Contenido
Lorem Ipsum
Esta es una extensión escrita por Daniel Imms que te permite generar texto de relleno de forma rápida. Podés elegir cuántos párrafos generar para no tener que andar escribiendo o copiando texto de algún otro lado.
El texto que se genera es el famoso lorem ipsum de toda la vida.
Enlace: Lorem Ipsum
File Utils
Esta extensión de Steffen Leistner lo que te permite es realizar operaciones sobre archivos. Entre ellas, te habilita a crear, renombrar, duplicar y eliminar archivos y directorios.
Obviamente que en VSCode es posible hacer todo esto, pero lo que ofrece File Utils es la posibilidad de realizarlo utilizando atajos de teclado, sin tener que usar el mouse.
Enlace: File Utils
Error Lens
Esta es una extensión bastante conocida, pero quise incluirla en el listado porque me parece fundamental.
Error Lens te muestra los errores de sintaxis en el mismo código y evita que tengas que usar el mouse para acceder a la descripción.
La función es simple, pero ayuda a optimizar mucho el tiempo.
Esta extensión está escrita por Alexander.
Enlace: Error Lens
Peacock
Esta extensión pinta la ventana de VSCode de un color para que sea fácil de identificar en caso de que tengas varias instancias del IDE abiertas.
En mi caso, es sumamente útil cuando trabajo con un frontend, por ejemplo en React, y un backend en Node.js. Al de VSCode con el proyecto en React lo pinto de celeste y al de Node.js, de verde.
De esta forma, no me equivoco de ventana, ni pierdo el tiempo leyendo el código equivocado.
Enlace: Peacock
Pretty TypeScript Errors
Escrita por yoavbls, hasta donde sé, esta extensión es bastante nueva. ¿Qué hace? Formatea un poco los extensos e incomprensibles errores del linter de TypeScript.
La alternativa a esta extensión es no usar TypeScript. No es chiste.
Enlace: Pretty TypeScript Errors
File Icons
Esta es una extensión que agrega un ícono a cada archivo para que sea más fácil identificar de qué tipo es de un solo vistazo. Admitamos también que hace que el IDE se vea más lindo.
Enlace: File Icons
Auto Rename Tag
Una extensión que hace algo simple pero necesario y que, en mi opinión, VSCode debería hacer por defecto.
Imaginate que tenés una etiqueta, de apertura y de cierre de HTML (o XML). Modificás la de apertura y Auto Rename Tag se encarga de ir actualizando la de clausura. Por supuesto, funciona también al revés.
Esta extensión está escrita por Jun Han.
Enlace: Auto Rename Tag
Auto Close Tag
Otra de Jun Han cuyo objetivo es más que claro. Escribís un tag de apertura y automáticamente aparece el de clausura, así no tenés que escribirlo a mano.
Mentiría si dijera que esta extensión funciona perfecto, pero cumple con lo que necesito.
Enlace: Auto Close Tag
Activitus Bar
Esta extensión, escrita por Gruntfuggly, activa una barra pequeña que se ubica en la parte inferior de VSCode y reemplaza a la barra lateral enorme que trae por defecto.
Me gusta porque ahorra espacio.
Enlace: Activitus Bar
Jest
Esta extensión escrita por Orta permite ver el resultado de las pruebas automatizadas en una barra, con íconos y colores.
La uso porque me hace acordar mis viejos tiempos con Java y JUnit en Eclipse. Algo que luego repliqué con PHPStorm y PHPUnit. Es como que necesito tener las pruebas integradas al IDE.
Al momento de escribir estas líneas, hice una breve investigación sobre la extensión y descubrí que tiene más de 2.500.000 descargas y apenas tres estrellas sobre cinco, con 97 reviews. No me sorprende. Creo que se puede mejorar muchísimo.
Enlace: Jest
Require to import
Esta extensión escrita por Bruce me sirvió mucho para una migración que hice hace un tiempo. Básicamente, te permite seleccionar el código CommonJS (es decir, las importaciones con require) y pasarlas a ES6 (con import).
Enlace: Require to import
Otras extensiones conocidas que tengo instaladas
Además de las listadas aquí, uso algunas otras extensiones. Aquí listo algunas de ellas brevemente.
- Better comments: para agregar comentarios personalizados de colores (la verdad es que no la uso mucho)
- TODO Highlights: similar a Better Comments, pero para agregar tareas para hacer al código.
Más contenido sobre programación y modo de vida freelancer en Crónicas Freelancer
Espero que este artículo haya sido de tu interés.
La verdad es que VSCode me parece un IDE incompleto a veces. Así que me interesa saber qué extensiones usás y recomendás. Dejame un comentario al finalizar el artículo.
Si estás buscando hosting, te recomiendo Digital Ocean. Seguí este enlace para obtener US$ 200 de crédito para usar en un periodo de 60 días.
Te invito a que me sigas en las redes: LinkedIn, X, GitHub e Instagram. También estoy en CodeWars.
Eso es todo. Muchas gracias por tomarte el tiempo de leerme.
Hasta la próxima.
Fuente foto:
