Mis 3 extensiones favoritas de VS Code que te ayudaran en el desarrollo web

John SerranoJohn Serrano
26 noviembre - 2023
VScode

Como desarrollador web, siempre estoy buscando formas de mejorar mi productividad y eficiencia. Una de las mejores maneras de hacerlo es usar extensiones de Visual Studio Code. En este artículo, te voy a contar sobre mis 3 extensiones favoritas de VS Code que me ayudan a hacer mi trabajo mejor. Estas extensiones son:

  • Error Lens
  • Console Ninja
  • Amazon CodeWhisperer

Cada una de estas extensiones tienen mucho por ofrecer y todas ellas me han ayudado a ser más productivo y a escribir código de mejor calidad.

Error Lens

Error Lens es una extensión que nos permite identificar los errores de nuestro código de una manera más visual. La extensión marca los errores y advertencias con un icono en la parte superior de la línea que contiene el error. También proporciona información adicional sobre el error, como el número de línea, el tipo de error y el mensaje de error.

Error Lens es una herramienta muy útil para desarrolladores web. Puede ayudarnos a evitar pasar código con errores a producción y a identificar los errores de forma más rápida y sencilla.

Aquí hay algunos consejos para usar Error Lens:

  • Puedes configurar Error Lens para que muestre diferentes colores para diferentes tipos de errores. Esto puede ayudarte a identificar rápidamente los errores más importantes.

  • Puedes configurar Error Lens para que muestre información adicional sobre el error, como el nombre del archivo o la función en la que se produjo el error. Esto puede ayudarte a comprender mejor el error.

  • Puedes usar Error Lens para navegar por los errores de tu código. Simplemente haz clic en el icono de error para saltar a la línea que contiene el error.

Cómo instalar Error Lens

Para instalar Error Lens, abre Visual Studio Code y ve a Extensiones. Luego, busca “Error Lens” y haz clic en Instalar.

Una vez que Error Lens esté instalado, se activará automáticamente.

Console Ninja

Console Ninja es una extensión que nos permite ver las salidas de la consola de tu código de una manera más rápida y sencilla. La extensión muestra las salidas de la consola directamente en el editor de Visual Studio Code, lo que nos permite ver los resultados de nuestro código sin tener que ir al navegador.

Console Ninja nos puede ayudar a ahorrar tiempo al depurar nuestro código y a obtener una mejor comprensión de los resultados del código.

Cómo instalar Console Ninja

Para instalar Console Ninja, abre Visual Studio Code y ve a Extensiones. Luego, busca “Console Ninja” y haz clic en Instalar.

Una vez que Console Ninja esté instalado, se activará automáticamente.

Me gusta que Console Ninja muestre las salidas de la consola directamente en el editor de Visual Studio Code. Esto hace que sea muy fácil ver los resultados de mi código sin tener que ir al navegador. También me gusta que Console Ninja pueda mostrar diferentes colores para diferentes tipos de salidas. Esto puede ayudarme a identificar rápidamente los resultados más importantes.

Amazon CodeWhisperer

Amazon CodeWhisperer es una extensión de Visual Studio Code que nos permite generar sugerencias de código de manera inteligente. La extensión utiliza aprendizaje automático para analizar nuestro código y sugerir fragmentos de código, funciones completas y otros elementos de código que pueden ser útiles. Es muy parecida a GitHub Copilot pero en este caso tenemos una versión gratuita.

Llevo ya algunos meses usando Amazon CodeWhisperer, la extensión de Visual Studio Code que ofrece sugerencias de código de forma inteligente. Hasta el momento, me ha parecido una buena extensión que me ha acompañado en mis desarrollos.

No está al nivel de GitHub Copilot, pero me ha dejado muy buenas sensaciones. Además, siendo gratuita y respaldada por Amazon, se comporta muy bien.

Una de las cosas que más me gusta de Amazon CodeWhisperer es que es muy versátil. Puede generar sugerencias para diferentes idiomas de programación y tipos de código. Esto la hace una herramienta muy útil para una variedad de tareas.

Cómo instalar Amazon CodeWhisperer

Para instalar Amazon CodeWhisperer, abre Visual Studio Code y ve a Extensiones. Luego, busca “AWS Toolkit” y haz clic en Instalar.

Una vez que AWS Tooklit este instalada debemos ir al icono de aws que se encuentra en la parte izquierda donde estan los iconos y buscamos la opción de CodeWhisperer y debemos iniciar sesión para tener acceso a la sugerencias de código. Más información en Introducción Amazon CodeWhisperer

En general, creo que Amazon CodeWhisperer es una gran opción para desarrolladores web que buscan una herramienta que les ayude a escribir mejor código y a ahorrar tiempo. Es una extensión gratuita y versátil que es fácil de usar y que se comporta muy bien.

Conclusiones

Las 3 extensiones que he revisado en este artículo son herramientas muy útiles para desarrolladores web. Cada una de ellas tiene sus propias fortalezas y debilidades, pero todas ellas pueden ayudarte a ser más productivo y eficiente.

Error Lens es una extensión muy útil para identificar y solucionar errores.

Console Ninja es una extensión muy útil para ver las salidas de la consola de tu código.

Amazon CodeWhisperer es una extensión muy útil para generar sugerencias de código de manera inteligente.

En general, creo que estas 3 extensiones son una excelente adición a cualquier entorno de desarrollo web. Si estás buscando formas de mejorar tu productividad y eficiencia, te recomiendo que pruebes estas extensiones.

Soy John Serrano ingeniero de software con más de 7 años de experiencia. Me especializo en la creación de experiencias digitales de alto impacto. Entusiasta de las tecnologías web: JavaScript, TypeScript, Node.js, Docker, Firebase, React, etc. Me puedes encontrar en las siguientes redes sociales:

Apoyo

Estoy muy feliz de que disfrutes del contenido de johnserrano.co, si te gusta lo que lees y quieres respaldar mi trabajo, puedes realizar una donación a través de Tarjeta de crédito o PSE. Además, estoy disponible para recibir tu apoyo por correo electrónico en [email protected] si prefieres otras opciones. Tu apoyo ayuda a mantener este proyecto en marcha. ¡Gracias por tu apoyo!

Apoyo no monetario

Otra manera de ayudarme es difundiéndolo de boca en boca! Si consideras que el contenido que comparto en johnserrano.co puede ser valioso para tus amig@s y compañer@s, te invito a compartirlo en Twitter, LinkedIn o en la plataforma que prefieras. Tu recomendación puede marcar la diferencia. ✨

No hay un amor más grande que el dar la vida por los amigos. Juan 15:13

Otros artículos

TypeScript, Types vs interfaces

TypeScript, Types vs interfaces

Cuando se trata de TypeScript, hay dos formas de definir tipos: 'types' e 'interfaces'. Vamos a explorar las diferencias y similitudes entre tipos e interfaces, así como cuándo es apropiado usar cada uno.