Como Usar o GitHub Copilot com Snippets Personalizados do VS Code

Você quer que o GitHub Copilot sugira seus próprios snippets de código personalizados no Visual Studio Code. Por padrão, o Copilot gera código a partir de fontes públicas e do contexto do arquivo atual. Ele não lê automaticamente seus arquivos de snippet. Este artigo explica como configurar o VS Code para que o Copilot veja seus snippets personalizados e os utilize em suas sugestões. Você aprenderá as configurações exatas e os formatos de arquivo necessários.

Como o GitHub Copilot Interage com Snippets Personalizados

O GitHub Copilot gera sugestões de código com base no conteúdo do seu editor ativo, abas abertas e na estrutura do workspace. Ele não possui uma biblioteca de snippets dedicada. Snippets de código personalizados no VS Code são armazenados em arquivos JSON com extensão .code-snippets ou em um arquivo snippets.json global. O Copilot pode tratar esses arquivos como contexto adicional se eles estiverem abertos ou referenciados no workspace. A chave é fazer com que o arquivo de snippet faça parte do contexto que o Copilot analisa quando você digita.

O VS Code armazena snippets em dois locais. Snippets de nível de usuário estão na pasta de dados do usuário, geralmente %APPDATA%\Code\User\snippets no Windows ou ~/.config/Code/User/snippets no Linux e macOS. Snippets de nível de workspace são armazenados em uma pasta .vscode dentro da raiz do projeto. O Copilot pode ler ambos os tipos, mas só lê o arquivo de snippet se o arquivo estiver aberto em uma aba do editor ou se fizer parte do índice do workspace.

Por padrão, o Copilot não indexa todos os arquivos JSON no workspace. A extensão do Copilot usa uma janela de contexto que inclui o arquivo atual, arquivos abertos recentemente e arquivos que estão simbolicamente relacionados. Para forçar o Copilot a ver seu arquivo de snippet, você deve mantê-lo aberto em uma aba enquanto programa. Alternativamente, você pode incorporar código semelhante a snippet diretamente em um arquivo usado com frequência para que o Copilot aprenda o padrão.

Passos para Configurar o VS Code e o Copilot para Snippets Personalizados

Método 1: Manter o Arquivo de Snippet Aberto Enquanto Programa

Este é o método mais simples. O Copilot usa o conteúdo de todos os editores abertos como contexto. Se o arquivo de snippet estiver aberto, o Copilot pode sugerir código dele.

1. Crie ou localize seu arquivo de snippet personalizado
   Abra o VS Code e pressione Ctrl+Shift+P. Digite Preferências: Configurar Snippets de Usuário e selecione. Escolha um idioma existente ou crie um novo arquivo de snippets global. O VS Code cria um arquivo .code-snippets na pasta apropriada.
2. Defina um snippet com um prefixo claro
   No arquivo de snippet, escreva um snippet com um prefixo único. Por exemplo:

   {
     "Console Log Variable": {
       "prefix": "clv",
       "body": ["console.log('$1', $1);"],
       "description": "Log nome e valor da variável"
     }
   }

   O prefixo clv é o que você digitará para acionar o snippet.

3. Abra o arquivo de snippet em uma aba
   Clique no arquivo de snippet no Explorer ou use Ctrl+P e digite o nome do arquivo. Mantenha esta aba aberta enquanto trabalha em outros arquivos.
4. Digite o prefixo no arquivo de destino
   Em um arquivo JavaScript, digite clv. O Copilot sugerirá o corpo do snippet com base no arquivo de snippet aberto. Aceite a sugestão com Tab ou Enter.

Método 2: Adicionar Conteúdo do Snippet Diretamente em um Arquivo de Contexto

Se você não quiser manter o arquivo de snippet aberto, incorpore o código do snippet em um arquivo que faça parte do seu workspace. Por exemplo, adicione o código do snippet como um comentário ou uma função em um arquivo utilitário que você importa com frequência.

1. Crie um arquivo utilitário
   Na raiz do seu projeto, crie um arquivo chamado snippets.js ou snippets.py. Adicione o código do snippet como uma função ou um bloco de comentário.
