Guia de Extensões do VS Code (Português do Brasil)

Visão Geral

Um guia em português do Brasil para construir extensões do VS Code, cobrindo todo o ciclo de vida, desde a criação inicial até a publicação no Marketplace. Inclui material de referência sobre padrões de webview, segurança CSP, TreeView, testes, empacotamento e solução de problemas. Atualizado para APIs do VS Code 1.74+.

Adaptado de aktsmm/agent-skills (CC BY-NC-SA 4.0), traduzido para o inglês com correções para as APIs atuais do VS Code.

Quando Usar Esta Habilidade

• Use ao criar uma nova extensão do VS Code do zero
• Use ao adicionar comandos, atalhos de teclado ou configurações a uma extensão
• Use ao construir UI de TreeView ou Webview em uma extensão
• Use ao publicar uma extensão no VS Code Marketplace
• Use ao solucionar problemas de ativação ou empacotamento de extensões

Como Funciona

Início Rápido

npm install -g yo generator-code
yo code

Estrutura do Projeto

my-extension/
├── package.json          # Extension manifest
├── src/extension.ts      # Entry point
├── out/                  # Compiled JS
├── images/icon.png       # 128x128 PNG for Marketplace
└── .vscodeignore         # Exclude files from VSIX

Construção e Empacotamento

npm run compile           # Build once
npm run watch             # Watch mode (F5 to launch debug)
npx @vscode/vsce package  # Creates .vsix

Tópicos de Referência

A habilidade completa inclui documentos de referência detalhados sobre:

• Padrões de Webview com segurança CSP e passagem de mensagens
• TreeView provedores de dados e arrastar e soltar
• Configuração de Testes com @vscode/test-electron
• Publicação no VS Code Marketplace
• Personalização de IA para projetos de extensão
• Prompts de revisão de código para código de extensão
• Solução de problemas de problemas comuns de extensão

Instale a Habilidade Completa

Para o guia completo com todos os documentos de referência:

npx skills add lewiswigmore/agent-skills --skill vscode-extension-guide-en

Melhores Práticas

• Unifique o nome do pacote, chaves de configuração, IDs de comando e IDs de visualização antes de publicar
• Mantenha o tamanho do pacote abaixo de 5MB usando .vscodeignore
• Desde o VS Code 1.74, activationEvents são detectados automaticamente para comandos e visualizações contribuídos
• Sempre teste com o Extension Development Host (F5) antes de empacotar

Armadilhas Comuns

• Problema: Extensão não carregando Solução: Verifique activationEvents. Desde o VS Code 1.74, estes são detectados automaticamente para comandos/visualizações contribuídos.

• Problema: Comando não encontrado Solução: Combine o ID do comando exatamente entre package.json e seu código.

• Problema: Conteúdo da Webview não exibindo Solução: Verifique sua Content Security Policy. Use a propriedade cspSource da webview.

Habilidades Relacionadas

• @test-driven-development - Escreva testes antes de implementar recursos de extensão
• @debugging-strategies - Solução de problemas sistemática para problemas de extensão

Limitações

• Use esta habilidade apenas quando a tarefa corresponder claramente ao escopo descrito acima.
• Não trate a saída como um substituto para validação específica do ambiente, testes ou revisão especializada.
• Pare e peça esclarecimentos se os inputs, permissões, limites de segurança ou critérios de sucesso necessários estiverem ausentes.