DROPCODING BLOG

Utiliza ChatGPT con la Extensión de Visual Studio Code

Actualmente este método está desfasado. Te recomiendo que veas cómo tener ChatGPT en VSCode.

Si conoces el potencial de ChatGPT y sueles usar Visual Studio Code, este post te va a encantar. Te voy a enseñar a utilizar ChatGPT dentro de Visual Studio Code con una simple extensión.

Con esta extensión, podremos crear código en cualquier lenguaje mediante una instrucción o un prompt.

Es decir, le podremos decir que haga algo en concreto y la inteligencia artificial se encargará de escribir el código por nosotros.

Por ejemplo, le podemos decir de hacer toda una página web usando ChatGPT

Antes de nada, ya sabes que si tienes cualquier pregunta o cualquier sugerencia, puedes dejarla en los comentarios de abajo y te responderé.
Y ahora vamos a instalar y configurar esta extensión.

Por cierto, te dejo por aquí el vídeo donde lo explico.

Instalar extensión VSCode

Primero, vamos a ir a Visual Studio Code, a la sección de extensiones. En la barra de búsqueda, buscaremos ‘CodeGPT’. Lo instalamos en un momento.

Para configurar esta extensión, primero vamos a ir a ajustes y le daremos a la opción de ‘settings’.

Dentro de la sección de ajustes, buscaremos el nombre de la extensión ‘CodeGPT’.

Configuración API Key

Lo primero que tenemos que hacer es crear nuestra API Key que vamos a utilizar para conectar ChatGPT con Visual Studio Code. Si no, no funcionará.

Para hacer esto, simplemente vamos a darle donde pone ‘API Key’, y seremos dirigidos a nuestra cuenta de OpenAI.

Vamos a ir a la sección de API Keys, le daremos a ‘Create New Secret Key’, lo copiaremos, y volveremos a Visual Studio Code.

Ahora, daremos ‘F1’ y teclearemos ‘CodeGPT: Set API’. A continuación, le daremos clic a esta opción, pegaremos el código y presionaremos ‘Intro’.

Ya estaremos conectados a Chat GPT y podremos usarlo.

Configuración Extensión ChatGPT

Primero debemos configurar algunos parámetros. Vamos a configurar el número máximo de tokens generados por cada instrucción, por ejemplo, 500.

Puedes poner los que tu quieras, pero recuerda que se cobrarán más tokens!.

Aquí viene una parte importante, en la que podemos seleccionar el modelo que queramos en ‘Code GPT model’. La mayoría de tutoriales y guías que he visto usan ‘Code Da Vinci 002’, pero ese modelo no me ha funcionado bien.

En este ejemplo, he usado ‘Text Da Vinci 003’ que, por cierto, es el más avanzado.

A continuación, podemos seleccionar el idioma. En este caso español y ahora vamos con la temperatura.

La temperatura es como el nivel de creatividad. Cuanto más alto sea el valor, más creativo será el chat. Pero es mejor que lo pruebes y lo adaptes a tus necesidades.

Ya tenemos la extensión de Chat GPT instalada y configurada en Visual Studio Code. Ahora solo queda hacer algunos ejemplos para ver cómo funciona y su potencial.

Para usar Chat GPT, simplemente debemos presionar ‘F1’ en la consola.

También puedes presionar Control + Shift + P.

Si la opción de «Ask» no aparece, escribimos «ask code gpt», presionamos Intro y aparecerá un cuadro para ingresar nuestra instrucción. Por ejemplo, le podemos decir que haga una galería de imágenes en HTML y CSS, y verás lo increíble que es: con solo una instrucción, nos crea la galería con estilos incluidos. Podemos copiar y pegar este código en nuestra página web y ya está. No tendremos que preocuparnos por diseñar una galería o cualquier otra cosa.
También podemos pedirle a ChatGPT que cree un formulario de contacto en HTML y PHP. El sistema nos creará todo el código HTML del formulario y luego todo el código PHP, y hasta nos comentará y explicará cada paso que ha dado.

Por ejemplo, nos explicará por qué guarda ciertas variables. Incluso nos crea la redirección para que una vez que el formulario se haya enviado con éxito, el usuario sea redirigido a otra página. ¡Increíble!

Este sistema nos sirve para cualquier lenguaje, ya sea back-end, web o escritorio.

Yo seguiré investigando, pero te invito a que lo pruebes tú mismo. Si haces algo que mole con esta extensión, agradecería que lo compartieras en los comentarios.

Y ya sabes, que si tienes alguna pregunta o sugerencia, también puedes dejarla en los comentarios.

Hasta la próxima, adiós.

Apúntate a la Newsletter y Mejora tus Habilidades

Conoce los secretos mejor guardados sobre el Diseño y el Desarrollo Web.

Suscríbete

Deja una respuesta

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