Construir uma Extensão do VSCode com ChatGPT

Introdução

Este projeto irá guiá-lo através do processo de criação de uma extensão do VSCode que permite ao usuário ajustar o nível do cabeçalho do texto Markdown selecionado. Ao final, você terá uma extensão funcional que aprimora a experiência de edição de Markdown no Visual Studio Code.

👀 Prévia

🎯 Tarefas

Neste projeto, você aprenderá:

• Como criar a estrutura básica (scaffolding) para uma extensão do VSCode usando TypeScript.
• Como integrar TypeScript com as configurações do Node.js e do VSCode.
• Como desenvolver a funcionalidade principal para ajustar os níveis de cabeçalho do texto Markdown selecionado.
• Como escrever arquivos de configuração para compilar, depurar e executar a extensão.

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Projetar e desenvolver extensões do VSCode usando TypeScript.
• Lidar com interações do usuário e seleções de texto no ambiente do VSCode.
• Analisar (parse) e manipular a sintaxe Markdown.
• Gerar e gerenciar múltiplos arquivos em um projeto.
• Configurar TypeScript, Node.js e VSCode para um desenvolvimento contínuo.

Instalar smol-ai

Além disso, utilizaremos o framework smol-ai para gerar código.

Descrição do smol-ai a partir do README:

Este é um protótipo de um agente "desenvolvedor júnior" (também conhecido como smol dev) que gera toda a base de código para você assim que você fornece uma especificação do produto, mas não acaba com o mundo nem promete demais AGI. Em vez de criar e manter inicializadores específicos e rígidos de uso único, como create-react-app ou create-nextjs-app, isso é basicamente create-anything-app, onde você desenvolve seu prompt de scaffolding em um loop apertado com seu smol dev.

Gostamos do smol-ai por sua simplicidade. Toda a lógica de geração de código está em um único arquivo Python, consistindo em três funções principais:

1. gerar uma lista de arquivos necessários para executar o prompt (ex: package.json, index.js, ...);
2. gerar uma lista de dependências compartilhadas necessárias para executar o prompt (ex: axios, react, ...);
3. para cada arquivo na lista de arquivos gerados, gerar código que irá para o arquivo, utilizando dependências compartilhadas, se aplicável.

Note que o smol-ai também oferece outras capacidades, como a habilidade de depurar erros e gerar um prompt baseado na base de código atual.

Tarefas

1. Clonar o repositório smol-ai

   Você precisa clonar o repositório https://github.com/smol-ai/developer para o diretório /home/labex/project.

2. Configurar smol-ai

   Você precisa ler o README do smol-ai e configurar a chave da API da OpenAI.

Inicializar Esta Extensão

Existe um prompt básico descrevendo este projeto:

uma extensão do vscode que permite ao usuário ajustar o nível do cabeçalho do texto selecionado. deve ter três comandos: aumentar nível de cabeçalho, diminuir nível de cabeçalho e definir nível de cabeçalho

Note que o prompt é curto e geral. Você pode tentar melhorar o prompt adicionando mais detalhes sobre o projeto.

Você pode executar o smol-ai para gerar o projeto. Após alguns minutos gastos gerando código, o smol-ai criou os arquivos no diretório developer/generated.

Tarefas

1. Inicializar o projeto

   Visualize o README do smol-ai e, em seguida, use o smol-ai para gerar o projeto.

2. Configurar o projeto

   Você precisa visualizar o código gerado. Se necessário, o prompt pode ser ajustado para regenerar.

Resultado Esperado

Existe um exemplo do código gerado no diretório developer/generated. Seu resultado pode ser diferente.

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

Testar Esta Extensão

Para testar esta extensão, precisamos executar com sucesso as seguintes etapas:

1. Instalar Dependências;
2. Compilar Código;
3. Executar Extensão.

Instalar Dependências

Você precisa executar os seguintes comandos no diretório gerado.

yarn

Pode haver alguns problemas ao instalar as dependências. Você precisa corrigir os problemas.

Tarefas

1. Corrigir os problemas ao instalar as dependências.

   Você pode pedir à IA para corrigir os problemas.

Resultado Esperado

Quando os problemas forem corrigidos, você poderá ver os seguintes resultados de exemplo.

$ yarn

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

Construir Esta Extensão

Como o typescript é uma linguagem compilada, precisamos executar uma etapa de compilação para transformar o código em javascript. O package.json vem com os seguintes 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 construir o código executando o seguinte comando:

tsc --init
yarn compile

Pode haver alguns problemas ao compilar o código. Você precisa corrigir os problemas.

Tarefas

1. Corrigir os problemas ao compilar o código.

   Você pode pedir à IA para corrigir os problemas.

Resultado Esperado

Quando os problemas forem corrigidos, você poderá ver os seguintes resultados de exemplo.

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

Executar Esta Extensão

Executar uma extensão do vscode requer que você vá para o painel "Executar e Depurar" e inicie a tarefa vscode extension quando o arquivo extension.ts estiver ativo no editor.

Pode haver alguns problemas ao executar a extensão. Você precisa corrigir os problemas.

Tarefas

1. Corrigir os problemas ao executar a extensão.

   Você pode pedir à IA para corrigir os problemas.

Resultado Esperado

Quando os problemas forem corrigidos, você poderá ver a extensão sendo executada corretamente.

Resumo

Funcionou 🥳

Então, como nos saímos? Conseguimos uma extensão funcional. Conseguimos que ela cumprisse o objetivo estabelecido em nosso prompt.

A jornada até este ponto não foi "automática". Encontramos muitos problemas ao longo do caminho. Sem conhecimento prévio de typescript, node.js e vscode, esses problemas teriam levado um tempo para serem depurados.

E mesmo que o código que conseguimos gerar estivesse funcionando, ainda há muitas melhorias a serem feitas:

• Não há instruções sobre como desenvolver, usar ou publicar a extensão;
• Não há um .gitignore para artefatos de typescript/javascript/vscode;
• Não há um arquivo launch.json que configure a execução da extensão em desenvolvimento;
• Não há testes;
• Não há reutilização de código.