Ahora que estamos iniciando el primer semestre 2025 del taller de programación de front-end junto a la academia de software libre chile junto a la Asociación Gremial Informáticos UTE USACH, algunos estudiantes me han pedido recomendaciones de extensiones para el visual studio code.
Aquí les dejo una lista breve de las que considero herramientas realmente útiles para dar tus primeros pasos mientras ganas maestría con el IDE. Recuerda: esta es una guía con algunos plugins que yo recomiendo. No tienes que instalarlos todos, y no te van a hacer mejor programador solo por tenerlos instalados. Revísalos, conócelos y aprende a usarlos mientras seguimos aprendiendo juntos:
1. Code Spell Checker: Solo inglés - Code Spell Checker & Spanish: En español
En algunos trabajos que me entregaron noté que siempre se escapaba algún error ortográfico o un typo. Evitar estos errores es fundamental, ya que nuestra ortografía dice mucho de nosotros en el ámbito profesional. Ambas extensiones pueden convivir sin problema.
2. Turbo Console Log
Cuando empecemos a utilizar JavaScript, console.log se volverá bastante repetitivo. Personalmente, escribirlo una y otra vez me parece tedioso. Con este plugin, solo debes presionar ctrl + alt + L (Windows) ó ctrl + option + L (Mac) y, seleccionando tu variable, obtendrás automáticamente un console.log() justo debajo.
3. Bracket Pair Colorizer 2
Mejora la visualización de tus llaves y corchetes asignándoles colores, lo que te ayuda a identificar fácilmente dónde abre y dónde cierra cada bloque.
Aunque esté deprecada, personalmente me gusta esta versión. Ya tengo una configuración de colores brillantes que te comparto por si quieres agregarla a tu archivo settings.json:
"bracket-pair-colorizer-2.colors": [
"#fafafa",
"#9F51B6",
"#F7C244",
"#F07850",
"#9CDD29",
"#C497D4"
],
Puedes modificar los colores a tu gusto.
4. Auto Close Tag
Cierra automáticamente las etiquetas HTML. No hay mucho más que decir, salvo que encontré varios trabajos sin el cierre correcto de etiquetas. ¡Esto te puede salvar!
5. Bootstrap Snippets:
¿Te gustó usar Bootstrap para tu CSS? Entonces los snippets (autocompletados) son tus aliados para no memorizar todas las clases. Aquí te dejo algunos recomendados de las últimas versiones:
Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets
Bootstrap 5 & Font Awesome Snippets
6. Cloudflare Tunnel
Aunque puede parecer algo compleja al inicio, esta herramienta es una maravilla para compartir tu trabajo con amigos o compañeros. Básicamente, crea un servidor en tu máquina con un túnel que te genera una URL temporal para mostrar tu proyecto al mundo.
Ideal para que incluso tu mamá vea lo que estás haciendo en el taller y se sienta orgullosa de ti. 💖
(La página incluye un tutorial fácil de seguir.)
7. compareit
¿Estás comparando archivos con un compañero y no ves qué cambió? Esta extensión te permite comparar fácilmente dos archivos y detectar las diferencias. Súper útil, sobre todo si tu gato pasó por el teclado y no sabes qué tocó 🐈⬛.
8. Console Ninja
Aunque no lo recomiendo mucho porque su versión gratuita es limitada, si aprendes a usarlo puede agilizar bastante el proceso de encontrar bugs y visualizar la consola en tiempo real, especialmente cuando trabajamos con JavaScript o React.
9. Emoji
Porque la vida con emojis es mucho mejor 😜. Esta extensión te permite buscar e insertar rápidamente emojis desde una lista integrada.
10. GitHub Copilot
La manzana de la discordia. ¿Lo recomiendo? Depende.
Las herramientas de inteligencia artificial pueden acelerar nuestro trabajo, pero si dejamos que hagan todo sin entender el código, el daño nos lo hacemos nosotros mismos.
Practiquen, entiendan y aprendan. No queremos ser como quien se autodenomina "artista digital" por pedirle a DALL·E una imagen estilo Ghibli sin saber dibujar.
11. HTML Format
Nada habla mejor de ti que un código bien indentado. Esta herramienta formatea tu HTML automáticamente. (Por favor, por mi salud mental, no manden más HTML con etiquetas mal cerradas 😅).
12. HTML Snippets
Otra de autocompletado. Si no recuerdas cómo se llaman todas las etiquetas HTML (¿"div" es con "v" o con "b"? 😅), esta extensión te salva. Completa todas las etiquetas y es muy útil para las primeras tareas.
13. Live Preview y Live Server
Ya las vimos en clase. Ambas crean un servidor local para mostrar tu proyecto en el navegador:
Live Server: acceso rápido desde la barra de estado.
Live Preview: divide la pantalla para que veas el resultado dentro del mismo editor.
Ambas se actualizan en tiempo real con tus cambios.
14. Material Icon Theme
Esta es de mis favoritas. Te permite ver íconos en el explorador según el tipo de archivo. Muy útil para identificar extensiones o detectar errores en los nombres de archivos.
15. Simple React Snippets
Cuando empecemos con React, esta extensión te ayudará con snippets para evitar escribir desde cero los componentes básicos.
¡Y listo! Esas son todas las extensiones que recomiendo. Recuerda: no instales todas de golpe sin conocerlas. Revisa una por una, prueba las que más te llamen la atención y ojalá te resulten útiles.
¿Conoces alguna otra extensión que quieras compartir con tus compañeros? ¡Déjala en los comentarios!
Nos vemos en clases 👩💻👨💻
Top comments (0)