7 extensiones de VS Code para mayor PRODUCTIVIDAD

VsCode es el editor de texto más popular hoy en día, y con ayuda de las extensiones que la comunidad ha desarrollado es capaz de tener todas las herramientas que necesitamos según nuestras necesidades, gracias a estas podemos tener una herramienta de desarrollo sumamente poderosa que nos ayudará a que nuestro trabajo escribiendo y probando código sea más fácil.

---

Antes de continuar, puedes leer este post o ver y escuchar esta información en formato de video en nuestro canal de Youtube, te dejamos el link por si prefieres este formato. 😃 👍

---

Hola mundo, y bienvenidos a este post. Hace unos meses hicimos otro post hablando sobre “7 extensiones para aumentar tu productividad y evitar errores”, te dejamos la tarjeta para que también puedas sumar esas extensiones,

De este último post, varios de sus comentarios nos han pedido la parte 2 de extensiones para añadir a su configuración y mejorar así tu experiencia de desarrollo, también quiero recordarte que si quieres aprender a usar este editor, tenemos un curso dedicado en el canal de youtube de Hola Mundo para aprender a usar esta herramienta, te dejamos el link al curso gratuito de VsCode.

Y vamos a comenzar con una extensión para usuarios de CSS, y es CSS Peek:

1. CSS PEEK

CSS Peek facilita justamente esto, en el caso de Windows si presionamos la tecla control y pasamos el puntero sobre el nombre de nuestra clase o id nos mostrará la definición del código CSS, y si además hacemos click, tendremos un acceso rápido al archivo donde se encuentra dicha definición.

Pero, en otras ocasiones nos dará directamente una vista previa donde podremos modificar y guardar directamente el código CSS.

Esto depende si tienes muchas definiciones con el mismo nombre de la clase, id o etiqueta, por ejemplo, cuando usamos pseudo-elementos o pseudo-clases.

Y un detalle más, ¡también sirve en React!, así que podremos utilizar a esta extensión sin problemas en esta librería, ya que funciona de la misma manera con los componentes de esta librería.

Esta es una extensión que nos servirá con el lenguaje HTML y CSS, pero si aún no sabes cómo usarlos o quieres extender tus conocimientos sobre estas tecnologías te dejaremos los cursos:

• HTML5: sin fronteras, y
• CSS3: sin fronteras

Vamos con la siguiente extensión, esta nos servirá para el lenguaje TypeScript:

2. JSON to TS

Un ejemplo de uso de estas interfaces es la respuesta de una API, y si estás realizando el tipado de manera manual en algún proyecto, JSON to TS nos facilita mucho el trabajo, ya que nos da la posibilidad de ingresar un objetivo tipo JSON para convertirlo directamente en una interfase.

Y funcionas así:

Si presionamos “Shift + Ctrl + Alt + V” cuando tenemos copiada la interfase nos pegará directamente el código de la interfase de acuerdo a los datos que haya detectado del código JSON, igualmente lo podremos hacer si presionamos “Shift + Ctrl + Alt + S” ,del código que tengamos seleccionado nos generará la interfaz en otro archivo.

El ejemplo que te acabamos de mostrar fue un ejemplo rápido y sencillo, pero imagínate que tienes una API mucho más grande y compleja, ahí es cuando viene genial esta extensión.

La siguiente es del tipo de extensiones que nos puede ahorrar mucho tiempo al escribir código:

3. ES7+ React/Redux/React-Native snippets.

De este tipo de extensiones hay muchas y para varios lenguajes, librerías y frameworks, es cuestión de buscar la que se acomode a la tecnología con la que estás trabajando. Estas nos sirven para darnos atajos de escritura de estructuras de código que son bastante frecuentes, como la de una función, un ciclo, o también los diferentes para imprimir en la consola.

En el caso de esta extensión en particular nos da los atajos para código JS, React, React Native, Redux , Proptypes y la consola.

En este ejemplo, hemos construido un componente de React, con una importación, una función, un console.log usando solamente los atajos que nos proporciona esta extensión.

Aunque de esta también hay otra muy popular llamada “JavaScript (ES6) code snippets”, de muchas de estas su funcionamiento es muy similar, así que puedes buscar alguna que se adapte a la tecnología que estás utilizando.

Pero cuéntanos en los comentarios , ¿qué extensión de snippets nos recomiendas y usas para otras tecnologías?

Vamos con 2 que nos ayudaran a construir, probar y utilizar API´s.

4. REST Client

REST Client es una herramienta que nos permitirá de manera muy rápida hacer peticiones a una API, por supuesto, esta no es la única herramienta que tenemos para hacer peticiones, pero esta es una herramienta muy interesante para hacerlo, para hacer pruebas rápidas, ya que te permitirá hacer de forma fácil peticiones a una API sin necesidad de recurrir a una herramienta externa para gestión de peticiones, como lo son Insomnia o Postman.

La forma de usarla es muy sencilla, en el caso de una petición GET, solo tendremos que colocar la URL correspondiente del endpoint y aparecerá un pequeño botón que nos dice send request, en la que haciendo click nos generará un archivo llamado “Response” que nos mostrará los headers de la petición junto con la información que trae la respuesta, para probar esta extensión hemos usado la Poke API y nos ha regresado los datos del Pokémon Ditto.

