Imagen destacada del artículo CodeGPT: ChatGPT dentro de vscode

CodeGPT: ChatGPT dentro de vscode

actualizado: 23 / 02 / 2023

CodeGPT es una extensión para Visual Studio Code que permite utilizar la API oficial de OpenAI para integrar GPT-3 en el editor de código Con CodeGPT, es posible generar código, explicar código, refactorizar código y mucho más.

Instalación y configuración de codeGPT

Para configurar CodeGPT en VSCode, se deben seguir los siguientes pasos:

  1. Abrir VSCode y seleccionar la opción "Extensions" en el menú de la izquierda.
  2. Buscar "Code GPT" en la barra de búsqueda y seleccionar la opción de instalar la extensión.
    extensión codeGPT
    extensión codeGPT
  3. Una vez instalada la extensión, abrir el menú de "Settings" en VSCode.
  4. Buscar la opción de "extensiones" y selecciona codeGPT.
  5. Ahora para agregar tu api key de openai presiona cmd+shift+p y busca el siguiente termino 'CodeGPT: Set API KEY' , Pudede generar tus claves de openai aqui
  6. Introducir la clave de API de OpenAI en el campo de entrada y presiona enter.
    Campo para introudcir la llave de openAi
    Campo para introudcir la llave de openAi

Con esto ya tendrías la extension lista para usarla, puedes cambiar en configuración el lenguaje, en que quieres obtener la respuesta, el número maximo de tokens a utilizar por cada respuesta, el modelo de lenguaje y la temperatura .

Funcionalidades principales de CodeGPT

Entre las funcionalidades principales de CodeGPT se encuentran:

Generar código:

puedes escribir un comentario pidiendo un código y luego presionar "cmd+shift+i" para que la extensión abra un espacio con el código generado por ejemplo:

js
// Generar un regex para validar un color hexadecimal
let regex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;

Explicar código

También puedes perdile a codeGPT explicar código. Para ello selecciona el código deseado y se haz clic con el botón derecho del ratón. En el menú emergente, se selecciona la opción "Explain CodeGPT" y abrirá una nueva ventana con una explicación detallada del código seleccionado.

Refactorizar código

CodeGPT permite refactorizar código. Sombrea el fragmento de código haz hace click con en el botón derecho de mouse y en el menú emergente, se selecciona la opción "Refactor CodeGPT". CodeGPT abrirá una nueva ventana con el código refactorizado.

Documentar código

Selecciona el código deseado y se haz click con el botón derecho del ratón. En el menú emergente selecciona la opción "Document CodeGPT". CodeGPT abrirá una nueva ventana con la documentación del código seleccionado.

Encontrar problemas en el código

Se selecciona el código deseado y haz click con el botón derecho del ratón. En el menú selecciona la opción "Find Problems CodeGPT". CodeGPT buscará y mostrará los problemas encontrados en una nueva ventana.

Generar pruebas unitarias

Para ello, selecciona el código deseado y se haz clic con el botón derecho del ratón y selecciona la opción "unit test codeGPT" aparecerá una nueva ventana con el código para realizar las pruebas.

Simular compilación de código

Selecciona el código deseado, haz click derecho y selecciona la opción "Compile & Run CodeGPT" y codeGPT simulara ser un compilador ejecutando el código

Ventajas y desventajas de CodeGPT

Las ventajas de CodeGPT incluyen:

  • Capacidad para generar código de alta calidad y coherente.
  • Facilidad de uso y personalización.
  • Amplia variedad de características útiles para desarrolladores.

Las desventajas de CodeGPT incluyen:

  • Dependencia de una conexión a Internet para utilizar la API de OpenAI.
  • Posible costo adicional para utilizar la API de OpenAI en función del uso y la cantidad de solicitudes realizadas.
  • Precisión limitada para problemas de código más complejos.

Video demostración de codeGPT

En este video Daniel desarrollador de la extensión enseña cada una de las funcionaliades y como usar codeGPT:

Cargando... Esperando para mostrar el código de este ejemplo
Artículos relacionados:
Input css: personalizar estilos de campos de entrada en css

Imagen destacada del artículo Input css: personalizar estilos de campos de entrada en css

Cómo centrar un botón con css

Imagen destacada del artículo Cómo centrar un botón con css

Cómo insertar imágenes en HTML

Imagen destacada del artículo Cómo insertar imágenes en HTML

Lista desplegable en HTML (etiqueta select)

Imagen destacada del artículo Lista desplegable en HTML (etiqueta select)

Headless cms (cms sin cabeza)

Imagen destacada del artículo Headless cms (cms sin cabeza)

Strapi cms: headless cms multipropósito de código abierto

Imagen destacada del artículo Strapi cms: headless cms multipropósito de código abierto

cómo agregar un dominio personalizado a vercel

Imagen destacada del artículo cómo agregar un dominio personalizado a vercel

como hacer una tabla en html

Imagen destacada del artículo como hacer una tabla en html