Desenvolvedores frontend e backend usam linguagens, frameworks e ferramentas de depuração diferentes. Alternar entre esses ambientes no Visual Studio Code geralmente exige mudar manualmente extensões, configurações e atalhos de teclado. O GitHub Copilot pode se adaptar a cada contexto, mas apenas se o VS Code souber em qual contexto você está. Este artigo explica como usar Perfis do VS Code para separar as configurações de frontend e backend. Você aprenderá a atribuir um perfil dedicado do Copilot a cada workspace, para que as sugestões de código correspondam à linguagem e ao framework que você está usando.
Principais Conclusões: Perfis de Workspace do GitHub Copilot para Frontend vs Backend
- VS Code Profiles > Create Profile: Isola extensões, configurações e atalhos de teclado para trabalho frontend ou backend, fazendo com que o Copilot use o contexto de linguagem correto.
- Copilot > Configurações por Perfil: Desabilite ou habilite o Copilot em perfis específicos para evitar sugestões irrelevantes ao alternar entre projetos React e Node.js.
- Atribuição de perfil específico ao workspace: Vincule um perfil a uma pasta ou workspace para que o Copilot ative automaticamente a configuração correta ao abrir o projeto.
Por que o Copilot Precisa de Perfis Separados para Frontend e Backend
O GitHub Copilot gera código com base no arquivo que você está editando e no contexto ao redor no mesmo workspace. Quando você trabalha em um projeto frontend construído com React, TypeScript e CSS, o Copilot vê sintaxe semelhante a HTML, JSX e regras de estilo. Em um projeto backend usando Node.js, Python ou Go, a sintaxe e as bibliotecas são completamente diferentes. Se o Copilot foi treinado com sinais mistos de um único perfil do VS Code, ele pode sugerir padrões frontend dentro de um arquivo backend ou vice-versa.
Os Perfis do VS Code resolvem isso permitindo criar ambientes separados. Cada perfil tem seu próprio conjunto de extensões, configurações e atalhos de teclado. Quando você abre um projeto frontend, alterna para o perfil frontend. O Copilot então vê apenas as extensões e configurações relevantes para aquele perfil. As sugestões se tornam mais precisas porque o modelo recebe um sinal de contexto mais limpo.
O que um Perfil Realmente Armazena
Um perfil do VS Code armazena os seguintes elementos de forma independente:
- Extensões — quais extensões estão habilitadas ou desabilitadas
- Configurações — todas as configurações de usuário e workspace em settings.json
- Atalhos de teclado — atalhos de teclado
- Estado da Interface — layout, visibilidade da barra lateral e posições dos painéis
O próprio Copilot é uma extensão. Quando você o desabilita em um perfil e o habilita em outro, o Copilot não carrega no perfil desabilitado. Isso evita sugestões acidentais quando você está editando um tipo de arquivo que não deseja que o Copilot influencie.
Passos para Configurar Perfis Frontend e Backend para o Copilot
- Abra o menu de Perfis
No VS Code, clique no ícone de engrenagem no canto inferior esquerdo. Selecione Perfis no menu. Alternativamente, pressione Ctrl+Shift+P e digite Perfis: Criar Perfil. - Crie um perfil frontend
Clique em Criar Perfil. Nomeie como Frontend. Na caixa de diálogo, escolha quais configurações, extensões e atalhos de teclado copiar do seu perfil atual. Para um início limpo, selecione Perfil Vazio. O VS Code cria um novo perfil sem extensões e com configurações padrão. - Adicione extensões para trabalho frontend
Abra a visualização de Extensões. Instale ou habilite apenas as extensões necessárias para desenvolvimento frontend: ESLint, Prettier, HTML CSS Support, JavaScript and TypeScript Nightly e GitHub Copilot. Certifique-se de que o Copilot esteja habilitado neste perfil. - Configure as configurações do Copilot para frontend
Abra Configurações com Ctrl+,. Pesquise por copilot. Defina Copilot: Enable como true. Opcionalmente, defina Copilot: Inline Suggest como true para conclusões em tempo real. Para trabalho frontend, você também pode habilitar Copilot: Enable For Languages e adicionar typescript, javascript, css, html e scss. - Crie um perfil backend
Repita os passos 1 e 2. Nomeie o novo perfil como Backend. A partir da opção Perfil Vazio, adicione as extensões necessárias para trabalho backend: Python, C#, Go ou Java Extension Pack, REST Client e GitHub Copilot. Desabilite quaisquer extensões específicas de frontend, como HTML CSS Support. - Configure as configurações do Copilot para backend
Abra Configurações para o perfil Backend. Defina Copilot: Enable como true. Em Copilot: Enable For Languages, adicione apenas os idiomas que você usa no backend: python, go, csharp, java ou rust. Não inclua javascript ou css. Isso impede que o Copilot sugira código frontend quando você estiver editando arquivos backend. - Atribua perfis a workspaces
Abra uma pasta de projeto frontend. Clique no ícone de engrenagem, selecione Perfis e escolha Frontend. O VS Code lembra dessa atribuição. Na próxima vez que você abrir essa pasta, o perfil Frontend será ativado automaticamente. Repita para sua pasta de projeto backend usando o perfil Backend.
Problemas Comuns ao Usar Perfis com o Copilot
Copilot Sugere Código Frontend em um Arquivo Backend
Isso acontece quando o perfil Backend ainda tem linguagens frontend habilitadas na configuração Copilot: Enable For Languages. Abra as configurações do perfil Backend, pesquise por copilot.enableForLanguages e remova javascript, typescript, css e html. Reinicie o VS Code para aplicar a alteração.
Extensões Instaladas em um Perfil Aparecem em Outro
As extensões são específicas do perfil por padrão. Se você vir extensões frontend no perfil Backend, pode ter criado o perfil copiando do Frontend. Exclua o perfil Backend e crie-o novamente usando Perfil Vazio. Em seguida, instale apenas extensões backend.
Copilot Não Ativa no Perfil Correto
Verifique o indicador de perfil no canto inferior esquerdo do VS Code. Ele mostra o nome do perfil ativo. Se mostrar o perfil errado, clique no nome e alterne manualmente. Em seguida, salve a associação do workspace clicando novamente no nome do perfil e selecionando o perfil correto na lista. O VS Code armazena a associação na pasta de armazenamento do workspace.
Configurações do Perfil Resetam Após uma Atualização
Às vezes, as atualizações do VS Code redefinem as configurações do perfil para os padrões. Para evitar isso, exporte seus perfis como arquivos JSON. Abra o menu Perfis, clique no ícone de engrenagem ao lado de um perfil e selecione Exportar. Salve o arquivo JSON. Após uma atualização, importe-o usando a opção Importar Perfil.
| Item | Perfil Frontend | Perfil Backend |
|---|---|---|
| Linguagens principais | JavaScript, TypeScript, CSS, HTML | Python, Go, C#, Java, Rust |
| Copilot habilitado | Sim | Sim |
| Linguagens do Copilot | javascript, typescript, css, html, scss | python, go, csharp, java, rust |
| Extensões principais | ESLint, Prettier, HTML CSS Support | Python, C#, REST Client, Go |
| Método de criação do perfil | Perfil Vazio | Perfil Vazio |
| Atribuição de workspace | Pasta do projeto frontend | Pasta do projeto backend |
Agora você pode alternar entre projetos frontend e backend sem precisar ativar ou desativar extensões ou configurações manualmente. O Copilot vê apenas as linguagens e ferramentas relevantes para o perfil ativo. Isso reduz sugestões irrelevantes e acelera seu fluxo de trabalho. Como próximo passo, tente criar um terceiro perfil para trabalho de DevOps ou ciência de dados com o Copilot configurado para YAML, SQL e shell script. Você também pode exportar todos os perfis para um compartilhamento de equipe, para que todos os desenvolvedores do seu projeto comecem com a mesma configuração.