GitHub Copilot no WebStorm: a melhor configuração para turbinar seu dia a dia

O WebStorm é o meu IDE preferido para trabalhar com JavaScript e TypeScript, e o GitHub Copilot virou parte essencial do meu fluxo. Só que instalar o plugin e sair usando no automático deixa muita coisa boa na mesa. Nesse guia eu vou te mostrar a configuração que eu uso, com os atalhos que mais economizam tempo e as opções que fazem o Copilot parar de atrapalhar o autocomplete nativo do WebStorm.

Antes de começar: requisitos

Pra seguir esse tutorial, você vai precisar de:

• WebStorm 2024.3.6 ou superior (recomendo a 2026.1, que trouxe o motor TypeScript turbinado)
• Conta no GitHub com uma licença ativa do Copilot (Individual, Business ou Enterprise)
• Conexão com a internet (o Copilot roda na nuvem)
• Java 17+ embutido no próprio WebStorm (já vem por padrão)

Se você ainda está numa versão antiga, atualize antes de continuar. Versões abaixo da 2024.3.6 têm um conflito conhecido entre o Copilot e o Full Line Code Completion nativo, e o Tab fica brigando entre os dois.

Passo 1: instalar o plugin oficial

1. Abra o WebStorm
2. Vá em Settings (Cmd + , no Mac / Ctrl + Alt + S no Windows/Linux)
3. Navegue até Plugins
4. Clique na aba Marketplace
5. Digite GitHub Copilot na busca
6. Clique em Install no plugin oficial da GitHub
7. Reinicie o WebStorm quando for pedido

Em algumas versões o plugin GitHub Copilot Chat vem separado. Se for o caso, instale ele também: é quem entrega a janela de chat, o inline chat e o Agent Mode, que são as partes mais poderosas do Copilot hoje.

Passo 2: fazer login com sua conta do GitHub

Depois que o WebStorm reinicia, você vai ver o ícone do Copilot na barra inferior.

1. Clique no ícone do Copilot no canto inferior direito
2. Escolha Login to GitHub
3. Uma janela vai mostrar um device code: copie
4. O WebStorm abre o navegador em github.com/login/device
5. Cole o device code e autorize o acesso
6. Volte pro WebStorm e aguarde a confirmação

Quando o ícone ficar verde, o Copilot está ativo.

Passo 3: resolver o conflito com o Full Line Code Completion

Esse é o passo que mais faz diferença e quase ninguém conta. O WebStorm tem um autocomplete de linha inteira nativo, local, que compete com o Copilot pelo mesmo atalho (Tab). Se você deixar os dois ligados sem ajustar, o Tab ora aceita um, ora aceita outro, e você perde a confiança no fluxo.

Você tem duas opções boas.

Opção A (minha preferida): desativar o Full Line Code Completion

1. Settings > Editor > General > Inline Completion
2. Desmarque Enable local full line completion suggestions
3. Aplique e feche

Assim o Tab sempre aceita a sugestão do Copilot, sem dúvida.

Opção B: manter os dois, mas separar as teclas

Se você gosta do Full Line porque ele é instantâneo offline, dá pra manter os dois:

1. Settings > Keymap
2. Procure Insert Inline Completion (é o do WebStorm nativo)
3. Remapeie pra um atalho que não conflite, tipo Cmd + Shift + ] (Mac) / Ctrl + Shift + ] (Windows/Linux)
4. Deixe o Apply completions to Editor (Copilot) no Tab

Passo 4: configuração fina do plugin

Vá em Settings > Tools > GitHub Copilot > Completions e ajuste:

Mais abaixo, na seção Languages, você pode ativar/desativar por linguagem. A minha recomendação é:

• Ativo: JavaScript, TypeScript, JSX, TSX, Vue, Astro, HTML, CSS, SCSS, JSON, Markdown, YAML, Shell
• Desativado: arquivos de lockfile (package-lock.json, yarn.lock, pnpm-lock.yaml): o Copilot só atrapalha aqui

Se preferir mexer direto no arquivo github-copilot.xml, dá pra usar wildcards. Mas a interface gráfica resolve pra 99% dos casos.

Passo 5: ativar o Copilot Chat e o Agent Mode

