Tres extensiones de Visual Studio Code que no conoces, muy recopadas, muy chulas, de Visual Studio Code que tienes que conocer de esta nueva versión.
Bueno, la primera extensión que te traigo es la de Rapid API, el cliente de Rapid API.
Y te voy a explicar por qué está muy chulo, por qué deberías instalarlo y por qué va a hacer que dejes de utilizar Postman, Insomnia y todo este tipo de cosas.
La extensión la tienes aquí y ya tiene 22.000 instalaciones, 5 estrellitas, no está mal.
La voy a instalar y la vamos a ver un poquito desde cero para que veamos por qué está interesante.
ThunderCline sería una alternativa, pero Rapid API tiene algunas cosas que están muy bien, ya veréis por qué.
ThunderCline está muy chulo y de hecho se os gusta, genial.
Pero Rapid API que es nueva, se integra muy bien con Rapid API y eso le da un plus.
Además de que tiene algunas cositas que pinta muy bien y para ser la primera versión, o sea, una versión que acaba de salir, genial.
Así que, bueno, me la instalo, ¿vale?
Y ahora veréis que aquí me han salido estos tres puntitos y aquí tengo Rapid API.
Esto es porque ya no me caben, mira, tengo ThunderCline, de hecho.
Voy a quitar ThunderCline, pum, para que me salga el Fantasmita.
Y voy a quitar la de Timeline, que tampoco la tengo muy vista.
Vale, pues os debería salir el Fantasmita, ¿vale?
Ahora, esta extensión de Rapid API lo que os da es esto que veis aquí.
¿Veis que aparece aquí?
Una cosa que he visto, que espero que solucionen, es que dependiendo del proyecto, o sea, del theme, no se ve muy bien, ¿sabes?
No parece como que se vea muy bien, no sé, los menús y tal.
He visto algunos themes que sí que se ven mejor, ¿eh?
Ahora, puedes crear tu propia request, de hecho le puedes dar aquí a la request, pero aquí tenemos una de ejemplo.
Así que le voy a dar para que lo veáis como es, ya que lo tendríamos, ¿vale?
Y me gusta bastante la UI, me gusta incluso más, a mí personalmente, que la de ThunderClient.
No por nada, o sea, la de ThunderClient está muy bien, pero esta parte de aquí, al menos me parece que está muy bien conseguida,
porque se ve bastante bien, me gustan los botones, no sé, le da un toquecito que está chulo, que está chulo.
Y además puedes poner aquí, puedes ir poniendo las requests y las puedes documentar, lo cual está muy bien.
Por ejemplo, pongaos la Pokeapi, por poner algo, ¿vale?
Esta Pokeapi, y la ponemos aquí, pim, le puedes dar a Send, y ya tendríamos aquí.
Y vais a ver una cosa que esto os va a encantar, os va a encantar, os va a encantar.
Ahora te explico cómo poner una variable de entorno, aunque no muy útil, pero mira, hay una cosa que está muy chula.
Como veis, he hecho el Send y aquí ya tengo como la respuesta del JSON, ¿vale?
Podemos ver la información de toda la request, la request, ver lo que os ha enviado, esto sería lo que tú puedes enviar,
y la response, ¿no? Y en la response tenemos el JSON y todo esto.
Tú tienes el JSON, imagínate que quieres decir, quiero entrar, quiero ver este abilities solo.
Si tú escribes ya aquí abilities, lo que vas a ver aquí es directamente el array, ¿vale?
Ya tendríamos aquí el array, sin necesidad de tener toda la estructura y todo esto.
Y además puedes hacer cosas más complejas, como por ejemplo esto, para recuperar el primer elemento y todo esto.
O sea, abilities, por ejemplo, abilities, la posición cero.
Y ahí deberíamos tener solo la posición cero.
Otro mecenas más en Patreon.
Oh, muchas gracias.
Punto name, ¿veis?
Esto está muy... Es que tiene cosas.
Pero, ¿veis? Podéis hacer este tipo de expresión para ver el path del JSON y lo podéis detectar.
Pero espérate, que esto no es todo.
Que tiene una cosa que está muy chula.
Que, a ver, no es algo nuevo.
No es algo nuevo de Rapid API.
Pero sí es algo que teniendo la extensión integrada me parece súper chulo.
¿Ves que pone aquí JSON2?
Si le dais aquí al JSON2 y le ponéis...
Podéis pasarlo a Python, a Swift o a TypeScript.
Y le dais a TypeScript y le dais aquí al código.
¡Esto está chulísimo!
¡Esto está chulísimo!
Tenéis la interfaz totalmente integrada de TypeScript.
Pero fíjate que me ha sacado toda la interfaz del JSON.
Toda la interfaz.
Es verdad que los nombres no son perfectos.
Pero esto sería la response.
La PokeApp response.
Pero mira, esta sí que está bien.
El nombre de esta interfaz, ¿qué?
Esto está chublísimo.
No me digas que esto está chulo.
Y esto, que yo sepa, al menos cuando yo lo he estado utilizando,
Thunderclain no lo tiene.
Por eso digo que tiene cosas que están muy chulas.
Y es que ha sacado todas.
Esto sí que lo he visto yo en otros sitios.
Esto lo he visto en herramientas.
Hay webs que te lo hacen.
Pero no me digáis.
O sea, ¿cuánto tiempo os acabo de ahorrar?
O sea, todo el tiempo que os ha ahorrado,
lo podéis pasar ahora viendo streams de MiduDev.
O sea, es increíble.
Es increíble.
Yo cuando he visto esto he dicho,
what, what, what.
Y esto, yo entiendo que lo va a tener,
lo pondrá Thunderclain porque esto es demasiado chulo.
También lo podéis exportar a, por ejemplo, Python.
A ver, que no sé si os será igual de útil.
Pero podéis crear una clase.
Ves, aquí tenéis clases.
Y básicamente tenéis todo, todo, todo.
Y lo mismo incluso con Swift.
Y me imagino que esto lo van a poner con un montón.
Un montón de idiomas.
Con un montón.
Y me parece chulísimo.
Me parece chulísimo.
Me parece que está muy conseguido.
Y que le da un toque.
Es verdad que está aquí un poco oculto.
Lo digo por si no lo veis.
Que está un poco oculto.
Pero bueno, una vez que lo pones aquí con TypeScript,
aquí le pondrías para tener el código.
Y esto es para copiarlo directamente.
O sea, esto le das a copiar.
Le he dado a copiar y ya lo puedes pegar donde tú quieras.
Está muy chulo.
Está muy, muy chulo.
De verdad.
O sea, eso me ha parecido un detallazo.
Y me gusta bastante la interfaz.
Está muy bien.
Luego, obviamente, espérate que tiene más.
Y tiene más.
Y esto también vais a alucinar.
Es que esto está muy chulo también.
Vale.
Os he enseñado cómo transformar el JSON.
Y que te lo tipe a TypeScript, a diferentes lenguajes.
Pero fijaos aquí a la izquierda que pone Request Snippet JavaScript.
HTML Request.
Bueno.
Aquí podéis elegir cualquier idioma.
Cualquier idioma.
El que queráis.
O sea, el que queráis.
Go.
HTTP.
Node.js.
Lo que queráis.
Lo que queráis.
Es que tiene PHP.
Vale.
PHP.
Y aquí le podéis indicar cómo queréis hacer la petición a esta API.
Que ya habéis probado aquí.
Curl.
HTTP1.
HTTP2.
Vale.
Le dais.
Y lo que tenéis que hacer luego es darle a uno de estos botoncitos.
Y aquí tendríais otra vez el código.
Y ya está.
Ya está.
Esto está chulísimo.
Está muy bien.
Está muy bien.
La verdad es que está muy, muy, muy bien.
Muy bien.
Me ha gustado un montón el cómo tiene estas pequeñas cositas que marcan la diferencia.
Vale.
Alguien me decía las variables de entorno.
¿Vale?
Las variables de entorno.
Aquí.
Ah, espérate.
Que es que tiene una cosa.
Tiene una cosa que os va a encantar.
Vale.
Y veis que tengo aquí dos requests.
Tengo esta new request y request2.
Bueno.
Voy a poner.
Voy a cambiarle el nombre.
Porque además podéis poner un nombre al request.
Voy a poner request de ejemplo.
Y además aquí.
Fíjate.
Me gusta mucho esto de la descripción.
Porque aquí puedes escribir.
Y describes el endpoint.
O sea, genial.
¿No?
Pero es que le puedes poner aquí la negrita.
Le puedes poner lo que tú quieras.
¿Vale?
Pero ahora vais a ver por qué esto es tan útil.
Ahora vais a ver por qué esto es útil.
Además podéis hacer la previsualización en el mismo sitio.
Está muy bien hecha.
Debería ponerse de otra forma.
Request de la pokeapi.
Pues, a ver.
Tiene todavía algunas cosas.
Obviamente puedes hacer head, post, put, patch.
Lo que tú quieras.
Pero alguien me preguntaba.
Oye.
Vale.
Se podrán compartir esas requests.
Eso es lo que está muy chulo.
Vas a alucinar con eso.
Mira.
Primero las variables de entorno.
¿Veis aquí que pone environments?
Pues, le dais aquí a manage.
Y aquí lo que podéis hacer es manejar las variables de entorno.
Por ejemplo, imaginad secret key.
Y pones aquí un, dos, tres, cuatro, cinco.
Lo que sea.
Y fíjate lo chulo que es que cuando hacéis la request y aquí le pedís.
Vamos a poner esto por aquí.
A ver si lo puedo hacer un poco más pequeño.
Secret key.
No.
Variable.
Environment variable.
¿Ves?
¿Ves?
Aquí empiezan las llaves.
Y pones environment variable.
Le das.
Eliges secret key.
Que con esto tendrías ahí la secret key.
Que lo podrías añadir ahí directamente.
Y le das a send.
Ahora no va a funcionar.
Porque no va a entender nada de esto de la secret key.
Pero verías aquí.
¿Ves?
Aquí pone el un, dos, tres, cuatro, cinco.
Lo he pegado aquí.
Es la secret key que estoy enviando.
¿Vale?
Además, me encanta que va súper rápido.
Creo que tiene que mejorar la interfaz.
Porque ya veis que tiene alguna cosita que no termina de verse bien.
¿Sabes?
Como que no se nota mucho.
Pero creo que comparado con Zad de Client.
Tiene un montón de cosas.
Ahora.
Ahora, espérate que todavía tiene una cosa que os va a volar la cabeza.
¿Veis que aquí pone project y pone default local?
¿Vale?
Fijaos aquí que tiene dos iconitos.
Tiene dos iconitos.
Un sing-in y create or open project.
Le voy a dar a sing-in.
¿Vale?
Le voy a decir allow.
Voy a abrir esta URL.
Y esto lo que tengo que hacer es un login con Rapid API.
Que, bueno, si ya utilizáis Rapid API, pues tendréis login.
¿Vale?
Así que nada.
Otra vez abrimos esto.
Rapid API Studio.
Pero veis que pone aquí, has iniciado sesión y ya puedes empezar a sincronizar con Rapid API.
Pues el tema es que cuando tú vas teniendo estos proyectos por aquí, deberíamos tener los proyectos y los podríamos compartir.
Los podemos compartir.
¿Ves que pone fetching onboarding project data?
Pues este onboarding project data, justamente, este lo podríamos tener aquí y lo podríamos empezar a compartir.
Bueno, aquí ponía algo de la cache.
Mira, clear cache.
Vamos a poner esto.
A ver si lo pillo.
No me aparece.
No me aparece.
Qué pena.
A ver, Rapid API Personal.
Vamos a poner probando.
¿Vale?
Vamos a crear un proyecto.
A ver si lo podemos...
Mira, lo que es sincronizar.
Sí, lo quiero sincronizar.
De hecho, los quiero sincronizar todos.
Ah, ahora me ha puesto este botón que antes no tenía.
A ver si ahora aparece.
Vale, ¿veis?
Se sincronizan aquí.
Se sincronizan aquí.
¿Vale?
Le das a probando.
Y aquí ya tenemos justamente la request de ejemplo y el apocket API.
No, en mi local funciona.
No, pero aquí también.
Como podéis ver, lo que está súper chulo es que podéis sincronizar.
Que esto es otra cosa que obviamente no tenía Thunder Client.
Pero podéis sincronizar con Rapid API.
Podéis decirle que esto lo utilice cualquier otra persona.
Lo podéis sincronizar en la nube.
Lo podéis recuperar sin ningún tipo de problema.
Y esto me parece brutal.
O sea, me parece increíble el hecho de poder sincronizarlo.
Es verdad que es lo que os decía.
La UI, mira, ahora sí que aparecen los dos.
Ahora sí que aparecen.
Es que me faltaba este botón.
Tiene algunas cositas todavía en la UI que falta arreglar.
Pero mira, aquí tenemos el de Onboarding Project.
Y ya tenemos aquí todas las APIs.
O sea, es que es tremendo.
Me encanta.
Me encanta.
Me parece que está súper...
Mira, aquí un delete, por ejemplo.
Me parece que está muy bien.
Vamos con más extensiones.
Que tengo más.
Tengo más.
Otra extensión que a mí personalmente me va a cambiar la vida.
Es una extensión que he descubierto hace poquito.
Y se llama...
Se llama InlineFault.
No sé si la conocíais.
Creo que alguien me la mencionó.
Creo que alguien me la mencionó en directo.
Pero se llama InlineFault.
InlineFault.
Es esta aquí.
Todavía está en desarrollo.
Todavía está en desarrollo.
Pero vamos a instalarla.
Y vamos a probarla por primera vez.
Yo la he visto, pero no la he probado todavía.
Voy a ir a la página de RetosDev, por ejemplo.
Y vamos a ver si hace lo que tiene que hacer.
¿Vale?
Vamos a ver aquí.
InlineFault.
Veo que aquí no lo hace.
No sé si es porque no...
A ver.
InlineFault.
Ah, install.
Todavía no se ha instalado aquí.
Vale.
¡Guau!
¿Habéis visto la diferencia?
¿Dónde está la diferencia?
Aquí está la diferencia.
Esto está súper chulo justamente para Tailwind.
¿Por qué?
Porque con Tailwind añade mucha carga a las clases.
¿Verdad?
Que las clases se ven como súper largas, que no sé qué, no sé cuánto.
Pues con esto simplemente lo que haces es ocultarlo.
Con InlineFault es como un decorador que lo que hace es que te lo oculta.
Y entonces todas las ClassNames te quedan así con puntitos.
Le das al puntito y te aparece.
Lo que tiene es un montón.
Como podéis ver, hay un montón de preferencias que podéis hacer para que cambien.
Lo podéis utilizar con Vue, con HTML, Svelte, JavaScript, TypeScript, con lo que queráis.
¿Vale?
Tened en cuenta que esto lo podéis configurar para que oculte cualquier cosa que se os ocurra.
En este caso veis que aquí pone InlineFault.regex.
Esto es porque está macheando esta regex de las clases y por eso lo está haciendo.
Y le das un punto y te aparecen las clases.
O sea, está increíble.
Está increíble.
O sea, es que me gusta mucho porque justamente lo que pasa, por ejemplo, aquí en el index.
Aquí no funciona.
Pero no funciona.
Yo creo que no funciona.
No porque no funcione.
Sino porque seguramente InlineFault.
No sé si supporten languages.
¿Ves?
Estos serían los que son por defecto.
Yo creo que si ponemos astro, igual.
¿Ves?
Ya funciona.
Y ya está.
Y hombre, queda mucho más limpio.
O sea, es increíble.
O sea, queda genial.
De esta forma como que se hace todo mucho más legible.
Así que genial.
Me encanta.
Me encanta.
Me ha sorprendido.
Me ha sorprendido.
No me la esperaba tan chula.
Así que muy bien.
Muy, muy, muy bien.
La extensión de Rapid API para GraphQL.
Uso Altair, pero es horrible.
Yo creo que Rapid API funciona con GraphQL.
Ahora me hace dudar.
Ahora me hace dudar.
Pero yo creo que no solo funciona para...
¿Ves?
Body GraphQL.
O sea, es que aquí lo tienes.
O sea, está bastante pensada para GraphQL.
Tú pones aquí el post.
Pones aquí la URL.
Por ejemplo, esto.
Esto aquí.
Esto aquí.
Es verdad que no está pensado directamente.
Pero mira, ya lo tiene funcionando con GraphQL.
Prim, pam, pum.
O sea, está tremendo.
Y lo mejor de todo es que con GraphQL también.
JSON, tú, TypeScript.
Y aquí tienes los tipos de TypeScript.
Tremendo.
O sea, no me podéis decir que no es tremendo.
O sea, es que está muy chula.
Me encanta.
Me encanta.
La voy a utilizar bastante.
La voy a utilizar bastante.
Vale.
Pues, oye, qué chula la InlineFault.
Muy chula.
Muy chula.
Vale.
Pues vamos con otra.
Tengo otra extensión que yo no conocía.
Y que me parece bastante útil.
Que es Image Preview.
No sé si alguien la conocía.
Pero yo no la conocía.
No sé si es nueva.
No sé si es vieja.
No tengo ni idea.
Pero yo, al menos, no la había usado.
¿Y qué es lo que hace?
Vale.
Parece tontería.
Pero, como podéis imaginar, hace una preview, una previsualización de una imagen.
Pero esto que parece, ah, pues ya está, es bastante útil.
Por ejemplo, si vamos al layout aquí y le vamos aquí.
¡Qué chulo, Dios mío!
Porque es que hace una previsualización hasta de URLs que son externas.
Me encanta.
Me encanta.
¿Sabéis la de veces que me he cabreado yo?
Porque digo, ostras, es que me da rabia no poder ir a la URL, que no sé qué, no sé cuánto.
Pues fíjate, aunque sea externa, te pones encima y ya está.
Oye, no me digáis que estas tres extensiones que hemos visto no son increíbles.
Pues mira, tres extensiones fáciles que van súper bien, súper bien.
Está rotísimo, ¿eh?
Está cheto esto.
Está chetísimo.
Está chetísimo.
Pero sí, sí, ahí tenéis.
Tres extensiones muy chulas.
Es que esta es súper útil.
Es súper útil.
Bueno, sí, a los que lo usabais, pues nada, haberlas compartido antes.
No, hombre, hombre.