Extensiones de Visual Studio Code para Frontends

Mi principal herramienta es VS Code desde hace ya varios años, es genial la gran capacidad de personalización que puede tener gracias a sus extensiones.

En este artículo quiero compartirte las extensiones que utilizo en mi día a día como Frontend Developer.

Aquellas que tienen un impacto positivo en mi productividad, son generales para cualquier framework y que creo que te pueden servir también.

Error Lens

Error Lens es realmente muy útil para detectar errores mientras se está escribiendo código.

Muestra los errores en un texto llamativo al final de la línea donde se tiene el conflicto.

Podrás detectar casos muy comunes, como tener variables sin uso, olvidar cerrar paréntesis, llaves, etc.

Version Lens

Con Version Lens revisa si las dependencias de tu proyecto están actualizadas o que versiones hay disponibles.

Te ahorras mucho tiempo porque lo ves directamente en el package.json sin tener que consultar en la web de npm.

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 Identifica rápidamente assets cómo png, jpg, webp, svg, etc.

Se puede visualizar un recurso en la línea de código de la importación o al hacer hover sobre su ruta.

Import Cost

Import Cost te permite evaluar el peso de una dependencia al momento de ser importado.

Te puede ayudar a identificar dependencias que podrías cambiar para mejorar el rendimiento de tu aplicación. Tenlo muy en cuenta si el texto informativo está en rojo.

También te puede ayudar a establecer una importación más específica de recursos, para no depender de código que no utilizas.

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!