2. Escreva o padrão do snippet como uma função
   Exemplo para JavaScript:

   // Snippet: clv
   // console.log('variableName', variableName);
   function snippetConsoleLogVar(name, value) {
     console.log(name, value);
   }

3. Mantenha o arquivo utilitário aberto ou importe-o
   Abra snippets.js em uma aba ou importe-o no seu arquivo principal. O Copilot verá o padrão e o sugerirá quando você digitar clv.

Método 3: Usar o Índice do Workspace para Incluir Arquivos de Snippet

O Copilot indexa arquivos no workspace para conclusão de código. Você pode aumentar a chance de o Copilot ver seu arquivo de snippet colocando-o na raiz do workspace e garantindo que ele não seja excluído da indexação.

1. Coloque o arquivo de snippet na raiz do workspace
   Mova seu arquivo .code-snippets para a pasta raiz do seu projeto. Não o coloque dentro de uma pasta .vscode se quiser máxima visibilidade.
2. Verifique files.exclude no settings.json
   Abra as configurações do VS Code (Ctrl+,). Pesquise por files.exclude. Certifique-se de que o padrão /code-snippets não está listado. Se estiver, remova-o.
3. Reinicie o VS Code
   Feche e reabra o VS Code. O Copilot reindexa o workspace. Abra um arquivo de código e digite o prefixo do snippet. O Copilot agora deve sugerir o corpo do snippet.

Problemas Comuns ao Usar o Copilot com Snippets Personalizados

O Copilot Não Sugere o Snippet

A causa mais comum é que o arquivo de snippet não está aberto ou não está indexado. Abra o arquivo de snippet em uma aba. Se a sugestão ainda não aparecer, verifique se o prefixo do snippet é curto e único. Um prefixo como log pode conflitar com snippets internos ou padrões de código comuns. Mude o prefixo para algo como mylog ou clv. Além disso, verifique se o Copilot está habilitado para o idioma que você está usando. O ícone de status do Copilot na barra de status deve mostrar uma marca de verificação verde.

O Copilot Sugere o Código Errado do Snippet

O Copilot pode misturar partes do seu snippet com outro contexto. Isso acontece quando o arquivo de snippet contém vários snippets que são semelhantes. Mantenha cada snippet focado em um padrão. Use prefixos distintos e comentários descritivos. Se o Copilot ainda sugerir código incorreto, feche outros arquivos que contenham padrões de código semelhantes para reduzir o ruído na janela de contexto.

O Copilot Ignora o Arquivo de Snippet Completamente

Se o Copilot nunca referenciar o arquivo de snippet, o arquivo pode estar excluído da indexação. Verifique as configurações do VS Code para search.exclude e files.watcherExclude. Remova quaisquer padrões que correspondam ao caminho do arquivo de snippet. Além disso, certifique-se de que o arquivo de snippet não tenha mais de 100 KB. O Copilot pode pular arquivos muito grandes. Divida grandes coleções de snippets em arquivos menores.

Sugestões do Copilot vs Snippets Internos do VS Code: Principais Diferenças

Item	Sugestões do Copilot	Snippets Internos do VS Code
Método de ativação	Digitar qualquer código ou comentário que corresponda ao contexto	Digitar o prefixo exato definido no arquivo de snippet
Fonte de contexto	Arquivos abertos, índice do workspace e código público	Apenas o conteúdo do arquivo de snippet
Personalização	Requer arquivo de snippet aberto ou padrão incorporado	Definido diretamente em .code-snippets ou snippets.json
Velocidade da sugestão	Pode levar um momento para analisar o contexto	Instantânea quando o prefixo é digitado
Confiabilidade	Inconsistente se o contexto mudar	Sempre ativa no prefixo exato

Agora você pode configurar o GitHub Copilot para usar seus snippets personalizados do VS Code mantendo o arquivo de snippet aberto, incorporando padrões em arquivos utilitários ou ajustando a indexação do workspace. Comece abrindo seu arquivo de snippet existente em uma aba enquanto programa. Para mais controle, crie um arquivo utilitário com seus padrões mais usados. Se o Copilot ainda não sugerir seus snippets, use o sistema de snippets interno do VS Code como alternativa, pois ele é acionado por prefixos exatos todas as vezes.