Como Usar o GitHub Copilot com Phoenix LiveView em Projetos Elixir

O GitHub Copilot pode acelerar seu desenvolvimento com Phoenix LiveView ao sugerir código Elixir em tempo real. Muitos desenvolvedores acham difícil fazer o Copilot produzir código LiveView idiomático em vez de padrões genéricos de frameworks web. Este artigo explica como configurar o Copilot para projetos Elixir e Phoenix e como escrever prompts que geram callbacks LiveView corretos, manipuladores de eventos e templates HEEx. Você aprenderá as configurações exatas e estruturas de comentários que melhoram a qualidade das sugestões.

Como o GitHub Copilot Entende Elixir e Phoenix LiveView

O GitHub Copilot é uma ferramenta de conclusão de código que usa um modelo de linguagem grande treinado em repositórios de código públicos. Ele não tem consciência embutida do Phoenix LiveView como um framework separado. Em vez disso, ele depende de três sinais: a extensão do arquivo, o código existente do projeto e o comentário ou código imediatamente acima do cursor. Quando você abre um arquivo com extensão .ex e o arquivo contém uma declaração use Phoenix.LiveView, o Copilot infere o padrão e começa a sugerir callbacks específicos do LiveView como mount/3, render/1, handle_event/3 e handle_info/2. A qualidade dessas sugestões depende muito do contexto ao redor.

Antes de usar o Copilot de forma eficaz, você precisa dos seguintes pré-requisitos:

• Visual Studio Code com a extensão GitHub Copilot instalada e conectada
• Extensão ElixirLS para VS Code para fornecer realce de sintaxe e suporte ao servidor de linguagem
• Um projeto Phoenix com LiveView já configurado (Phoenix 1.7 ou posterior recomendado)
• Assinatura do GitHub Copilot (Individual, Business ou Enterprise)

Configurar o VS Code para Copilot com Elixir e Phoenix

O Copilot funciona melhor quando vê sinais consistentes de linguagem e framework. Siga estes passos para configurar o VS Code para desenvolvimento com Elixir e Phoenix LiveView.

1. Abra seu projeto no VS Code
   Certifique-se de estar dentro da pasta raiz do seu projeto Phoenix. O Copilot usa o workspace aberto para coletar contexto de todos os arquivos visíveis.
2. Crie ou edite .vscode/settings.json
   Adicione estas configurações para restringir as sugestões do Copilot a arquivos Elixir e HEEx e habilitar o autocompletar do ElixirLS:
   {"elixirLS.suggestSpecs": false, "github.copilot.enable": {"": false, "elixir": true, "heex": true}}
   Isso impede que o Copilot sugira código em arquivos não-Elixir como JavaScript ou CSS, onde pode produzir conclusões irrelevantes.
3. Instale e habilite o ElixirLS
   Abra a visualização de Extensões, procure por ElixirLS e instale. Reinicie o VS Code. O ElixirLS fornece o servidor de linguagem que o Copilot usa para entender a sintaxe e os tipos do Elixir.
4. Abra um arquivo de módulo LiveView
   Navegue até lib/your_app_web/live/ e abra qualquer arquivo LiveView existente. O Copilot ativa automaticamente quando você começa a digitar em um arquivo .ex ou .heex.

Escreva Código LiveView com Sugestões do Copilot

Depois que seu ambiente estiver configurado, você pode começar a escrever código LiveView. O Copilot produz melhores sugestões quando você escreve comentários explícitos que descrevem a função que deseja implementar.

Gerar um Callback mount/3 do LiveView

1. Digite a definição do módulo e a declaração use
   Comece com defmodule MyAppWeb.MyLive do e use Phoenix.LiveView. O Copilot reconhece esse padrão e se prepara para sugerir callbacks do LiveView.
2. Escreva um comentário descrevendo a função mount
   Digite # Atribuir usuário atual e carregar dados iniciais em uma nova linha. Em seguida, pressione Enter. O Copilot sugere a função mount/3 completa com assigns.
3. Aceite a sugestão com Tab
   Revise o código gerado. Ele deve incluir socket = assign(socket, :user, user) e uma tupla {:ok, socket}. Edite os assigns para corresponder ao seu schema.

Gerar uma Cláusula handle_event/3

1. Escreva um comentário com o nome do evento e a ação
   Digite # handle "save" event: validar params e atualizar usuário. O Copilot usa o nome do evento para sugerir a assinatura correta da função.
