Introdução ao GitHub Copilot no Visual Studio CodeReviltec

O GitHub Copilot é uma ferramenta de programação de par AI. Esta é uma maneira elegante de chamá-lo de “segundo programador” que funciona dentro do seu editor de código-fonte. O Copilot fornece sugestões de estilo de preenchimento automático enquanto você codifica, ajudando você a codificar com mais rapidez e eficiência.

Este artigo o guiará pelas etapas de instalação e configuração do GitHub Copilot no VS Code. Você aprenderá como usar o Copilot para acelerar o processo de codificação.

Requisitos

Para usar o GitHub Copilot, você precisa ter uma conta do GitHub. Se ainda não tiver uma, você pode registrar uma conta no site oficial.

Verifique se você está conectado à sua conta do GitHub antes de se inscrever no GitHub Copilot. O serviço vem com um teste gratuito de 30 dias, após o qual você deve se inscrever em um dos planos pagos.

Captura de tela da página de autorização do co-piloto do GitHub

Se você não tem intenção de assinar um plano pago, certifique-se de cancelar o GitHub Copilot antes do final da avaliação para evitar cobranças.

Por fim, você precisará ter o Visual Studio Code instalado em sua máquina local. Para instalar o Visual Studio Code, visite a página oficial de downloads do VS Code.

Instalando a extensão GitHub Copilot

Comece iniciando seu editor de código do Visual Studio. A seguir, clique no Extensões aba. Use a caixa de pesquisa para pesquisar GitHub copiloto. Instale e ative a extensão (tem mais de 5 milhões de downloads no momento em que escrevo isso):

Captura de tela da extensão GitHub Copilot VS Code

Uma vez totalmente ativo, um prompt aparecerá solicitando que você entre no GitHub. Clique no botão para entrar. O processo de autenticação será rápido porque você já está conectado ao GitHub e ao GitHub Copilot. Se o processo for bem-sucedido, você encontrará o ícone Copilot no canto inferior direito do VS Code.

Observe que o GitHub Copilot é um serviço pago (US$ 10/mês no momento da redação), mas há uma avaliação gratuita de 30 dias.

Faça perguntas técnicas ao copiloto

Embora o Copilot seja conhecido por ser um assistente de codificação, você pode fazer perguntas técnicas diretamente. Isso é perfeito se você estiver estudando para uma entrevista técnica e quiser obter rapidamente respostas para perguntas comuns em entrevistas.

Para fazer uma pergunta ao GitHub Copilot, coloque sua pergunta em um comentário precedido por :q:

1	// q: What is a class in object-oriented programming?

Ao visualizar uma sugestão do Copilot (na cor cinza), clique no botão aba tecla em seu teclado para aceitá-la como sua resposta. A resposta é precedida por :a. A tecla tab funciona em computadores Windows e Mac.

Você também pode perguntar especificamente sobre uma dessas respostas (ou seja, obter mais informações sobre a resposta). O Copilot descobrirá o que você está prestes a perguntar e preencherá automaticamente a pergunta para você.

Usando o Copilot com HTML e CSS

Agora vamos voltar nossa atenção para a codificação, começando com um exemplo de HTML. O Copilot ajudará a acelerar o processo de escrita de HTML. Vamos ver como.

Crie dois arquivos HTML em seu projeto. Os arquivos devem ser nomeados exemplo1.html e exemplo2.html. Em seguida, abra exemplo1.html arquivo no VS Code.

Comece digitando o declaração de tipo de documento. Ao clicar em Enter no teclado, o Copilot já sabe que o tag será a próxima tag óbvia a ser adicionada. Então ele sugere a tag (clique na aba para aceitá-la)

