DEV Community: Manuel Duran

Lista de 15 plugins/extensiones en VS para potenciar el inicio del aprendizaje como Frontends

Manuel Duran — Wed, 28 May 2025 03:00:38 +0000

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 3 Snippets

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 👩‍💻👨‍💻

Finally is here! Official sentry plugin for strapi 🎉🎊🎉🎊

Manuel Duran — Thu, 18 Feb 2021 16:44:23 +0000

It's up now and plugin looks great!

Official blog news:
https://strapi.io/blog/introducing-sentry-plugin

Video introduction:
https://m.youtube.com/watch?v=cdlvRTCbHB4

Taller completo de formación frontend para chicas en español

Manuel Duran — Tue, 09 Feb 2021 12:06:48 +0000

Primera edición del curso en línea de programación por mujeres para mujeres llamado Beautiful Patterns (organizado por chicas del MIT desde el 2018). En este curso en línea se abordarán temas de pensamiento computacional, HMTL, CSS y JavaScript.

La información es la siguiente:

Audiencia: Mujeres de todas las edades sin experiencia previa necesaria.
Precio: ¡Gratis!
Duración: 9 semanas
Formato: En plataforma en línea con un nuevo módulo por semana a cubrir a tu ritmo + asesorías en vivo semanales.

Inscríbanse antes del 14 de febrero en el siguiente link: http://bit.ly/3j99RBU ✨

Para más info, pueden escribir a la siguiente cuenta en twitter @adasilvapdev

https://mit.zoom.us/j/96780042130

Si tienes amigas, familiares o conocidas que saben que les puede aportar no dejes de correr la voz!