Por supuesto, puedes usar todos los métodos para hacer solicitudes a una API REST, ya que también nos permite incluir los headers y el body, si los necesitamos para hacer otro tipo de solicitudes.

Pero si no te parece útil u óptima esta manera de trabajar, iremos con otra herramienta con la misma finalidad.

5. Thunder Client

Thunder Client es un gestor de peticiones mucho más robusto que REST Client, este es mucho más parecido en cuanto a funciones con Postman o Insomnia, pero totalmente integrado en tu editor de texto.

Como puedes observar la interfaz ,es mucho más a la de otros gestores, y la ventaja a diferencia de la extensión anterior es que todo es más visual y ordenado, y para probarla, aquí haremos la misma petición que con el ejemplo pasado a la Poke API, para poder ver su funcionamiento.

Con esta extensión podemos hacer peticiones, guardar colecciones y compartirlas con otros desarrolladores para que todos tengan la misma información y configuración de los endpoints.

Ahora pasamos a ver una para Git.

6. GitLens

Esta extensión nos permite usar la herramienta de gestión de versiones Git, pero integrado en VsCode de una forma bastante útil, el cambio más notable cuando se instala, es que cuando el cursor está en una línea de código nos mostrará cuándo ha sido la última vez que fue modificada, en qué commit se guardó el último cambio y por qué desarrollador fue realizado dicho cambio.

Podemos ver por commits, a qué archivos se le han hecho cambios, así como de otras herramientas para trabajar con GIT. De cierta manera es como tener mucha de la información que obtenemos con Git, pero de una forma gráfica integrada al navegador.

Además de tener una sección de botones dedicada para poder ver los cambios y comparar el archivo más reciente con las versiones en las que se ha hecho algún cambio.

Y la última de estas extensiones que veremos está una que hace uso de inteligencia artificial:

7. Code GPT

Las herramientas que usan inteligencia artificial han sido las más sonadas en lo que va de este 2023, las primeras que vimos son las herramientas de autocompletado como Tabnine, GitHub Copilot o Code Whisperer de Amazon.

Estas son consideradas por algunos como útiles y las utilizan en su día a día, otras personas opinan que escriben peor código. ¿Cuál es tu opinión sobre estas? Pero de estas no son de las extensiones de las que hablaremos hoy, eso lo podemos dejar para otro post.

En este año 2023, al auge de las herramientas de inteligencia artificial para múltiples disciplinas están disponibles para todo el mundo. Algunas de las más sonadas en la comunidad son las que usan herramientas de “OpenAI” como “Chat GPT-4”, y una muy útil para añadir a nuestro editor es Code GPT.

Esta es una herramienta con la que nos podremos apoyar para preguntar a herramientas de inteligencia artificial, ya sea que nos explique, genere, refactorice, haga el testing o encuentre problemas, entre otras opciones.

Para el primer ejemplo que estamos viendo, le pedimos que nos diera una función que cuando nos llegue un email lo validemos con expresiones regulares, esto por supuesto los podríamos haber buscado a Google pero con esta podemos pedírselo directamente con lenguaje natural.

En el siguiente ejemplo para probar esta extensión, le pedimos que nos diera el testing de esta función que generamos anteriormente.

Por supuesto a igual de las herramientas de autocompletado y de inteligencia artificial, esta herramienta es de pago, en esta ocasión ocupamos a OpenAI como proveedor, y es necesario contar con tokens disponibles y una API Key para usarla, pero si no la has usado tendrás algunos tokens de prueba para probar y ver si esta herramienta es útil para ti.

Y para este post, de las dos pruebas que hemos hecho nos ha arrojado este gasto: “1 centavo de dólar”, lo cual parece no ser tan caro para usar.

Pero por supuesto el proceso es mucho más lento el proceso para que nos dé una respuesta, que una herramienta de autocompletado, pero su funcionalidad es totalmente otra y con mucho más alcance, pero, si las complementamos se pueden volver una herramienta sumamente poderosa para ayudarnos en nuestro día a día.

Igualmente déjanos en los comentarios, ¿que extensiones que usan Inteligencia Artificial nos sugieres?

---

Y esto ha sido todo de este post, si te ha encantado, ¡golpea al botón de me gusta!, dejanos un comentario, para VsCode ¿Qué otras extensiones nos recomiendas y que usos le das?, ¿Quieres una tercera parte con mas extensiones?,

Visita nuestra Academia Hola Mundo, donde encontrarás todos los cursos para formarte como un desarrollador o desarrolladora. Y para no perderte nada, no olvides suscribirte a este blog, seguirnos en todas las redes como Youtube, Twitter e Instagram, y por último, te invitamos a escuchar nuestra música «Hola Beats«, diseñada para ayudarte a concentrarte y acompañarte en tu aprendizaje o trabajo, la puedes encontrar en Spotify, Apple Music, Amazon Music, Youtube Music y Deezer.

¡Hasta la próxima!, y chao mundo