Entenda seu código com a ajuda do GitHub Copilot
Tags: braziliandevs, githubbrazil, tutorial, ai
Published: 2023-03-16 19:05:59


Oi pessoal, tudo bem?

  

Não sei vocês, mas se eu ficar muito tempo sem olhar pra um código, mesmo que seja meu, esqueço tudo que estava acontecendo ali e preciso de um tempinho pra voltar ao meu ritmo normal de programação.

  

Seria tão bom ter alguém pra me explicar o que o código faz…

E foi pensando nisso que eu escrevi o artigo de hoje.

  

Nesse artigo vamos aprender a usar o GitHub Copilot para entender nosso código (ou o código de coleguinhas). Essa ferramenta pode nos explicar o código passo-a-passo, e nos dizer o que o código faz, de maneira resumida ou detalhada. Vale informar que no momento isso tudo é em inglês.

  

Se você não sabe o que é o GitHub Copilot, [dê uma lida nesse artigo aqui](https://dev.to/github/github-co-pilot-pair-programming-com-inteligencia-artificial-1m43).

  

> O artigo de hoje foi inspirado nesse aqui: [Understand your code using GitHub Copilot](https://dev.to/github/understand-your-code-using-github-copilot-5375),  da minha colega de trabalho [Mish Manners](https://dev.to/mishmanners).

  
  

## Como começamos?

Primeiramente, você tem que ter acesso ao GitHub Copilot. Você consegue acesso gratuito pelo [GitHub Student Pack](https://www.youtube.com/watch?v=NHX4MQTgIK4), se for estudante, ou pode ter acesso por 60 dias usando o teste gratuito.

  

Confirmou que tem acesso ao Copilot? Que bom, agora vamos instalar o [GitHub Copilot Labs](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-labs), que é uma ferramenta que nos deixa usar features experimentais para o Copilot.

Dentro do VSCode, o Copilot Labs vai pedir acesso a sua conta GitHub, clique em permitir e reinicialize seu VSCode:
![pop-up pedindo atorização para que o Github Copilot Labs faça login na conta github](https://lh3.googleusercontent.com/wYJRhz3mKKTsVFqpHfszaFrVzKCA1S42hJ4FteCMa-92Qeow6oKh50vzL3Wl-38f8r7t4jL2xESyGdvwLvinkaMDejZclIb3BRoK_yc-RCCtB-mVM_FSbeWkfmAM0MQ9e7gOMUeBqs_em3q_t82IIuI)

*Pode ser que a notificação não apareça como pop-up, se isso acontecer, clique no ícone de Contas, no canto inferior esquerdo, e o pop-up pedindo permissão deve aparecer.*

  
  

**Hoje**, em março de 2023, após reinicializar meu VSCode, recebi essa mensagem:

“Para usar GitHub Copilot Labs, você tem que aceitar os termos de licença Pré-Release do GitHub, [se inscreva por esse link](https://githubnext.com/projects/copilot-labs/)”, mas dependendo de quando você estiver lendo esse artigo, pode ser que esse passo já não seja mais necessário.

Nesse link você vai se inscrever usando sua conta GitHub, e depois pode voltar pro seu VSCode.

![notificação pedingo que você logue no Github copilot labs](https://lh3.googleusercontent.com/i0PZe7odY82_HDtvWge7nqBgp4FVkhtL6NQCeGwF8opirNFt10keTUJp3U0wJ5UPBPI3dXL7T5NgbvsOA6BOYjF0TT6KFWH8rlQ2dsrH4o69ZSGYgHfv5giHlZQQwLL_qxir0lpbF_vM7sVBNcfc5HE)

  
  

## Copilot Labs

Agora que os preparativos estão prontos, abra o código que você quer que seja explicado.

Se tudo deu certo com os preparativos, o ícone do Copilot Labs vai aparecer na sua barra esquerda no VSCode, vamos clicar nele:

![visual studio code com o github copilot labs instalado](https://lh4.googleusercontent.com/168NqZHzkYpg5_bm3jxwIDgbiOegC2u_lSpyP0mf2krca8uRbpUEhr4LUNi4b1wO6wA3dRLP7jyG18zPxM1AI2xAL8dkNEgZn885-BjTCMxwxqRT5YlimA5gZcRUKFbkMvsvThE9lqkYYPlL247Yn0w)

Na barra de tarefas do GitHub Copilot Labs você encontra tudo que precisa para explicar e traduzir o seu código.

  

## Entendendo o código

Com a barra de tarefas do Copilot Labs aberta, selecione o código que você quer que seja explicado.

Você pode escolher entre as seguintes opções: Explique o código, Código faz o seguinte, Código faz o seguinte (Em inglês). *Também temos as opções Customizado e Mostrar exemplo de código, mas não vamos falar delas hoje.*

  

![opções do explain code](https://lh6.googleusercontent.com/4oKOLz1zQ1Jy2H2PhK43l-TznlqJsYYf50oWyu3SWNG4aVoJ-huxwux0h8_72v-YwHeXsKb_lGtz3R8VVvqEzRu73UrK3-CEfJaP_qmJ--fPJn-tTX271LU4gw0ArY3aDWRUnF_E29C7tih_GDzNkgE)

Como mencionado lá no comecinho, as respostas são em inglês, então eu vou postar a imagem com o resultado em inglês, mas escrever a resposta em português aqui também.

  

Para o exemplo de hoje, vou escolher um pedaço pequeno de código em javaScript:

  

`const lista = document.getElementById('lista');`

### Explique o código - Explain code

A primeira opção é o Explique o código.

Ela explica o passo a passo do que está acontecendo no código.

![resultado 1, texto abaixo](https://lh3.googleusercontent.com/y_KqqMilZ1IBbSa_ItdscgFZaHD1aAzU54NLk_OU7N1APIpIVd7tElO0VfmckCohARPu30pma5fqXGHH24mSGIkjsqbCkrOC89WdzFCCydT_LTwJc5hQ5ab4oPqLu6UzSnGmTzN8c4xGhFkNUCjnpEE)

RESULTADO

Aqui temos uma explicação do código acima:

1.  Pegamos o elemento pela id, que é a lista que nós queremos usar
    
2.  Criamos uma variável chamada “lista” que vai ser usada mais tarde.
    

  

### Código faz o seguinte - Code does following

Enquanto a opção de Explicar nos dá um passo a passo do código, essa aqui nos conta o que o código está fazendo. Lendo assim parece a mesma coisa né? Mas na prática a gente vê uma diferença.

![resultado 2, texto abaixo](https://lh3.googleusercontent.com/G0SOmNhci9x0oeU36mwD6uzMXcCo3x6RngRw_2QIdmL_mGaHksT_48QWR0THZttsUxZHDEblCyQ0X3r08ia3YKG9kVAScR3NBbp_ebhZFUXvN_hCqx-qyVP_CI4PY4uprUQxKvHi6dFkkHSFlIz8f8w)

RESULTADO

O código acima faz o seguinte:

1.  Pega um elemento com a id “lista”
    
2.  Atribui esse elemento a uma variável chamada “lista”
    

  

### Código faz seguinte (Inglês)

Não sei o porquê do inglês, talvez as outras opções aceitem outros idiomas e eu não descobri ainda.

Essa opção não tem muita diferença da anterior e pedaços de código pequeno, mas em pedaços maiores, apresenta um pouco mais de detalhe.![resultado 3, texto abaixo](https://lh5.googleusercontent.com/eq6iCWtQZiHOdxDOSHWdWDOXSTTK70EWSQAxBNSc-xwH-VD6Uieb7m5tpJzofe31Zjf7WeCQ4LyLxeIG0gOLxHZo4do98XTZBglGSl3ve5o-0v9VqRl3opaGm70EpKrg5UIxgGvLUklkl8sCjCRoEIw)

RESULTADO

O código acima faz o seguinte, explicado em Inglês:

1.  Pega um elemento com a ID ‘lista’
    
2.  Armazena o elemento na variável ‘lista’
    
3.  Está feito
    

  

## Feedback

Como eu mencionei lá pra cima, o GitHub Copilot Labs nos deixa usar ferramentas experimentais, então todo Feedback é bem vindo.

Depois de cada resultado, você tem a opção de enviar um Feedback sobre a resposta, clicando em um botão para dizer se a resposta foi Incorrect: Incorreta, Unhelpful: até estava correta, mas não te ajudou e nada ou Great: A resposta estava correta e foi boa!

  

![opções de feedback](https://lh5.googleusercontent.com/VYsQaCCR8FhyDqPVxIqyJ3xVcHgDZ89LVoYBImpcksS4hFoJ9c29M2SA0D_dDNJXlckX0_WsfIxJqYrlEk33C9rVyocfcc8yVvOUm0Nls81oGgwyQ5Uf-eYF7RddEJzM4K12iDYIRiHvMsCgRwqTwnE)

  
  

## Isso é tudo pessoal

Como de costume, eu escrevi esse artigo enquanto testava a ferramenta, então ele é básico e introdutório, mas eu achei muito legal e útil, principalmente pra quando você pega um código legado, entra em um projeto novo que já estava em andamento, e para Devs Sandy e Júnior em seus processos de aprendizagem. E de quebra a gente ainda pratica o inglês.

**E você, o que achou?**

### Obrigada por ler até final e sigam o GitHub Brasil das redes sociais para ficar por dentro de novidades <3

  

[GitHub Brasil Twitter](https://twitter.com/GitHubBrasil) 🐦

[GitHub Brasil no LinkedIn](https://www.linkedin.com/company/github-brazil/) 📝

[GitHub Brasil na Twitch](https://www.twitch.tv/githubbrasil) 🟣

[Meet-ups do GitHub em português](https://www.meetup.com/pt-BR/githubbrasil/)🗣️