VS Explorer: o que aprendi criando um jogo idle dentro do VS Code
Criar uma extensão para VS Code foi uma das experiências mais surpreendentes que tive como desenvolvedor. A surpresa não foi pela dificuldade — foi pelo contrário: é absurdamente parecido com o desenvolvimento web que já fazemos todo dia.
Neste post vou contar como surgiu o VS Explorer, o que aprendi no processo, e deixar dicas práticas para quem quiser criar a sua própria extensão.
O que é o VS Explorer?
VS Explorer é um jogo idle de exploração de planetas que roda inteiramente dentro do VS Code. Enquanto você escreve código, seu planeta acumula recursos, missões avançam e eventos acontecem. Você abre o painel quando quiser, toma decisões rápidas, e volta a trabalhar.
Sem anúncios. Sem conta. Sem internet. Progresso salvo automaticamente.
O jogo tem:
- Mineração com sessões de 1 a 15 minutos
- Eventos aleatórios com múltiplas escolhas e consequências reais
- Mapa 4×4 procedural para exploração ativa
- Crafting de naves compostas por SVG em tempo real
- Fauna procedural — 10 criaturas espalhadas por 5 climas
- Progressão offline — recursos acumulam enquanto o VS Code está fechado
Por onde começar uma extensão?
O primeiro passo é instalar o Yeoman com o gerador oficial:
npm install -g yo generator-code
yo code
Escolha New Extension (TypeScript) e o scaffolding já entrega um projeto funcional com:
package.json— manifest da extensão (comandos, ativação, ícone)src/extension.ts— ponto de entrada comactivate()edeactivate().vscodeignore— o que não empacotar no.vsix
A grande revelação: WebviewPanel é só HTML
A parte que mais me surpreendeu foi descobrir que a interface de uma extensão é literalmente uma página web renderizada dentro do VS Code.
const panel = vscode.window.createWebviewPanel(
'vsExplorer',
'VS Explorer',
vscode.ViewColumn.One,
{ enableScripts: true }
);
panel.webview.html = `<!DOCTYPE html>
<html>
<head><style>body { background: #0a0a0a; color: #fff; }</style></head>
<body>
<h1>Seu planeta aguarda</h1>
<button onclick="mine()">Minerar</button>
<script>
function mine() { /* lógica do jogo */ }
</script>
</body>
</html>`;
É HTML, CSS e JavaScript dentro de uma string. Se você sabe fazer uma landing page, já sabe fazer uma extensão com interface.
Comunicação entre extensão e webview
A parte mais importante de entender é o canal de mensagens bidirecional entre o código Node.js da extensão e o JavaScript da webview:
Extensão → Webview:
panel.webview.postMessage({ type: 'STATE_UPDATE', payload: gameState });
Webview → Extensão:
// dentro do HTML
const vscode = acquireVsCodeApi();
vscode.postMessage({ type: 'MINE_START', duration: 5 });
// na extensão
panel.webview.onDidReceiveMessage(msg => {
if (msg.type === 'MINE_START') startMining(msg.duration);
});
No VS Explorer usei esse canal para tudo: iniciar mineração, reagir a eventos, salvar estado, mudar tema. A extensão é o servidor; a webview é o cliente.
Salvando dados: globalState
O VS Code oferece context.globalState — um armazenamento chave-valor persistente entre sessões, sem precisar de arquivo, banco ou servidor:
// salvar
await context.globalState.update('vs-explorer-save', JSON.stringify(state));
// carregar
const raw = context.globalState.get<string>('vs-explorer-save');
const state = raw ? JSON.parse(raw) : defaultState();
No VS Explorer implementei também export/import via código Base64, para backup e migração entre máquinas. O mesmo código funciona como mecanismo de recuperação após morte no jogo.
Ativação inteligente
Evite ativar sua extensão em toda abertura do VS Code. Use activationEvents no package.json:
"activationEvents": ["onCommand:vs-explorer.open"]
Isso significa: a extensão só carrega quando o usuário executar o comando. Menos impacto na inicialização do editor.
Como o jogo roda sem framework
O VS Explorer não usa React, Vue, Svelte ou qualquer bundler. Tudo é TypeScript compilado para JavaScript puro e HTML gerado programaticamente.
O loop idle roda no lado da extensão (Node.js), calculando progresso offline com base no timestamp de fechamento. A webview só renderiza o estado — sem lógica de jogo.
// engine.ts (Node.js) — calcula progresso offline
function applyOfflineProgress(state: GameState): GameState {
const now = Date.now();
const elapsed = Math.min((now - state.lastTick) / 1000, 8 * 3600); // cap 8h
const rate = getOfflineRate(state);
state.minerals += rate.minerals * elapsed;
state.energy += rate.energy * elapsed;
state.lastTick = now;
return state;
}
Dicas que eu gostaria de ter recebido
1. CSP é seu inimigo inicial
O VS Code aplica Content Security Policy na webview. Scripts inline bloqueados por padrão. Use nonce para liberar:
const nonce = crypto.randomUUID();
// no HTML:
`<script nonce="${nonce}">/* seu código */</script>`
// no CSP:
`<meta http-equiv="Content-Security-Policy"
content="script-src 'nonce-${nonce}';">`
2. Atualizações incrementais de DOM, não innerHTML completo
Evite trocar o innerHTML inteiro a cada update de estado — cria flickering e perde o foco de inputs. Atualize só os elementos que mudaram:
document.getElementById('minerals').textContent = state.minerals.toFixed(0);
3. Teste com F5 direto no VS Code
O VS Code abre uma janela de desenvolvimento com sua extensão carregada. Alterações no TypeScript + Ctrl+Shift+F5 para recarregar. Ciclo de feedback rápido.
4. Empacote com vsce
npm install -g @vscode/vsce
vsce package # gera o .vsix
vsce publish # publica no Marketplace
5. O Marketplace é gratuito Criar conta de publisher, publicar e atualizar extensões é 100% gratuito. Precisa de uma conta Microsoft e um Personal Access Token do Azure DevOps.
Estrutura final do VS Explorer
src/
extension.ts # ativação, comandos, activity bar
game/
engine.ts # loop idle: offline, mineração, eventos
events.ts # 6 eventos com escolhas e efeitos
ships.ts # 12 peças, composição SVG
fauna.ts # 10 criaturas procedurais
procedural.ts # geração de planetas por seed
upgrades.ts # 5 upgrades permanentes
save.ts # Base64 encode/decode
ui/
panel.ts # 8 abas, DOM incremental
Zero dependências externas. Zero bundler.
Vale a pena?
Sim. Criar uma extensão para VS Code é uma das formas mais diretas de entregar valor para outros desenvolvedores — e a curva de aprendizado é muito menor do que parece.
Se você já sabe TypeScript e tem familiaridade com eventos e mensagens assíncronas (o modelo pub/sub do VS Code é idêntico ao de qualquer aplicação web), você está a poucos dias de ter sua primeira extensão publicada.
O VS Explorer está disponível gratuitamente no Marketplace. Instale, explore um planeta entre dois commits, e veja se sua produtividade sobrevive.
Download
Instale direto pelo VS Code: pesquise VS Explorer na aba de extensões, ou acesse pelo Marketplace:
marketplace.visualstudio.com → VS Explorer
Código fonte aberto no GitHub:
