Introdução ao GitHub Copilot no Visual Studio Code

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 GitHubCaptura de tela da página de autorização do co-piloto do GitHubCaptura de tela da página de autorização do co-piloto do GitHub
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 CodeCaptura de tela da extensão GitHub Copilot VS CodeCaptura de tela da extensão GitHub Copilot VS Code
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"><!-- An h1 with inline blue heading --></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"><!-- Create a bulleted list --></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"><!-- Reference the stylesheet named style.css --></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> <!-- 728 --> <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><!-- .post-body --> <div class='share-post'> <h3 class='title'>Like to share?</h3> <!-- AddThis Button BEGIN --> <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=3068c1fa82&greeting_reply=Deixe+uma+resposta+para+%25s&color_scheme=light&lang=pt_BR&jetpack_version=13.9&show_cookie_consent=10&has_cookie_consent=0&is_current_user_subscribed=0&token_key=%3Bnormal%3B&sig=50a3578db2d59e555e6ca53da254ec66208b3d0b#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> <!--[if !IE]><!--> <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> <!--<![endif]--> </form> </div> <input type="hidden" name="comment_parent" id="comment_parent" value="" /> </article><!-- #post --> </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 /> <!-- 300La --><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/far-cry-5-esta-disponivel-hoje-com-o-xbox-game-pass-1-de-julho.html">Far Cry 5 está disponível hoje com o Xbox Game Pass (1 de julho)</a> </li> <li> <a href="https://www.reviltec.com.br/recurso-mission-replay-de-halo-infinite-sera-lancado-junto-com-a-atualizacao-cooperativa.html">Recurso ‘Mission Replay’ de Halo Infinite será lançado junto com a atualização cooperativa</a> </li> <li> <a href="https://www.reviltec.com.br/pare-de-gaguejar-e-supere-sua-ansiedade-durante-as-apresentacoes.html">Pare de gaguejar (e supere sua ansiedade) durante as apresentações</a> </li> <li> <a href="https://www.reviltec.com.br/halo-infinite-campanha-network-co-op-preview-sera-lancado-em-11-de-julho.html">Halo Infinite ‘Campanha Network Co-Op Preview’ será lançado em 11 de julho</a> </li> <li> <a href="https://www.reviltec.com.br/circuito-sem-eletricidade-ajuda-a-liberar-espaco-para-robos-pensarem-dizem-cientistas.html">Circuito sem eletricidade ajuda a liberar espaço para robôs ‘pensarem’, dizem cientistas</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 (250 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 (203 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 (480 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: 18.95652173913pt;" aria-label="Como (1.557 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á (947 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 (323 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 (742 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 (301 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 (212 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 (445 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: 8.9739130434783pt;" aria-label="não (236 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.740 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.165217391304pt;" aria-label="pode (356 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.286956521739pt;" aria-label="Por (365 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: 8pt;" aria-label="principais (195 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.017391304348pt;" aria-label="robos (414 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 (584 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: 8.7304347826087pt;" aria-label="robô (224 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.113043478261pt;" aria-label="seu (513 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 (549 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.817391304348pt;" aria-label="uma (714 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ê (414 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 (228 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.095652173913pt;" aria-label="Wordpress (237 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 /> <!-- 300La --><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.237179487179pt;" 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.519230769231pt;" 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.237179487179pt;" 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.467948717949pt;" 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.634615384615pt;" 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.641 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.50641025641pt;" aria-label="Tutoriais (2.056 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.737179487179pt;" aria-label="Wordpress (291 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.461538461538pt;" 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://secure.gravatar.com/js/gprofiles.js?ver=202441" 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/13.9/modules/wpgroho.js" id="wpgroho-js"></script> <script type="text/javascript" src="https://c0.wp.com/c/6.6.2/wp-includes/js/comment-reply.min.js" id="comment-reply-js" async="async" data-wp-strategy="async"></script> <script type="text/javascript" src="https://c0.wp.com/p/jetpack/13.9/modules/likes/queuehandler.js" id="jetpack_likes_queuehandler-js"></script> <script type="text/javascript" src="https://stats.wp.com/e-202441.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:13.9\"}") ]); _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/13.9/_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 ); window.addEventListener( 'message', function ( event ) { if ( event.origin !== 'https://jetpack.wordpress.com' ) { return; } iframe.style.height = event.data + 'px'; }); })(); </script> </body> </html> <!-- Page cached by LiteSpeed Cache 6.5.0.1 on 2024-10-09 09:23:38 -->