O chat é onde mora metade da produtividade. Abra ele com Ctrl + Shift + C ou pela barra lateral direita (ícone do Copilot).

Dentro da janela de chat você vai ver três modos:

• Ask: tira dúvidas e explica código (bom pra entender legado)
• Edit: faz alterações pontuais em arquivos que você indica
• Agent: o Copilot decide quais arquivos mexer e executa tarefas inteiras

Para habilitar o Agent Mode:

1. Settings > Tools > GitHub Copilot > Chat
2. Marque Enable Agent Mode
3. Marque Enable Agent Skills (ainda em preview, mas já vale a pena)
4. Escolha o modelo padrão (Claude Sonnet e GPT são ótimos para front-end)

Passo 6: custom instructions, o segredo pra o Copilot parar de alucinar

Custom instructions são um arquivo que o Copilot lê antes de cada resposta. Você escreve ali as regras do seu projeto, as bibliotecas que usa, os padrões de código, e o Copilot passa a seguir de verdade.

Configurando no projeto

1. Na raiz do projeto, crie a pasta .github/ (se não existir)
2. Dentro dela, crie o arquivo copilot-instructions.md
3. Coloque as regras do seu projeto, por exemplo:

# Instruções para o Copilot

Esse projeto é um site em Hugo com posts em português, inglês e espanhol.

## Stack
- Hugo (static site generator)
- SCSS com Dart Sass
- JavaScript vanilla (sem frameworks)
- Imagens otimizadas em WebP

## Padrões de código
- Indentação com 2 espaços
- Strings em aspas simples no JS
- Nomes de arquivos em kebab-case

O Copilot vai ler isso toda vez que você abrir o chat ou pedir uma sugestão pelo Agent Mode.

Configurando globalmente

Se quiser instruções que valem para todos os projetos:

1. Settings > Tools > GitHub Copilot > Customizations
2. Na seção Global Custom Instructions, cole suas regras
3. Aplique

AGENTS.md e CLAUDE.md

A partir da versão 2026.2 o Copilot passou a ler também AGENTS.md e CLAUDE.md aninhados no projeto. Se você já usa Claude Code ou Cursor, aproveite o mesmo arquivo. Habilite em Settings > Tools > GitHub Copilot > Customizations > Enable nested AGENTS.md and CLAUDE.md.

Atalhos essenciais (os que eu uso todo dia)

Sugestões inline