2. Pressione Enter após o comentário
   O Copilot propõe uma cláusula handle_event/3 com um pattern match em “save”. Ele frequentemente inclui uma validação de changeset e uma declaração case.
3. Percorra alternativas com Ctrl+Enter
   Se a primeira sugestão não corresponder ao seu schema de banco de dados, pressione Ctrl+Enter para ver até 10 implementações alternativas. Escolha a que usa seu módulo de schema Ecto.

Gerar Templates HEEx Inline

1. Abra um arquivo .heex ou incorpore HEEx em render/1
   No seu módulo LiveView, escreva uma função render/1 que retorna uma string ~HEEx. O Copilot sugere tags e expressões HEEx dentro do sigil.
2. Digite um comentário dentro do bloco HEEx
   Escreva <%# Listar usuários com botão editar %> dentro do bloco HEEx. O Copilot gera um <div> com uma compreensão :for e um botão.
3. Use atributos phx-click e phx-value
   O Copilot frequentemente sugere atributos específicos do Phoenix como phx-click="edit" e phx-value-id={user.id} quando você digita phx-. Aceite-os para reduzir a digitação manual.

Problemas Comuns ao Usar Copilot com Phoenix LiveView

Copilot Sugere Código Elixir Genérico em Vez de Callbacks LiveView

Isso acontece quando o arquivo não contém uma declaração use Phoenix.LiveView ou quando o comentário é muito vago. Adicione use Phoenix.LiveView no topo do módulo e escreva um comentário que inclua a palavra “LiveView” ou o nome do callback. Por exemplo, # callback mount do LiveView produz melhores resultados do que # setup.

Copilot Gera Sintaxe Desatualizada do Phoenix 1.6

Os dados de treinamento do Copilot incluem versões mais antigas do Phoenix. Se você vir socket.assigns em vez de socket.assigns ou ~L""" em vez de ~HEEx""", edite a sugestão manualmente. Você também pode adicionar um comentário como # Phoenix 1.7 LiveView para direcionar o Copilot para padrões mais novos.

Copilot Não Sugere HEEx Dentro de render/1

O Copilot às vezes para de sugerir código dentro do sigil ~HEEx porque trata a string inteira como literal. Para corrigir isso, divida o bloco HEEx em partes menores. Escreva a abertura ~HEEx""" em uma linha, depois um comentário, e depois o fechamento """. O Copilot sugerirá conteúdo entre os delimitadores.

Conclusões do Copilot vs Código LiveView Manual: Quando Usar Cada Um

Item	Conclusões do Copilot	Código Manual
Geração de callbacks	Rápido para mount, handle_event, handle_info padrão	Necessário para callbacks personalizados como handle_params com assigns não padrão
Templates HEEx	Bom para listas simples, formulários e botões	Melhor para componentes aninhados complexos ou renderização condicional com múltiplos assigns
Consultas Ecto	Útil para Repo.get e Repo.all básicos com cláusulas where	Requerido para joins complexos, subconsultas ou SQL bruto
Tratamento de erros	Frequentemente omite tuplas de erro ou cláusulas de fallback	Necessário para padrões {:error, socket} de nível de produção

Melhore as Sugestões do Copilot para Código LiveView

Você pode treinar o Copilot para produzir melhores sugestões LiveView mantendo um estilo de codificação consistente em todo o projeto. Use os mesmos nomes de variáveis, chaves de assigns e ordem de callbacks em cada módulo LiveView. O Copilot aprende com os arquivos abertos e espelhará os padrões que vê. Por exemplo, se você sempre escreve mount/3 antes de render/1, o Copilot sugerirá mount primeiro. Se você usar @impl true antes de cada callback, o Copilot começará a incluir esse atributo em suas sugestões.

Outra técnica eficaz é abrir vários arquivos LiveView na mesma janela do VS Code. O Copilot usa todas as abas abertas como contexto. Se você tiver um módulo LiveView funcional aberto ao lado do que está editando, o Copilot pode copiar a estrutura de assigns e os nomes de eventos do módulo funcional.

O GitHub Copilot agora pode gerar callbacks Phoenix LiveView precisos, manipuladores de eventos e templates HEEx quando você configura o VS Code corretamente e escreve comentários descritivos. Comece adicionando a configuração .vscode/settings.json e escrevendo comentários que incluam o nome do callback e a ação. Para uso avançado, mantenha vários módulos LiveView abertos para dar mais contexto ao Copilot. Um próximo passo útil é experimentar o Copilot em um formulário LiveView com eventos phx-change e phx-submit para ver como ele lida com padrões de eventos do cliente e do servidor.