Hace un tiempo, hice un vídeo donde enseñaba a conectar Chat GPT con Visual Studio Code y, sorprendentemente, fue todo un éxito.
Sin embargo, al poco tiempo de sacar el vídeo, el método o mejor dicho, la extensión que vimos dejó de funcionar. Pero el vídeo continuó teniendo éxito. Es la primera vez que veo algo que es un éxito y un desastre al mismo tiempo.
Pero no hay que preocuparse. Cómo tuvo mucho éxito el anterior video y muchos me habéis pedido que actualice el video (esta vez de verdad), aquí tenéis un método para usar ChatGPT con VSCode y encima de forma gratis!
La extensión de VSCode para usar ChatGPT
El método que traigo en este vídeo es muchísimo mejor que el que vimos en el anterior vídeo. De hecho, es completamente gratis y funciona mucho mejor.
La extensión que vamos a ver en esta ocasión se llama Bito. Es una extensión que funciona muy bien y además es completamente gratuita. No tenemos que hacer uso de ninguna API, ni nada, tan solo nos tenemos que registrar y ya está.
Instalación y registro de Extensión
Para obtenerla realmente es muy fácil. Lo único que tenemos que hacer es irnos a la parte de extensiones de Visual Studio Code y buscar «Bito».
Si no os aparece, buscar «ChatGPT GPT-4».
Una vez instalada, simplemente nos registramos con nuestro correo y verificamos el correo de verificación que nos envían. Si no te funciona o te da error, intenta reiniciar Visual Studio Code.
Cómo funciona Bito (la extensión de VSCode)
Bito funciona como un chat de Chat GPT y le podemos pedir lo que nosotros queramos. Lo ideal sería no pedirle cosas muy largas, ya que estamos hablando de un servicio gratuito y si le pones un prompt muy largo, seguramente tienda a fallar más. Las pruebas que he hecho funcionan mejor con cosas específicas.
Ejemplos
Veamos algunos ejemplos que he realizado como prueba, para que veas cómo funciona (puedes verlo en el vídeo de arriba).
Menú desplegable html y css
Por ejemplo, podemos decir «crea un menú desplegable en HTML y CSS». Como puedes ver, nos crea la estructura HTML y CSS para un menú desplegable.
(Ejemplo en el vídeo de Youtube)
Formulario de contacto html y php
Otro ejemplo sería pedirle que haga un formulario en HTML y PHP. Le decimos «crea un formulario de contacto en HTML y PHP» y nos crea la parte de HTML y luego la parte de PHP que la tenemos que incluir en un archivo aparte.
(Ejemplo en el vídeo de Youtube)
Crea una página web en HTML y CSS
Ahora, lo que le vamos a pedir es que haga una página web completa. Le vamos a decir «crea una página web con un header con un logo y un menú de navegación, una etiqueta Main para el contenido principal que empiece con un Hero y que siga con una sección con tres artículos diferentes, un sidebar lateral con cuatro enlaces hacia categorías diferentes y un footer con información de la página y enlaces». Como puedes apreciar, va a toda leche y escupe código muy rápido.
(Ejemplo en el vídeo de Youtube)
Conclusión final
La conclusión es que Bito trabaja muy rápido pero tenemos que ser más específicos a la hora de pedirle cosas.
Por ejemplo, ahora estoy viendo aquí que el menú está todo junto. Le podríamos haber dicho que utilice flexbox para distribuir el gap, es decir, que el logo salga a la izquierda y que el menú, por ejemplo, salga a la derecha. Pero bueno, aquí el kit de la cuestión es que funciona y funciona bastante bien.
Es rápido, simplemente que tenemos que ser un poquito específicos en lo que le pedimos y sobre todo, no intentar que nos escupa 100.000 líneas de código en un prompt, sino ir haciendo un poquito de forma paulatina.
Espero que te haya gustado el vídeo, si es así, ya sabes, dale like, suscríbete y nos vemos en el próximo vídeo.