Extensiones de Visual Studio Code para Frontends

VS Code ha sido mi editor de cabecera durante años. Lo que más me gusta es lo personalizable que es, especialmente gracias a sus extensiones.

En este artículo quiero compartirte mis favoritas, esas que realmente me ayudan a trabajar mejor como Frontend Developer. Son útiles sin importar el framework que uses y, lo mejor, ¡pueden mejorar mucho tu productividad!

🚨 Error Lens

Error Lens muestra errores justo donde ocurren, con un texto llamativo al final de la línea.

Ideal para detectar variables sin uso, paréntesis sin cerrar, llaves mal colocadas, etc. Súper útil.

🔍 Version Lens

¿Tus dependencias están actualizadas?

Con Version Lens lo sabes al instante desde el package.json.

No más búsquedas en npm manualmente.

🌐 RapidAPI Client

Con RapidAPI Client documenta y prueba tus APIs sin necesidad de utilizar una herramienta adicional como Postman.

Puedes organizar por proyectos, guardarlo en la nube y tiene la opción de obtener las interfaces de TypeScript.

🖼 Image Preview

Con Image Preview visualiza imágenes (png, jpg, webp, svg…) al hacer hover sobre la ruta o en la línea de importación.

Perfecto para identificar assets rápidamente.

⚖️ Import Cost

¿Sabes cuánto pesa lo que estás importando? Import Cost te lo dice.

Ideal para optimizar rendimiento y evitar cargar más de lo necesario.

🔤 Code Spell Checker

Con Code Spell Checker evita los errores de ortografía en comentarios, variables o nombres de funciones.

Por defecto te ayuda con el idioma inglés, pero puedes adicionar la validación de español con una extensión más: Spanish - Code Spell Checker

🔄 Auto Rename Tag

Auto Rename Tag te facilita editar los nombres de etiquetas de HTML y JSX. Solo editas la etiqueta de apertura, y automáticamente refleja el cambio en la etiqueta de cierre.

🔥 Live Server

Live Server te permite ejecutar un servidor local de desarrollo. Lo utilizo bastante en tutoriales o pruebas de concepto simples.

👥 Live Share

Live Share te permite compartir tu código y dar la opción de editar cambios con otras personas. Es excelente para dar o recibir feedback directamente en código y puede facilitar una sesión de pair programming.

▶️ Code Runner

Code Runner te permite ejecutar un fragmento de código previa selección. Tiene soporte para varios lenguajes.

Puede ser bastante útil para probar el resultado de métodos con un log.

🧠 GitLens — Git supercharged

GitLens — Git supercharged te permite consultar la información del versionado de código en Git.

Puedes ver la fecha de edición y el autor del cambio en una línea específica. Comparar el archivo con la versión anterior, abrir el código en GitHub, etc.

En el día a día puede facilitar la comunicación del equipo para resolver bugs, aclarar dudas de código, realizar mejoras, etc.

⏱ WakaTime

WakaTime te ayuda a conocer el tiempo que inviertes programando.

Yo lo utilizo para identificar mi tiempo promedio de programación al día y que proyectos y archivos me demandan mayor tiempo.

Esta información me ayuda a realizar una retrospectiva de mi trabajo semanal. Puedo evaluar mi carga de trabajo, equilibrar mi inversión de tiempo para diferentes proyectos y actualizar las estimaciones de tareas al identificar archivos complejos.

🌈 indent-rainbow

Con indent-rainbow la identación de código es bastante explícita con un color diferente por cada nivel. Es un punto a favor para mantener un código limpio y facilitar la lectura.

🧹 Trailing Spaces

Con Trailing Spaces los espacios no necesarios se muestran en color rojo. Con ello es fácil identificarlos y removerlos. Un punto a favor para mantener un código limpio.

🎨 Color Highlight

Color Highlight me facilita visualizar valores de color en los archivos. Ayuda mucho para mejorar la lectura de código.

🧶 colorize

Colorize me facilita visualizar valores de color en los archivos.

El motivo de agregar esta dependencia a parte de Color Highlight es porque esta extensión pinta las variables de CSS. Ejemplo var(—primary-color).

🏷 Highlight Matching Tag

Highlight Matching Tag me permite ver claramente dónde inicia y cierra una etiqueta.

📌 TODO Highlight

TODO Highlight resalta los comentarios TODO en código.

Con esto puedes ver claramente un pendiente en un archivo que estés revisando, posiblemente pueda ser parte de tu tarea.

Considera la configuración siguiente para solo marcar los TODO y TODO:

💥 Pretty TypeScript Errors

Pretty TypeScript Errors mejora la descripción de un error con TypeScript. Ayuda bastante para identificar conflictos con los types.

🧪 ESLint

ESLint ayuda a detectar errores durante desarrollo si el proyecto tiene configurado previamente algún estándar de ESLint como el de AirBnb o alguna otra configuración personalizada.

✨ Prettier - Code formatter

Prettier - Code formatter me permite formatear el código al guardar. Puede ser configurado junto a ESLint.

Para ciertos proyectos suelo deshabilitar esta extensión para evitar subir commits con cambios que son de formateo. Considera esto para facilitar la revisión de PRs.

📸 CodeSnap

CodeSnap me ayuda bastante cuando deseo compartir un bloque de código de forma elegante.

¡Gracias por leer!