Dentro disso, o Copilot sugere que você adicione o então </code>. Ele fecha o <code><head></code>e com certeza, <code><body></code> é sugerido juntamente com um <code></p> <h1></code> tag e parágrafo. </p> <p>Se você deseja gerar um elemento, simplesmente descreva o elemento que deseja gerar em um comentário e pressione <strong>Aba</strong>. Aqui está um exemplo:</p> <div class="rouge-syntax-highlight"> <table class="rouge-line-table html"> <tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>1</pre> </td> <td class="rouge-code"> <pre><span style="color: #505050"></span> </pre> </td> </tr> </tbody> </table> </div> <p>Isso vai gerar um <code></p> <h1></code> elemento com texto azul:</p> <div class="rouge-syntax-highlight"> <table class="rouge-line-table html"> <tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>1</pre> </td> <td class="rouge-code"> <pre><span style="color: #f4bf75"><h1</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"color:blue"</span><span style="color: #f4bf75">></span>This is a blue heading<span style="color: #f4bf75"></h1></span> </pre> </td> </tr> </tbody> </table> </div> <p>Você também pode solicitar uma lista com marcadores com o seguinte prompt:</p> <div class="rouge-syntax-highlight"> <table class="rouge-line-table html"> <tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>1</pre> </td> <td class="rouge-code"> <pre><span style="color: #505050"></span> </pre> </td> </tr> </tbody> </table> </div> <p>Aqui está o resultado:</p> <div class="rouge-syntax-highlight"> <table class="rouge-line-table html"> <tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>1</pre> </td> <td class="rouge-code"> <pre><span style="color: #f4bf75"><ul></span> </pre> </td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>2</pre> </td> <td class="rouge-code"> <pre> <span style="color: #f4bf75"><li></span>First item<span style="color: #f4bf75"></li></span> </pre> </td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>3</pre> </td> <td class="rouge-code"> <pre> <span style="color: #f4bf75"><li></span>Second item<span style="color: #f4bf75"></li></span> </pre> </td> </tr> <tr id="line-4" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>4</pre> </td> <td class="rouge-code"> <pre> <span style="color: #f4bf75"><li></span>Third item<span style="color: #f4bf75"></li></span> </pre> </td> </tr> <tr id="line-5" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>5</pre> </td> <td class="rouge-code"> <pre><span style="color: #f4bf75"></ul></span> </pre> </td> </tr> </tbody> </table> </div> <p>De acordo com as práticas recomendadas, os estilos sempre devem estar em uma folha de estilo separada. Criar uma <strong>estilos.css</strong> arquivo na mesma pasta que os arquivos HTML.</p> <p>O prompt a seguir gerará o elemento link que faz referência à folha de estilo. Escreva o prompt dentro do <code><head></code> marcas em HTML:</p> <div class="rouge-syntax-highlight"> <table class="rouge-line-table html"> <tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>1</pre> </td> <td class="rouge-code"> <pre><span style="color: #505050"></span> </pre> </td> </tr> </tbody> </table> </div> <p>Esta seria a saída:</p> <div class="rouge-syntax-highlight"> <table class="rouge-line-table html"> <tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>1</pre> </td> <td class="rouge-code"> <pre><span style="color: #f4bf75"><link</span> <span style="color: #6a9fb5">rel=</span><span style="color: #90a959">"stylesheet"</span> <span style="color: #6a9fb5">type=</span><span style="color: #90a959">"text/css"</span> <span style="color: #6a9fb5">href=</span><span style="color: #90a959">"style.css"</span><span style="color: #f4bf75">></span> </pre> </td> </tr> </tbody> </table> </div> <p>Se o arquivo de folha de estilo estiver dentro de outra pasta, apenas descreva a estrutura do diretório em seu prompt e o Copilot usará o URL correto no <code>href</code>.</p> <h2 id="toc-sybi-copilot-facilitating-bootstrap">Copiloto Facilitando o Bootstrap</h2> <p>Com um simples prompt “Adicionar Bootstrap”, o Copilot gerará um link que faz referência ao Bootstrap no CDN. Isso é melhor do que ter que pesquisar na web procurando o link atualizado para o Bootstrap.</p> <p>O Copilot também aplicará as classes Bootstrap em seus elementos. Quando você inicia um <code></p> <div></code> elemento e pressione a barra de espaço, o Copilot sabe que você provavelmente deseja adicionar o <code>alert</code> e <code>alert-success</code> aulas, por isso sugere. </p> <div class="rouge-syntax-highlight"> <table class="rouge-line-table html"> <tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>1</pre> </td> <td class="rouge-code"> <pre><span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"alert alert-success"</span><span style="color: #f4bf75">></span> </pre> </td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>2</pre> </td> <td class="rouge-code"> <pre> <span style="color: #f4bf75"><strong></span>Success!<span style="color: #f4bf75"></strong></span> This alert box represents a successful or positive action </pre> </td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>3</pre> </td> <td class="rouge-code"> <pre><span style="color: #f4bf75"></div></span> </pre> </td> </tr> </tbody> </table> </div> <p>Apenas pressione <strong>Aba</strong> para aceitar a sugestão.</p> <h2 id="toc-m1cv-regex-simplified-with-copilot">Regex simplificado com copiloto</h2> <p>Se você já lidou com regex, deve saber como pode ser confuso interpretar os padrões. Mas com o Copilot ao seu lado, escrever expressões regulares pode ser muito mais fácil porque você pode pedir ao Copilot para escrever um padrão específico para você. </p> <p>Por exemplo, se você quisesse uma expressão regular que corresponda a um número de telefone, você teria o seguinte prompt em um arquivo JavaScript:</p> <div class="rouge-syntax-highlight"> <table class="rouge-line-table javascript"> <tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>1</pre> </td> <td class="rouge-code"> <pre><span style="color: #505050">// Regex to match the phone number in the format (xxx) xxx-xxxx</span> </pre> </td> </tr> </tbody> </table> </div> <p>Se você acertar <strong>Digitar</strong> no seu teclado, o Copilot fornecerá o regex solicitado:</p> <div class="rouge-syntax-highlight"> <table class="rouge-line-table javascript"> <tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>1</pre> </td> <td class="rouge-code"> <pre><span style="color: #d28445">var</span> <span style="color: #d0d0d0;background-color: #151515">phoneRegex</span> <span style="color: #d0d0d0">=</span> <span style="color: #75b5aa">/^</span><span style="color: #8f5536">(d{3})</span><span style="color: #75b5aa"> </span><span style="color: #8f5536">d{3}</span><span style="color: #75b5aa">-</span><span style="color: #8f5536">d{4}</span><span style="color: #75b5aa">$/</span><span style="color: #d0d0d0">;</span> </pre> </td> </tr> </tbody> </table> </div> <p>Regex é comumente usado para testes. É disso que trata a próxima seção.</p> <h2 id="toc-nmy5-unit-testing-made-easy-with-copilot">Teste de unidade facilitado com o copiloto</h2> <p>O Copilot torna o teste de unidade super fácil. Vejamos um exemplo.</p> <p>A função a seguir pega uma string, verifica se ela corresponde ao regex, analisa o primeiro e o último valor antes de juntar o número com base no operador:</p> <div class="rouge-syntax-highlight"> <table class="rouge-line-table javascript"> <tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>1</pre> </td> <td class="rouge-code"> <pre><span style="color: #d28445">function</span> <span style="color: #d0d0d0;background-color: #151515">calculator</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">str</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span> </pre> </td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>2</pre> </td> <td class="rouge-code"> <pre> <span style="color: #d28445">var</span> <span style="color: #d0d0d0;background-color: #151515">regex</span> <span style="color: #d0d0d0">=</span> <span style="color: #75b5aa">/^</span><span style="color: #8f5536">(d{3})</span><span style="color: #75b5aa"> </span><span style="color: #8f5536">d{3}</span><span style="color: #75b5aa">-</span><span style="color: #8f5536">d{4}</span><span style="color: #75b5aa">$/</span><span style="color: #d0d0d0">;</span> </pre> </td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>3</pre> </td> <td class="rouge-code"> <pre> <span style="color: #d28445">var</span> <span style="color: #d0d0d0;background-color: #151515">match</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">str</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">match</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">regex</span><span style="color: #d0d0d0">)</span> </pre> </td> </tr> <tr id="line-4" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>4</pre> </td> <td class="rouge-code"> <pre> </pre> </td> </tr> <tr id="line-5" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>5</pre> </td> <td class="rouge-code"> <pre> <span style="color: #d28445">var</span> <span style="color: #d0d0d0;background-color: #151515">num1</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">parseInt</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">match</span><span style="color: #d0d0d0">[</span><span style="color: #90a959">1</span><span style="color: #d0d0d0">])</span> </pre> </td> </tr> <tr id="line-6" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>6</pre> </td> <td class="rouge-code"> <pre> <span style="color: #d28445">var</span> <span style="color: #d0d0d0;background-color: #151515">num2</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">parseInt</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">match</span><span style="color: #d0d0d0">[</span><span style="color: #90a959">3</span><span style="color: #d0d0d0">])</span> </pre> </td> </tr> <tr id="line-7" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>7</pre> </td> <td class="rouge-code"> <pre> </pre> </td> </tr> <tr id="line-8" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>8</pre> </td> <td class="rouge-code"> <pre> <span style="color: #aa759f">switch</span> <span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">match</span><span style="color: #d0d0d0">[</span><span style="color: #90a959">2</span><span style="color: #d0d0d0">])</span> <span style="color: #d0d0d0">{</span> </pre> </td> </tr> <tr id="line-9" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>9</pre> </td> <td class="rouge-code"> <pre> <span style="color: #aa759f">case</span> <span style="color: #90a959">"</span><span style="color: #90a959">+</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">:</span> </pre> </td> </tr> <tr id="line-10" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>10</pre> </td> <td class="rouge-code"> <pre> <span style="color: #aa759f">return</span> <span style="color: #d0d0d0;background-color: #151515">num1</span> <span style="color: #d0d0d0">+</span> <span style="color: #d0d0d0;background-color: #151515">num2</span><span style="color: #d0d0d0">;</span> </pre> </td> </tr> <tr id="line-11" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>11</pre> </td> <td class="rouge-code"> <pre> <span style="color: #aa759f">case</span> <span style="color: #90a959">"</span><span style="color: #90a959">-</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">:</span> </pre> </td> </tr> <tr id="line-12" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>12</pre> </td> <td class="rouge-code"> <pre> <span style="color: #aa759f">return</span> <span style="color: #d0d0d0;background-color: #151515">num1</span> <span style="color: #d0d0d0">-</span> <span style="color: #d0d0d0;background-color: #151515">num2</span><span style="color: #d0d0d0">;</span> </pre> </td> </tr> <tr id="line-13" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>13</pre> </td> <td class="rouge-code"> <pre> <span style="color: #aa759f">case</span> <span style="color: #90a959">"</span><span style="color: #90a959">*</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">:</span> </pre> </td> </tr> <tr id="line-14" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>14</pre> </td> <td class="rouge-code"> <pre> <span style="color: #aa759f">return</span> <span style="color: #d0d0d0;background-color: #151515">num1</span> <span style="color: #d0d0d0">*</span> <span style="color: #d0d0d0;background-color: #151515">num2</span><span style="color: #d0d0d0">;</span> </pre> </td> </tr> <tr id="line-15" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>15</pre> </td> <td class="rouge-code"> <pre> <span style="color: #aa759f">case</span> <span style="color: #90a959">"</span><span style="color: #90a959">/</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">:</span> </pre> </td> </tr> <tr id="line-16" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>16</pre> </td> <td class="rouge-code"> <pre> <span style="color: #aa759f">return</span> <span style="color: #d0d0d0;background-color: #151515">num1</span> <span style="color: #d0d0d0">/</span> <span style="color: #d0d0d0;background-color: #151515">num2</span><span style="color: #d0d0d0">;</span> </pre> </td> </tr> <tr id="line-17" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>17</pre> </td> <td class="rouge-code"> <pre> <span style="color: #d0d0d0;background-color: #151515">default</span><span style="color: #d0d0d0">:</span> </pre> </td> </tr> <tr id="line-18" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>18</pre> </td> <td class="rouge-code"> <pre> <span style="color: #aa759f">return</span> <span style="color: #90a959">"</span><span style="color: #90a959">Invalid operator</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">;</span> </pre> </td> </tr> <tr id="line-19" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>19</pre> </td> <td class="rouge-code"> <pre> <span style="color: #d0d0d0">}</span> </pre> </td> </tr> <tr id="line-20" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>20</pre> </td> <td class="rouge-code"> <pre><span style="color: #d0d0d0">}</span> </pre> </td> </tr> </tbody> </table> </div> <p>Agora você pode dizer ao copiloto para testar essa função com<strong> </strong><code>console.log()</code> usando um prompt como este:</p> <div class="rouge-syntax-highlight"> <table class="rouge-line-table javascript"> <tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>1</pre> </td> <td class="rouge-code"> <pre><span style="color: #505050">// test calculator function</span> </pre> </td> </tr> </tbody> </table> </div> <p>O Copilot registrará cada uma das operações e fornecerá a saída:</p> <div class="rouge-syntax-highlight"> <table class="rouge-line-table javascript"> <tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>1</pre> </td> <td class="rouge-code"> <pre><span style="color: #d0d0d0;background-color: #151515">console</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">log</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">1+1</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">)</span> <span style="color: #505050">// 2 </span> </pre> </td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>2</pre> </td> <td class="rouge-code"> <pre><span style="color: #d0d0d0;background-color: #151515">console</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">log</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">1-1</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">)</span> <span style="color: #505050">// 0 </span> </pre> </td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>3</pre> </td> <td class="rouge-code"> <pre><span style="color: #d0d0d0;background-color: #151515">console</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">log</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">1*1</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">)</span> <span style="color: #505050">// 1 </span> </pre> </td> </tr> <tr id="line-4" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>4</pre> </td> <td class="rouge-code"> <pre><span style="color: #d0d0d0;background-color: #151515">console</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">log</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">1/1</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">)</span> <span style="color: #505050">// 1</span> </pre> </td> </tr> </tbody> </table> </div> <p>Com o seguinte prompt, o Copilot gerará a codificação para testar a função da unidade:</p> <div class="rouge-syntax-highlight"> <table class="rouge-line-table javascript"> <tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>1</pre> </td> <td class="rouge-code"> <pre><span style="color: #505050">// create unit test for calculator function </span> </pre> </td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>2</pre> </td> <td class="rouge-code"> <pre> </pre> </td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>3</pre> </td> <td class="rouge-code"> <pre><span style="color: #d28445">var</span> <span style="color: #d0d0d0;background-color: #151515">assert</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">require</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">asser</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">)</span> </pre> </td> </tr> <tr id="line-4" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>4</pre> </td> <td class="rouge-code"> <pre><span style="color: #d0d0d0;background-color: #151515">assert</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">equal</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">calculator</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">1+1</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">),</span> <span style="color: #90a959">2</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">"</span><span style="color: #90a959">calculator can add</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">)</span> </pre> </td> </tr> </tbody> </table> </div> <p>Ele não apenas gerará o código, mas também sugerirá outras operações para testar além da adição.</p> <h2 id="toc-j13i-choosing-from-multiple-solutions-by-copilot">Escolhendo entre várias soluções por copiloto</h2> <p>Até agora, vimos o Copilot nos dar sugestões. Mas lembre-se sempre de que nem sempre você precisa escolher a primeira sugestão. Se não gostar da primeira solução, pode sempre escolher outra.</p> <p>Considere o seguinte prompt:</p> <div class="rouge-syntax-highlight"> <table class="rouge-line-table javascript"> <tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>1</pre> </td> <td class="rouge-code"> <pre><span style="color: #505050">// Create a function that takes a string and returns it backwards</span> </pre> </td> </tr> </tbody> </table> </div> <p>Comece a tabular para ver as sugestões. Se você não estiver satisfeito com a primeira, passe o mouse sobre o texto e navegue até a próxima solução (usando o <strong>></strong> ícone). Depois de chegar a uma solução aceitável, você pode clicar no botão <strong>Aceitar</strong> botão. </p> <figure class="post_image"><img decoding="async" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2776/posts/107081/image-upload/Screenshot_of_choosing_another_function_2_.jpg" alt="Captura de tela da função de preenchimento automático do Copilot" loading="lazy" width="870px" height="415px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2776/posts/107081/image-upload/Screenshot_of_choosing_another_function_2_.jpg 2x"/><img decoding="async" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2776/posts/107081/image-upload/Screenshot_of_choosing_another_function_2_.jpg" alt="Captura de tela da função de preenchimento automático do Copilot" loading="lazy" width="650px" height="312px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2776/posts/107081/image-upload/Screenshot_of_choosing_another_function_2_.jpg 2x"/><img decoding="async" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2776/posts/107081/image-upload/Screenshot_of_choosing_another_function_2_.jpg" alt="Captura de tela da função de preenchimento automático do Copilot" loading="lazy" width="380px" height="187px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2776/posts/107081/image-upload/Screenshot_of_choosing_another_function_2_.jpg 2x"/><figcaption>Captura de tela da função de preenchimento automático do Copilot</figcaption></figure> <h2 id="toc-rj3c-prompting-copilot-multiple-conditions">Solicitando o copiloto com várias condições</h2> <p>Ao escrever seu prompt do Copilot, você pode especificar várias condições em seu prompt. Isso é bastante útil se você quiser escrever um programa complexo com regras diferentes.</p> <p>Digamos que você queira analisar uma lista de despesas com algumas condições. Dentro da função, você pedirá ao Copilot para fazer três coisas em seu prompt (representado pelo comentário):</p> <div class="rouge-syntax-highlight"> <table class="rouge-line-table javascript"> <tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>1</pre> </td> <td class="rouge-code"> <pre><span style="color: #d28445">function</span> <span style="color: #d0d0d0;background-color: #151515">parseExpenses</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">expenses</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span> </pre> </td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>2</pre> </td> <td class="rouge-code"> <pre> <span style="color: #505050">/* Parse the list of expenses and return the array of </span> </pre> </td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>3</pre> </td> <td class="rouge-code"> <pre><span style="color: #505050"> triples (date, value, currency). Ignore the lines starting with //. </span> </pre> </td> </tr> <tr id="line-4" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>4</pre> </td> <td class="rouge-code"> <pre><span style="color: #505050"> Parse the date using Date() </span> </pre> </td> </tr> <tr id="line-5" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>5</pre> </td> <td class="rouge-code"> <pre><span style="color: #505050"> */</span> </pre> </td> </tr> <tr id="line-6" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>6</pre> </td> <td class="rouge-code"> <pre><span style="color: #d0d0d0">}</span> </pre> </td> </tr> </tbody> </table> </div> <p>Aqui especificamos três condições: analisar a lista, ignorar comentários e analisar a data. Bater <strong>Controle + Enter</strong> seu teclado e escolha a melhor solução entre as sugestões. </p> <p>Uma das sugestões quando testei isso foi a seguinte:</p> <div class="rouge-syntax-highlight"> <table class="rouge-line-table javascript"> <tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>1</pre> </td> <td class="rouge-code"> <pre> <span style="color: #aa759f">return</span> <span style="color: #d0d0d0;background-color: #151515">expenses</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">split</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #8f5536">n</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">)</span> </pre> </td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>2</pre> </td> <td class="rouge-code"> <pre> <span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">filter</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">line</span> <span style="color: #d0d0d0">=></span> <span style="color: #d0d0d0">!</span><span style="color: #d0d0d0;background-color: #151515">line</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">startsWith</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">//</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">))</span> </pre> </td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>3</pre> </td> <td class="rouge-code"> <pre> <span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">map</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">line</span> <span style="color: #d0d0d0">=></span> <span style="color: #d0d0d0;background-color: #151515">line</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">split</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">,</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">))</span> </pre> </td> </tr> <tr id="line-4" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>4</pre> </td> <td class="rouge-code"> <pre> <span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">map</span><span style="color: #d0d0d0">(([</span><span style="color: #d0d0d0;background-color: #151515">date</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0;background-color: #151515">value</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0;background-color: #151515">currency</span><span style="color: #d0d0d0">])</span> <span style="color: #d0d0d0">=></span> <span style="color: #d0d0d0">[</span><span style="color: #aa759f">new</span> <span style="color: #d0d0d0;background-color: #151515">Date</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">date</span><span style="color: #d0d0d0">),</span> <span style="color: #d0d0d0;background-color: #151515">Number</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">value</span><span style="color: #d0d0d0">),</span> <span style="color: #d0d0d0;background-color: #151515">currency</span><span style="color: #d0d0d0">]);</span> </pre> </td> </tr> </tbody> </table> </div> <p>Isso é muito bom. Mas cuidado, algumas das sugestões que me foram sugeridas usaram <code>line[0]=="/"</code> para testar quais linhas ignorar. Isso não é bem o que pedimos!</p> <p>É importante ler cuidadosamente o código gerado pelo Copilot ou qualquer outra ferramenta de IA para garantir que corresponda ao que você espera.</p> <h2 id="toc-aokg-conclusion">Conclusão</h2> <p>Neste tutorial, vimos os fundamentos do uso do GitHub Copilot. Basta escrever seu prompt em um comentário e pressionar <strong>Ctrl + Enter</strong> para ver as sugestões. </div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2665391954140437" data-ad-slot="2109868500" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="sharedaddy sd-sharing-enabled"><div class="robots-nocontent sd-block sd-social sd-social-icon-text sd-sharing"><h3 class="sd-title">Compartilhe isso:</h3><div class="sd-content"><ul><li class="share-facebook"><a rel="nofollow noopener noreferrer" data-shared="sharing-facebook-18409" class="share-facebook sd-button share-icon" href="https://www.reviltec.com.br/introducao-ao-github-copilot-no-visual-studio-code.html?share=facebook" target="_blank" title="Clique para compartilhar no Facebook" ><span>Facebook</span></a></li><li class="share-x"><a rel="nofollow noopener noreferrer" data-shared="sharing-x-18409" class="share-x sd-button share-icon" href="https://www.reviltec.com.br/introducao-ao-github-copilot-no-visual-studio-code.html?share=x" target="_blank" title="Clique para compartilhar no X" ><span>18+</span></a></li><li class="share-end"></li></ul></div></div></div> <div id='jp-relatedposts' class='jp-relatedposts' > <h3 class="jp-relatedposts-headline"><em>Relacionado</em></h3> </div> <div class="clear"></div> <div class="post-author"> <div class="author-image"> <a href="https://www.reviltec.com.br/author/admin" title="Posted byadmin " rel="author"><img alt='author-avatar' src='https://secure.gravatar.com/avatar/64d2149131c6fc5bf2511eb7a331bdfb?s=120&d=http%3A%2F%2Fassets.tumblr.com%2Fimages%2Fdefault_avatar_128.png&r=g' srcset='https://secure.gravatar.com/avatar/64d2149131c6fc5bf2511eb7a331bdfb?s=240&d=http%3A%2F%2Fassets.tumblr.com%2Fimages%2Fdefault_avatar_128.png&r=g 2x' class='avatar avatar-120 photo' height='120' width='120' decoding='async'/></a> </div> <div class="author-info"> <h4>Posted by <a href="https://www.reviltec.com.br/author/admin" title="Posted byadmin " rel="author">admin</a></h4> <p></p> <div class="author-connect"> <a href="https://www.reviltec.com.br" class="author-social website"></a> </div> </div> <div class="clear"></div> </div> <div class="tags"><span class="label">Tagged with</span><ul><li><a href="https://www.reviltec.com.br/tag/code" rel="nofollow tag">Code</a></li><li><a href="https://www.reviltec.com.br/tag/copilot" rel="nofollow tag">copilot</a></li><li><a href="https://www.reviltec.com.br/tag/github" rel="nofollow tag">GitHub</a></li><li><a href="https://www.reviltec.com.br/tag/introdu" rel="nofollow tag">introdu</a></li><li><a href="https://www.reviltec.com.br/tag/introducao" rel="nofollow tag">Introdução</a></li><li><a href="https://www.reviltec.com.br/tag/studio" rel="nofollow tag">Studio</a></li><li><a href="https://www.reviltec.com.br/tag/visual" rel="nofollow tag">visual</a></li></ul></div><div class="clear"></div> </div> <div class='share-post'> <h3 class='title'>Like to share?</h3>  <div class="addthis_toolbox addthis_default_style"> <a class="addthis_button_tweet"></a> <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> <a class="addthis_button_google_plusone" g:plusone:size="medium"></a> <a class="addthis_button_pinterest_pinit"></a> <a class="addthis_counter addthis_pill_style"></a> </div> <div class="clear"></div> </div> <div class="paginations item_pagination"> <div class="item"><span>Newer Post</span><a href="https://www.reviltec.com.br/prototipos-de-pcb-melhoram-o-processo-de-design-e-producao.html" rel="next">Protótipos de PCB melhoram o processo de design e produção</a></div> <div class="item"><span>Older Post</span><a href="https://www.reviltec.com.br/como-mudar-a-voz-do-google-assistant.html" rel="prev">Como mudar a voz do Google Assistant</a></div> <div class="clear"></div> </div> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Deixe uma resposta<small><a rel="nofollow" id="cancel-comment-reply-link" href="/introducao-ao-github-copilot-no-visual-studio-code.html#respond" style="display:none;">Cancelar resposta</a></small></h3> <form id="commentform" class="comment-form"> <iframe title="Formulário de comentário" src="https://jetpack.wordpress.com/jetpack-comment/?blogid=96977179&postid=18409&comment_registration=0&require_name_email=1&stc_enabled=0&stb_enabled=0&show_avatars=1&avatar_default=mystery&greeting=Deixe+uma+resposta&jetpack_comments_nonce=a9cede111f&greeting_reply=Deixe+uma+resposta+para+%25s&color_scheme=light&lang=pt_BR&jetpack_version=14.0&iframe_unique_id=1&show_cookie_consent=10&has_cookie_consent=0&is_current_user_subscribed=0&token_key=%3Bnormal%3B&sig=be1947161bff70f545b749f755dc96408d297d1e#parent=https%3A%2F%2Fwww.reviltec.com.br%2Fintroducao-ao-github-copilot-no-visual-studio-code.html" name="jetpack_remote_comment" style="width:100%; height: 430px; border:0;" class="jetpack_remote_comment" id="jetpack_remote_comment" sandbox="allow-same-origin allow-top-navigation allow-scripts allow-forms allow-popups" > </iframe>  <script> document.addEventListener('DOMContentLoaded', function () { var commentForms = document.getElementsByClassName('jetpack_remote_comment'); for (var i = 0; i < commentForms.length; i++) { commentForms[i].allowTransparency = false; commentForms[i].scrolling = 'no'; } }); </script>  </form> </div> <input type="hidden" name="comment_parent" id="comment_parent" value="" /> </article> </div> <div id="side"> <section id="right-side-top" class="section"> <aside id="text-2" class="widget widget_text"> <div class="textwidget"><p><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br /> <br /> <ins class="adsbygoogle" style="display: inline-block; width: 300px; height: 250px;" data-ad-client="ca-pub-2665391954140437" data-ad-slot="9652114502"></ins><br /> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></p> </div> <div class="clear"></div></aside> <aside id="recent-posts-2" class="widget widget_recent_entries"> <h2 class="widget-title"><span class="active">Posts recentes</span></h2> <ul> <li> <a href="https://www.reviltec.com.br/wordcamp-asia-2023-abre-chamada-para-palestrantes-wp-tavern.html">WordCamp Asia 2023 abre chamada para palestrantes – WP Tavern</a> </li> <li> <a href="https://www.reviltec.com.br/10-principais-modelos-de-video-vertical-para-adobe-rush.html">10 principais modelos de vídeo vertical para Adobe Rush</a> </li> <li> <a href="https://www.reviltec.com.br/o-voo-cooperativo-da-rede-de-campanha-do-halo-infinite-ja-esta-ativo.html">O voo cooperativo da rede de campanha do Halo Infinite já está ativo</a> </li> <li> <a href="https://www.reviltec.com.br/robo-recem-desenvolvido-pode-tocar-bateria-ouvir-e-aprender.html">Robô recém-desenvolvido pode tocar bateria, ouvir e aprender</a> </li> <li> <a href="https://www.reviltec.com.br/ia-permite-que-novo-robo-manipule-objetos-macios-e-flexiveis.html">IA permite que novo robô manipule objetos macios e flexíveis</a> </li> </ul> <div class="clear"></div></aside><aside id="tag_cloud-2" class="widget widget_tag_cloud"><h2 class="widget-title"><span class="active">Marcadores!</span></h2><div class="tagcloud"><a href="https://www.reviltec.com.br/tag/agora" class="tag-cloud-link tag-link-213 tag-link-position-1" style="font-size: 9.3391304347826pt;" aria-label="agora (251 itens)">agora</a> <a href="https://www.reviltec.com.br/tag/android" class="tag-cloud-link tag-link-1192 tag-link-position-2" style="font-size: 10.8pt;" aria-label="Android (331 itens)">Android</a> <a href="https://www.reviltec.com.br/tag/automa" class="tag-cloud-link tag-link-7604 tag-link-position-3" style="font-size: 8.2434782608696pt;" aria-label="automa (204 itens)">automa</a> <a href="https://www.reviltec.com.br/tag/automation" class="tag-cloud-link tag-link-7662 tag-link-position-4" style="font-size: 10.434782608696pt;" aria-label="automation (308 itens)">automation</a> <a href="https://www.reviltec.com.br/tag/automacao" class="tag-cloud-link tag-link-7609 tag-link-position-5" style="font-size: 12.747826086957pt;" aria-label="automação (481 itens)">automação</a> <a href="https://www.reviltec.com.br/tag/como" class="tag-cloud-link tag-link-47 tag-link-position-6" style="font-size: 19.078260869565pt;" aria-label="Como (1.585 itens)">Como</a> <a href="https://www.reviltec.com.br/tag/dos" class="tag-cloud-link tag-link-268 tag-link-position-7" style="font-size: 8.1217391304348pt;" aria-label="dos (198 itens)">dos</a> <a href="https://www.reviltec.com.br/tag/esta" class="tag-cloud-link tag-link-99 tag-link-position-8" style="font-size: 16.4pt;" aria-label="está (949 itens)">está</a> <a href="https://www.reviltec.com.br/tag/estao" class="tag-cloud-link tag-link-92 tag-link-position-9" style="font-size: 10.678260869565pt;" aria-label="estão (324 itens)">estão</a> <a href="https://www.reviltec.com.br/tag/galaxy" class="tag-cloud-link tag-link-973 tag-link-position-10" style="font-size: 8.1217391304348pt;" aria-label="Galaxy (198 itens)">Galaxy</a> <a href="https://www.reviltec.com.br/tag/game" class="tag-cloud-link tag-link-94 tag-link-position-11" style="font-size: 12.991304347826pt;" aria-label="Game (495 itens)">Game</a> <a href="https://www.reviltec.com.br/tag/google" class="tag-cloud-link tag-link-1010 tag-link-position-12" style="font-size: 13.35652173913pt;" aria-label="Google (530 itens)">Google</a> <a href="https://www.reviltec.com.br/tag/jogo" class="tag-cloud-link tag-link-495 tag-link-position-13" style="font-size: 8.7304347826087pt;" aria-label="jogo (225 itens)">jogo</a> <a href="https://www.reviltec.com.br/tag/jogos" class="tag-cloud-link tag-link-32 tag-link-position-14" style="font-size: 14.939130434783pt;" aria-label="jogos (720 itens)">jogos</a> <a href="https://www.reviltec.com.br/tag/mais" class="tag-cloud-link tag-link-102 tag-link-position-15" style="font-size: 15.060869565217pt;" aria-label="mais (744 itens)">mais</a> <a href="https://www.reviltec.com.br/tag/melhores" class="tag-cloud-link tag-link-204 tag-link-position-16" style="font-size: 14.086956521739pt;" aria-label="Melhores (609 itens)">Melhores</a> <a href="https://www.reviltec.com.br/tag/microsoft" class="tag-cloud-link tag-link-336 tag-link-position-17" style="font-size: 8pt;" aria-label="Microsoft (196 itens)">Microsoft</a> <a href="https://www.reviltec.com.br/tag/modelos" class="tag-cloud-link tag-link-121 tag-link-position-18" style="font-size: 10.313043478261pt;" aria-label="modelos (303 itens)">modelos</a> <a href="https://www.reviltec.com.br/tag/news" class="tag-cloud-link tag-link-8 tag-link-position-19" style="font-size: 10.313043478261pt;" aria-label="News (300 itens)">News</a> <a href="https://www.reviltec.com.br/tag/noticias" class="tag-cloud-link tag-link-500 tag-link-position-20" style="font-size: 12.260869565217pt;" aria-label="notícias (435 itens)">notícias</a> <a href="https://www.reviltec.com.br/tag/nova" class="tag-cloud-link tag-link-591 tag-link-position-21" style="font-size: 8.4869565217391pt;" aria-label="nova (214 itens)">nova</a> <a href="https://www.reviltec.com.br/tag/novo" class="tag-cloud-link tag-link-192 tag-link-position-22" style="font-size: 12.382608695652pt;" aria-label="novo (448 itens)">novo</a> <a href="https://www.reviltec.com.br/tag/nao" class="tag-cloud-link tag-link-554 tag-link-position-23" style="font-size: 9.095652173913pt;" aria-label="não (237 itens)">não</a> <a href="https://www.reviltec.com.br/tag/para" class="tag-cloud-link tag-link-31 tag-link-position-24" style="font-size: 22pt;" aria-label="para (2.784 itens)">para</a> <a href="https://www.reviltec.com.br/tag/pass" class="tag-cloud-link tag-link-95 tag-link-position-25" style="font-size: 12.260869565217pt;" aria-label="Pass (439 itens)">Pass</a> <a href="https://www.reviltec.com.br/tag/pode" class="tag-cloud-link tag-link-66 tag-link-position-26" style="font-size: 11.286956521739pt;" aria-label="pode (365 itens)">pode</a> <a href="https://www.reviltec.com.br/tag/por" class="tag-cloud-link tag-link-1102 tag-link-position-27" style="font-size: 11.408695652174pt;" aria-label="Por (371 itens)">Por</a> <a href="https://www.reviltec.com.br/tag/principais" class="tag-cloud-link tag-link-120 tag-link-position-28" style="font-size: 8.3652173913043pt;" aria-label="principais (209 itens)">principais</a> <a href="https://www.reviltec.com.br/tag/pro" class="tag-cloud-link tag-link-125 tag-link-position-29" style="font-size: 8.4869565217391pt;" aria-label="Pro (214 itens)">Pro</a> <a href="https://www.reviltec.com.br/tag/robos" class="tag-cloud-link tag-link-7540 tag-link-position-30" style="font-size: 12.139130434783pt;" aria-label="robos (426 itens)">robos</a> <a href="https://www.reviltec.com.br/tag/robotica" class="tag-cloud-link tag-link-7559 tag-link-position-31" style="font-size: 13.84347826087pt;" aria-label="robotica (589 itens)">robotica</a> <a href="https://www.reviltec.com.br/tag/robotics" class="tag-cloud-link tag-link-7558 tag-link-position-32" style="font-size: 11.773913043478pt;" aria-label="Robotics (394 itens)">Robotics</a> <a href="https://www.reviltec.com.br/tag/robo" class="tag-cloud-link tag-link-1461 tag-link-position-33" style="font-size: 9.095652173913pt;" aria-label="robô (240 itens)">robô</a> <a href="https://www.reviltec.com.br/tag/samsung" class="tag-cloud-link tag-link-1199 tag-link-position-34" style="font-size: 9.2173913043478pt;" aria-label="Samsung (246 itens)">Samsung</a> <a href="https://www.reviltec.com.br/tag/semana" class="tag-cloud-link tag-link-208 tag-link-position-35" style="font-size: 8.6086956521739pt;" aria-label="semana (217 itens)">semana</a> <a href="https://www.reviltec.com.br/tag/series" class="tag-cloud-link tag-link-432 tag-link-position-36" style="font-size: 8.9739130434783pt;" aria-label="Series (236 itens)">Series</a> <a href="https://www.reviltec.com.br/tag/seu" class="tag-cloud-link tag-link-156 tag-link-position-37" style="font-size: 13.234782608696pt;" aria-label="seu (518 itens)">seu</a> <a href="https://www.reviltec.com.br/tag/sobre" class="tag-cloud-link tag-link-827 tag-link-position-38" style="font-size: 13.478260869565pt;" aria-label="sobre (550 itens)">sobre</a> <a href="https://www.reviltec.com.br/tag/sua" class="tag-cloud-link tag-link-506 tag-link-position-39" style="font-size: 9.704347826087pt;" aria-label="sua (267 itens)">sua</a> <a href="https://www.reviltec.com.br/tag/tavern" class="tag-cloud-link tag-link-45 tag-link-position-40" style="font-size: 8.8521739130435pt;" aria-label="Tavern (228 itens)">Tavern</a> <a href="https://www.reviltec.com.br/tag/uma" class="tag-cloud-link tag-link-38 tag-link-position-41" style="font-size: 14.939130434783pt;" aria-label="uma (722 itens)">uma</a> <a href="https://www.reviltec.com.br/tag/voce" class="tag-cloud-link tag-link-228 tag-link-position-42" style="font-size: 12.017391304348pt;" aria-label="você (416 itens)">você</a> <a href="https://www.reviltec.com.br/tag/video" class="tag-cloud-link tag-link-50 tag-link-position-43" style="font-size: 8.8521739130435pt;" aria-label="vídeo (230 itens)">vídeo</a> <a href="https://www.reviltec.com.br/tag/wordpress" class="tag-cloud-link tag-link-6 tag-link-position-44" style="font-size: 9.3391304347826pt;" aria-label="Wordpress (253 itens)">Wordpress</a> <a href="https://www.reviltec.com.br/tag/xbox" class="tag-cloud-link tag-link-18 tag-link-position-45" style="font-size: 18.95652173913pt;" aria-label="Xbox (1.535 itens)">Xbox</a></div> <div class="clear"></div></aside><aside id="text-3" class="widget widget_text"> <div class="textwidget"><p><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br /> <br /> <ins class="adsbygoogle" style="display: inline-block; width: 300px; height: 250px;" data-ad-client="ca-pub-2665391954140437" data-ad-slot="9652114502"></ins><br /> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></p> </div> <div class="clear"></div></aside><aside id="tag_cloud-3" class="widget widget_tag_cloud"><h2 class="widget-title"><span class="active">Categorias!</span></h2><div class="tagcloud"><a href="https://www.reviltec.com.br/category/android" class="tag-cloud-link tag-link-7 tag-link-position-1" style="font-size: 21.194888178914pt;" aria-label="Android (1.773 itens)">Android</a> <a href="https://www.reviltec.com.br/category/blog" class="tag-cloud-link tag-link-14 tag-link-position-2" style="font-size: 13.501597444089pt;" aria-label="Blog (33 itens)">Blog</a> <a href="https://www.reviltec.com.br/category/games" class="tag-cloud-link tag-link-2 tag-link-position-3" style="font-size: 21.194888178914pt;" aria-label="Games (1.766 itens)">Games</a> <a href="https://www.reviltec.com.br/category/musica" class="tag-cloud-link tag-link-8577 tag-link-position-4" style="font-size: 17.437699680511pt;" aria-label="Musica (254 itens)">Musica</a> <a href="https://www.reviltec.com.br/category/portfolio" class="tag-cloud-link tag-link-1 tag-link-position-5" style="font-size: 11.623003194888pt;" aria-label="Portfolio (12 itens)">Portfolio</a> <a href="https://www.reviltec.com.br/category/servicos" class="tag-cloud-link tag-link-4 tag-link-position-6" style="font-size: 8pt;" aria-label="Serviços (1 item)">Serviços</a> <a href="https://www.reviltec.com.br/category/tecnologia" class="tag-cloud-link tag-link-7511 tag-link-position-7" style="font-size: 22pt;" aria-label="Tecnologia (2.693 itens)">Tecnologia</a> <a href="https://www.reviltec.com.br/category/tutoriais" class="tag-cloud-link tag-link-46 tag-link-position-8" style="font-size: 21.507987220447pt;" aria-label="Tutoriais (2.102 itens)">Tutoriais</a> <a href="https://www.reviltec.com.br/category/wordpress" class="tag-cloud-link tag-link-3 tag-link-position-9" style="font-size: 17.79552715655pt;" aria-label="Wordpress (306 itens)">Wordpress</a> <a href="https://www.reviltec.com.br/category/xbox" class="tag-cloud-link tag-link-16 tag-link-position-10" style="font-size: 21.418530351438pt;" aria-label="Xbox (1.991 itens)">Xbox</a></div> <div class="clear"></div></aside> </section> </div> <div class="clear"></div> </div> <div class="clear"></div> <footer id="footer"> <div id="copyright"> Copyright 2009 a 2020 <a href="https://www.reviltec.com.br">Reviltec </a>. By <a href="http://www.vfilmes.net" target="_blank">Filmes</a> - <a href="http://www.silviapoit.com.br/" target="_blank">Sindico Profissional</a> - <a href="http://www.refugo.net" target="_blank">Notícias</a> and <a href="http://www.bee49.com" target="_blank">Games online</a>. </div> </footer> </div> <a class='scrollup' href='#'>Scroll</a> <div style="display:none"> <div class="grofile-hash-map-64d2149131c6fc5bf2511eb7a331bdfb"> </div> </div> <script type="text/javascript"> window.WPCOM_sharing_counts = {"https:\/\/www.reviltec.com.br\/introducao-ao-github-copilot-no-visual-studio-code.html":18409}; </script> <script type="text/javascript" src="https://c0.wp.com/c/6.7.1/wp-includes/js/comment-reply.min.js" id="comment-reply-js" async="async" data-wp-strategy="async"></script> <script type="text/javascript" src="https://secure.gravatar.com/js/gprofiles.js?ver=202447" id="grofiles-cards-js"></script> <script type="text/javascript" id="wpgroho-js-extra"> /* <![CDATA[ */ var WPGroHo = {"my_hash":""}; /* ]]> */ </script> <script type="text/javascript" src="https://c0.wp.com/p/jetpack/14.0/modules/wpgroho.js" id="wpgroho-js"></script> <script type="text/javascript" src="https://c0.wp.com/p/jetpack/14.0/modules/likes/queuehandler.js" id="jetpack_likes_queuehandler-js"></script> <script type="text/javascript" src="https://stats.wp.com/e-202447.js" id="jetpack-stats-js" data-wp-strategy="defer"></script> <script type="text/javascript" id="jetpack-stats-js-after"> /* <![CDATA[ */ _stq = window._stq || []; _stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"96977179\",\"post\":\"18409\",\"tz\":\"-3\",\"srv\":\"www.reviltec.com.br\",\"j\":\"1:14.0\"}") ]); _stq.push([ "clickTrackerInit", "96977179", "18409" ]); /* ]]> */ </script> <script type="text/javascript" id="sharing-js-js-extra"> /* <![CDATA[ */ var sharing_js_options = {"lang":"en","counts":"1","is_stats_active":"1"}; /* ]]> */ </script> <script type="text/javascript" src="https://c0.wp.com/p/jetpack/14.0/_inc/build/sharedaddy/sharing.min.js" id="sharing-js-js"></script> <script type="text/javascript" id="sharing-js-js-after"> /* <![CDATA[ */ var windowOpen; ( function () { function matches( el, sel ) { return !! ( el.matches && el.matches( sel ) || el.msMatchesSelector && el.msMatchesSelector( sel ) ); } document.body.addEventListener( 'click', function ( event ) { if ( ! event.target ) { return; } var el; if ( matches( event.target, 'a.share-facebook' ) ) { el = event.target; } else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-facebook' ) ) { el = event.target.parentNode; } if ( el ) { event.preventDefault(); // If there's another sharing window open, close it. if ( typeof windowOpen !== 'undefined' ) { windowOpen.close(); } windowOpen = window.open( el.getAttribute( 'href' ), 'wpcomfacebook', 'menubar=1,resizable=1,width=600,height=400' ); return false; } } ); } )(); var windowOpen; ( function () { function matches( el, sel ) { return !! ( el.matches && el.matches( sel ) || el.msMatchesSelector && el.msMatchesSelector( sel ) ); } document.body.addEventListener( 'click', function ( event ) { if ( ! event.target ) { return; } var el; if ( matches( event.target, 'a.share-x' ) ) { el = event.target; } else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-x' ) ) { el = event.target.parentNode; } if ( el ) { event.preventDefault(); // If there's another sharing window open, close it. if ( typeof windowOpen !== 'undefined' ) { windowOpen.close(); } windowOpen = window.open( el.getAttribute( 'href' ), 'wpcomx', 'menubar=1,resizable=1,width=600,height=350' ); return false; } } ); } )(); /* ]]> */ </script> <script type="text/javascript"> (function () { const iframe = document.getElementById( 'jetpack_remote_comment' ); const watchReply = function() { // Check addComment._Jetpack_moveForm to make sure we don't monkey-patch twice. if ( 'undefined' !== typeof addComment && ! addComment._Jetpack_moveForm ) { // Cache the Core function. addComment._Jetpack_moveForm = addComment.moveForm; const commentParent = document.getElementById( 'comment_parent' ); const cancel = document.getElementById( 'cancel-comment-reply-link' ); function tellFrameNewParent ( commentParentValue ) { const url = new URL( iframe.src ); if ( commentParentValue ) { url.searchParams.set( 'replytocom', commentParentValue ) } else { url.searchParams.delete( 'replytocom' ); } if( iframe.src !== url.href ) { iframe.src = url.href; } }; cancel.addEventListener( 'click', function () { tellFrameNewParent( false ); } ); addComment.moveForm = function ( _, parentId ) { tellFrameNewParent( parentId ); return addComment._Jetpack_moveForm.apply( null, arguments ); }; } } document.addEventListener( 'DOMContentLoaded', watchReply ); // In WP 6.4+, the script is loaded asynchronously, so we need to wait for it to load before we monkey-patch the functions it introduces. document.querySelector('#comment-reply-js')?.addEventListener( 'load', watchReply ); const commentIframes = document.getElementsByClassName('jetpack_remote_comment'); window.addEventListener('message', function(event) { if (event.origin !== 'https://jetpack.wordpress.com') { return; } if (!event?.data?.iframeUniqueId && !event?.data?.height) { return; } const eventDataUniqueId = event.data.iframeUniqueId; // Change height for the matching comment iframe for (let i = 0; i < commentIframes.length; i++) { const iframe = commentIframes[i]; const url = new URL(iframe.src); const iframeUniqueIdParam = url.searchParams.get('iframe_unique_id'); if (iframeUniqueIdParam == event.data.iframeUniqueId) { iframe.style.height = event.data.height + 'px'; return; } } }); })(); </script> </body> </html>