Crear una Extensión de VSCode con ChatGPT

Introducción

Este proyecto te guiará a través del proceso de creación de una extensión de VSCode que permite al usuario ajustar el nivel de encabezado del texto Markdown seleccionado. Al finalizar, tendrás una extensión funcional que mejora la experiencia de edición de Markdown en Visual Studio Code.

👀 Vista Previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo crear la estructura base (scaffolding) para una extensión de VSCode usando TypeScript.
• Cómo integrar TypeScript con las configuraciones de Node.js y VSCode.
• Cómo desarrollar la funcionalidad principal para ajustar los niveles de encabezado del texto Markdown seleccionado.
• Cómo escribir archivos de configuración para compilar, depurar y ejecutar la extensión.

🏆 Logros

Después de completar este proyecto, serás capaz de:

• Diseñar y desarrollar extensiones de VSCode usando TypeScript.
• Manejar interacciones del usuario y selecciones de texto dentro del entorno de VSCode.
• Analizar (parsear) y manipular la sintaxis de Markdown.
• Generar y gestionar múltiples archivos en un proyecto.
• Configurar TypeScript, Node.js y VSCode para un desarrollo sin interrupciones.

Instalar smol-ai

Además, utilizamos el framework smol-ai para generar código.

Descripción de smol-ai desde el README:

Este es un prototipo de un agente "desarrollador junior" (también conocido como smol dev) que genera toda la base de código por ti una vez que le proporcionas una especificación del producto, pero no termina el mundo ni promete en exceso la AGI. En lugar de crear y mantener iniciadores específicos, rígidos y de una sola vez, como create-react-app o create-nextjs-app, esto es básicamente create-anything-app donde desarrollas tu prompt de andamiaje en un ciclo cerrado con tu smol dev.

Nos gusta smol-ai por su simplicidad. Toda la lógica de generación de código se encuentra en un único archivo de Python que consta de tres funciones principales:

1. Generar una lista de archivos necesarios para llevar a cabo el prompt (ej. package.json, index.js, ...).
2. Generar una lista de dependencias compartidas necesarias para llevar a cabo el prompt (ej. axios, react, ...).
3. Para cada archivo en la lista generada, generar código que iría en el archivo, haciendo uso de las dependencias compartidas si corresponde.

Ten en cuenta que smol-ai también proporciona otras capacidades, como la capacidad de depurar errores y generar un prompt basado en la base de código actual.

Tareas

1. Clonar el repositorio de smol-ai

   Debes clonar el repositorio https://github.com/smol-ai/developer en el directorio /home/labex/project.

2. Configurar smol-ai

   Debes leer el README de smol-ai y configurar la clave de API de OpenAI.

Inicializar Esta Extensión

Existe un prompt básico que describe este proyecto:

una extensión de vscode que permite al usuario ajustar el nivel de encabezado del texto seleccionado. debe tener tres comandos: aumentar nivel de encabezado, disminuir nivel de encabezado y establecer nivel de encabezado

Ten en cuenta que el prompt es corto y general. Puedes intentar mejorarlo añadiendo más detalles sobre el proyecto.

Puedes ejecutar smol-ai para generar el proyecto. Después de unos minutos dedicados a generar código, smol-ai creó los archivos en el directorio developer/generated.

Tareas

1. Inicializar el proyecto

   Visualiza el README de smol-ai, luego usa smol-ai para generar el proyecto.

2. Configurar el proyecto

   Necesitas ver el código generado. Si es necesario, el prompt se puede ajustar para regenerar.

Resultado Esperado

Hay un ejemplo del código generado en el directorio developer/generated. Tu resultado puede ser diferente.

.
├── extension
│   ├── package.json
│   ├── src
│   │   ├── commands
│   │   │   ├── decreaseHeadingLevel.ts
│   │   │   ├── increaseHeadingLevel.ts
│   │   │   └── setHeadingLevel.ts
│   │   └── extension.ts
└── shared_dependencies.md

Probar Esta Extensión

Para probar esta extensión, necesitamos ejecutar con éxito los siguientes pasos:

1. Instalar Dependencias;
2. Compilar Código;
3. Ejecutar Extensión.

Instalar Dependencias

Necesitas ejecutar los siguientes comandos en el directorio generado.

yarn

Puede haber algunos problemas al instalar las dependencias. Necesitas solucionar esos problemas.

Tareas

1. Solucionar los problemas al instalar dependencias.

   Puedes pedirle a la IA que solucione los problemas.

Resultado Esperado

Cuando se solucionen los problemas, es posible que veas los siguientes resultados de ejemplo.

$ yarn

...
[3/5] 🚚 Fetching packages...
[4/5] 🔗 Linking dependencies...
[5/5] 🔨 Building fresh packages...
✨ Done in 4.31s.

Compilar Esta Extensión

Debido a que TypeScript es un lenguaje compilado, necesitamos ejecutar un paso de compilación para convertir el código a JavaScript. El package.json viene con los siguientes scripts:

"scripts": {
    "vscode:prepublish": "npm run compile",
    "compile": "tsc -p ./",
    "watch": "tsc -watch -p ./",
    "postinstall": "node ./node_modules/vscode/bin/install",
    "test": "npm run compile && node ./node_modules/vscode/bin/test"
},

Podemos compilar el código ejecutando el siguiente comando:

tsc --init
yarn compile

Puede haber algunos problemas al compilar el código. Necesitas solucionar esos problemas.

Tareas

1. Solucionar los problemas al compilar el código.

   Puedes pedirle a la IA que solucione los problemas.

Resultado Esperado

Cuando se solucionen los problemas, es posible que veas los siguientes resultados de ejemplo.

$ tsc -p ./
✨ Done in 0.80s.

Ejecutar Esta Extensión

Ejecutar una extensión de VSCode requiere que vayas al panel "Ejecutar y Depurar" y lances la tarea vscode extension cuando el archivo extension.ts esté activo en el editor.

Puede haber algunos problemas al ejecutar la extensión. Necesitas solucionar esos problemas.

Tareas

1. Solucionar los problemas al ejecutar la extensión.

   Puedes pedirle a la IA que solucione los problemas.

Resultado Esperado

Cuando se solucionen los problemas, es posible que veas la extensión ejecutándose correctamente.

Resumen

Funciona 🥳

Entonces, ¿cómo nos fue? Conseguimos una extensión funcional. Logramos que cumpliera el objetivo establecido en nuestro prompt.

El camino hasta este punto no fue "automático". Nos encontramos con muchos problemas en el camino. Careciendo de conocimiento previo sobre TypeScript, Node.js y VSCode, estos problemas habrían tardado tiempo en depurarse.

E incluso si el código que pudimos generar funciona, todavía hay muchas mejoras por hacer:

• No hay instrucciones sobre cómo desarrollar, usar o publicar la extensión;
• No hay un .gitignore para artefactos de typescript/javascript/vscode;
• No hay un archivo launch.json que configure la ejecución de la extensión en desarrollo;
• No hay pruebas;
• No hay reutilización de código.