Importante pra quem usa teclado ABNT2: o padrão oficial do Copilot é Option + ], Option + [ e Option + \, mas no teclado brasileiro essas combinações geram caracteres tipográficos («, », entre outros) e nunca chegam no Copilot. A solução é adicionar Shift na combinação (vira Shift + Option + ...), que é o que deixei na tabela acima. Se você usar teclado US, pode usar o padrão sem o Shift.

Inline chat (o mais poderoso)

O inline chat é o que substitui 90% do Copy/Paste pra ChatGPT. Você seleciona um bloco de código, aperta Ctrl + Shift + I, digita “transforma isso em TypeScript strict” e pronto.

Chat completo

Atalhos customizados que eu configurei

Vale muito a pena entrar em Settings > Keymap e procurar por copilot. O plugin só expõe meia dúzia de ações bindáveis (copilot.chat.show, copilot.chat.inline, copilot.openCopilot, copilot.applyInlays, copilot.cycleNextInlays, copilot.cyclePrevInlays e copilot.requestCompletions), mas elas cobrem 100% do que dá pra acelerar de verdade. Os outros comandos (explain, fix, tests, doc) são slash commands que você digita dentro do chat, não teclas de atalho.

O que eu deixo no meu keymap:

Se algum atalho já estiver em uso, o WebStorm avisa e você escolhe remover ou manter o atalho antigo. O Cmd + Shift + K por padrão abre o Push… do Git: eu não uso o Push pelo atalho então liberei essa tecla pro Copilot, mas se você usa, escolha outra.

Depois que o chat está aberto, os slash commands resolvem o resto:

• /explain explica o código selecionado
• /fix tenta corrigir erros apontados pelo TS ou ESLint
• /tests gera testes unitários
• /doc gera documentação JSDoc
• /simplify propõe uma versão mais curta

Truques que multiplicam produtividade

Comentários viram prompts

Escreva um comentário claro acima da função e o Copilot gera a implementação. Por exemplo:

// Retorna a lista de posts publicados nos últimos 30 dias,
// ordenados por data decrescente, com no máximo 10 itens.
// Usa a API interna em services/posts.ts
function recentPosts(): Promise<Post[]> {
  // o Copilot preenche daqui pra baixo
}

Quanto mais específico o comentário (incluindo o caminho de arquivos relevantes), melhor o resultado.

Use # pra referenciar arquivos no chat

Dentro do chat, digite #package.json ou #services/posts.ts e o Copilot carrega o arquivo no contexto. Evita descrição manual de estrutura.

Agent Mode pra refactors grandes

Quando você precisa renomear uma função em 20 arquivos, mudar a assinatura de um hook ou migrar de uma lib pra outra, abra o chat em Agent Mode, descreva o objetivo e deixa ele propor as alterações. Você revisa arquivo por arquivo antes de aceitar.

Inline chat pra code review de si mesma

Antes de abrir PR, seleciona o diff de um método, aperta Ctrl + Shift + I e pede “revisa esse código procurando edge cases e testes faltando”. Pega muita coisa boba antes de ir pro GitHub.

Slash commands dentro do chat

Dentro do inline chat ou do chat normal, digite:

• /tests: gera testes unitários pro código selecionado
• /doc: gera documentação JSDoc
• /fix: tenta corrigir erros apontados pelo TS ou ESLint
• /explain: explica o código selecionado
• /simplify: propõe versão mais curta

Ajustes finos por tipo de projeto

React / Next.js

• Ative o plugin oficial do Copilot Chat pra pegar sugestões específicas de hooks
• No copilot-instructions.md, especifique se você usa App Router ou Pages Router
• Avise se usa Server Components (muda muito a sugestão)

Vue / Nuxt

• O WebStorm 2026.1 integra o @vue/typescript-plugin atualizado
• Se estiver em Nuxt, mencione no custom instructions qual versão
• Desative o Copilot dentro de <style> puros se achar que ele alucina CSS demais

Astro

• Avise se é SSG ou SSR no custom instructions
• Ative o Copilot para arquivos .astro (geralmente precisa habilitar manualmente)

Problemas comuns e soluções

O Tab não aceita sugestão

Quase sempre é o Full Line Code Completion brigando. Volte no Passo 3 e aplique uma das duas opções.

O Copilot está lento

1. Verifique sua conexão (o plugin fala com a API da GitHub em cada keystroke)
2. Settings > Tools > GitHub Copilot > Completions, desmarque Show completions automatically e use Shift + Option + \ (Mac) / Shift + Alt + \ (Windows/Linux) sob demanda
3. Confirme que você não está com 30 abas abertas disputando o Language Server

O ícone do Copilot está vermelho

1. Clique nele pra ver o erro
2. Se for Not signed in, refaça o login
3. Se for Network error, verifique proxy/VPN. Em Settings > Appearance & Behavior > System Settings > HTTP Proxy, confira a configuração
4. Se for Quota exceeded, você esbarrou no limite mensal do plano Free ou Individual

O Copilot sugere código antigo

Atualize o plugin e reinicie. As versões mais novas trocaram o modelo padrão e a qualidade subiu bastante.

O chat não abre

Pode ser que o plugin GitHub Copilot Chat não esteja instalado. Volte no Passo 1 e instale o chat separadamente.

Checklist final

Depois de seguir o tutorial, confira se:

• Plugin GitHub Copilot instalado e atualizado
• Plugin GitHub Copilot Chat instalado
• Logada com a conta correta do GitHub
• Full Line Code Completion desativado (ou remapeado)
• Copilot ativo pras linguagens do seu projeto
• Agent Mode habilitado nas Settings
• Arquivo .github/copilot-instructions.md criado
• Atalhos customizados configurados no Keymap
• Ícone verde na barra inferior

Com isso fechado, você tem o WebStorm rodando o Copilot do jeito mais produtivo possível. O próximo passo é só praticar. Em uma semana você vai estar escrevendo comentários que geram funções inteiras e usando o inline chat pra refatorar sem sair do teclado.

E se você também escreve Go, deu uma olhada no meu outro guia? GitHub Copilot no GoLand: a melhor configuração para escrever Go mais rápido.