Como integrar ChatGPT en VSCode

Hola a todos, ChatGPT se est谩 convirtiendo en una revoluci贸n, no hay d铆a que no amanezcamos con una noticia nueva sobre inteligencia artificial, y sin duda ChatGPT es la mas popular en el momento de escribir estas lineas.

No sabemos a ciencia cierta si ChatGPT terminar谩 quit谩ndonos el trabajo, pero lo que s铆 podemos asegurar es que a d铆a de hoy puede resultar una gran ayuda a los que nos dedicamos al mundo de la programaci贸n. Es por ello que hoy vamos a ver c贸mo podemos integrar ChatGPT directamente en Visual Studio Code para que nos ayude en nuestro trabajo diario.

Existen varios plugins que nos permiten integrar ChatGPT en VSCode, nosotros vamos a probar uno de los m谩s populares, para ello vamos desde VSCode pulsamos en el icono de extensiones:

En la ventana que nos abre vamos a escribir chatgpt @popular para que nos ordene los resultados por popularidad, vemos que salen muchos resultados, nosotros hoy vamos a probar code GPT, ya que el anterior en popularidad lo marca en estos momentos como deprecated, por lo tanto vamos a pulsar en el bot贸n install para instalar code GPT:

En unos segundos tendremos instalado el plugin Code GPT:

El siguiente paso que tenemos que dar es obtener la api key desde OpenAI, para ello tenemos que ir a este enlace y loguearnos con nuestra cuenta, si no est谩s dado de alta tendr谩s que hacerlo, una vez dentro pulsaremos en el bot贸n “+ Create a new secret key” para obtener la clave:


Copiamos la clave generada:


Ahora en VSCode presionamos las teclas “command+shift+p” para abrir la paleta de comandos de VSCode y escribimos “CodeGPT: set API key” :

Seleccionamos la opci贸n que nos da haciendo clic en ella y nos aparecer谩 un campo para que introduzcamos en el la api key que hemos generado, pegamos la api key u pulsamos enter.

Ahora, si reiniciamos VSCode, ya tendremos integrado ChatGPT en nuestro editor.

Vamos ha cambiar el idioma en las opciones Code GPT para que nos de los resultados en espa帽ol, para ello vamos a Code –> Preferences –> Settings:

Escribimos Code GPT la ventana que nos abre y abajo en el selector de idioma elegimos Spanish.

Si lo necesitas este es el lugar donde puede cambiar algunas opciones de Code GPT, de momento vamos a dejar el resto de par谩metros como vienen por defecto.

Ahora vamos a ver qu茅 puede hacer Code GPT por nosotros en VS Code.

Vamos a crear un archivo nuevo, por ejemplo un archivo html al que llamaremos pruebagpt.html
Veremos que ahora tenemos un icono nuevo con el que podemos interactuar con CodeGPT, si pulsamos en el icono nos abrir谩 un cuadro de dialogo donde podemos hacer consultas y peticiones de manera similar a lo que hacemos en chat GPT:

Vamos a decirle que nos cree una pagina html con css y javascript incorporado que nos muestre los primeros 10 n煤meros de la secuencia de Fibonacci.

Vemos que el solo nos genera todo el c贸digo:

Ahora solo tenemos que copiar y pegar el c贸digo que nos ha generado.

Esto es solo un simple ejemplo, pero el potencial que tiene es grand铆simo, hay que tener en cuenta que a veces puede generar c贸digo err贸neo, pero guiandole el mismo ir谩 corrigiendo los errores que pueda haber.

Y ah铆 entramos en la siguiente posibilidad que nos da Code GPT, si marcamos una secci贸n del c贸digo y pulsamos en bot贸n derecho del rat贸n nos ofrece una serie de opciones muy interesantes:

Como vemos tenemos varias opciones que son las siguiente:

  1. Ask CodeGPT: Esta opci贸n permite hacer preguntas a Code GPT sobre el c贸digo seleccionado. Puedes escribir una pregunta sobre el c贸digo y Code GPT intentar谩 proporcionar una respuesta 煤til.
  2. Compila & Run CodeGPT: Esta opci贸n compila y ejecuta el c贸digo seleccionado utilizando Code GPT. Si el c贸digo es v谩lido, Code GPT ejecutar谩 el c贸digo y mostrar谩 la salida en la consola.
  3. Explain CodeGPT: Esta opci贸n proporciona una explicaci贸n detallada del c贸digo seleccionado. Code GPT puede proporcionar explicaciones sobre la sintaxis, las estructuras de datos y los algoritmos utilizados en el c贸digo.
  4. Refactor CodeGPT: Esta opci贸n sugiere formas de mejorar el c贸digo seleccionado. Code GPT puede proporcionar sugerencias sobre c贸mo simplificar el c贸digo, hacerlo m谩s legible o mejorar su rendimiento.
  5. Document CodeGPT: Esta opci贸n ayuda a documentar el c贸digo seleccionado. Code GPT puede proporcionar sugerencias sobre c贸mo agregar comentarios 煤tiles, explicar la funci贸n del c贸digo y documentar los par谩metros y valores de retorno de las funciones.
  6. Find Problems CodeGPT: Esta opci贸n busca problemas en el c贸digo seleccionado. Code GPT puede buscar errores de sintaxis, problemas de estilo y otros problemas comunes en el c贸digo.
  7. Unit Test CodeGPT: Esta opci贸n ayuda a crear pruebas unitarias para el c贸digo seleccionado. Code GPT puede sugerir pruebas 煤tiles para verificar que el c贸digo funcione correctamente y detectar posibles errores.

En resumen, estas opciones ofrecidas por Code GPT son herramientas 煤tiles para ayudarte a entender, mejorar y documentar el c贸digo de una manera m谩s eficiente y efectiva.

Te recomiendo que pruebes todas las opciones y compruebes lo utiles que pueden ser en tu d铆a a d铆a como programador.

Espero que est谩 informaci贸n te haya sido 煤til y le saques todo el partido al potencial que tiene ChatGPT en VSCode con el plugin CodeGPT.

Un saludo, y si a煤n no lo has hecho no olvides suscribirte a mi blog para no perderte los pr贸ximos posts 聽:-),

Tambi茅n puedes seguirme en Twitter en 鈥嶡revigames y no olvides que me ayudas mucho聽si compartes este post en las redes sociales.

Un comentario en “Como integrar ChatGPT en VSCode

  1. Muy interesante, al final estar谩 todo integrado.
    Mi duda es si, al tener ChatGPT nuestro c贸digo a mano, si no lo utilizar谩 para alimentar su modelo y puede comprometer la seguridad de nuestro c贸digo… Da un poco de miedo 馃檪

Deja una respuesta

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *

Este sitio usa Akismet para reducir el spam. Aprende c贸mo se procesan los datos de tus comentarios.