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> <p>[ad_2]</p> <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 um comentário <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 action="https://www.reviltec.com.br/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">O seu endereço de e-mail não será publicado.</span> <span class="required-field-message">Campos obrigatórios são marcados com <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Comentário <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Nome <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required="required" /></p> <p class="comment-form-email"><label for="email">E-mail <span class="required">*</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required="required" /></p> <p class="comment-form-url"><label for="url">Site</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" autocomplete="url" /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Salvar meus dados neste navegador para a próxima vez que eu comentar.</label></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Publicar comentário" /> <input type='hidden' name='comment_post_ID' value='18409' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div> </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/como-corrigir-o-link-que-voce-seguiu-expirou-no-wordpress.html">Como corrigir “O link que você seguiu expirou” no WordPress</a> </li> <li> <a href="https://www.reviltec.com.br/usando-aprendizagem-por-reforco-sim-to-real-para-treinar-robos-para-realizar-tarefas-simples-em-ambientes-amplos.html">Usando aprendizagem por reforço sim-to-real para treinar robôs para realizar tarefas simples em ambientes amplos</a> </li> <li> <a href="https://www.reviltec.com.br/o-yuan-digital-e-bom-para-investimentos-de-longo-ou-curto-prazo-noticias-sobre-robotica-e-automacao.html">O Yuan Digital é Bom para Investimentos de Longo ou Curto Prazo – Notícias sobre Robótica e Automação</a> </li> <li> <a href="https://www.reviltec.com.br/30-melhores-blogs-de-receitas-para-gourmets-em-2024.html">30 melhores blogs de receitas para gourmets em 2024</a> </li> <li> <a href="https://www.reviltec.com.br/como-criar-uma-sobreposicao-de-gradiente-pride-rainbow-no-adobe-illustrator.html">Como criar uma sobreposição de gradiente Pride Rainbow no Adobe Illustrator</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.8983050847458pt;" aria-label="agora (249 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: 11.322033898305pt;" aria-label="Android (330 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.3559322033898pt;" aria-label="automa (186 itens)">automa</a> <a href="https://www.reviltec.com.br/tag/automacao" class="tag-cloud-link tag-link-7609 tag-link-position-4" style="font-size: 12.864406779661pt;" aria-label="automação (448 itens)">automação</a> <a href="https://www.reviltec.com.br/tag/chegando" class="tag-cloud-link tag-link-207 tag-link-position-5" style="font-size: 8pt;" aria-label="chegando (174 itens)">chegando</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.033898305085pt;" aria-label="Como (1.484 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.4745762711864pt;" aria-label="dos (190 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.661016949153pt;" aria-label="está (941 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: 11.203389830508pt;" aria-label="estão (319 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.7118644067797pt;" 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: 13.457627118644pt;" 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.694915254237pt;" aria-label="Google (527 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: 9.3050847457627pt;" aria-label="jogo (223 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: 15.35593220339pt;" aria-label="jogos (719 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.35593220339pt;" aria-label="mais (728 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.406779661017pt;" aria-label="Melhores (608 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: 8.5932203389831pt;" aria-label="Microsoft (195 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.847457627119pt;" aria-label="modelos (301 itens)">modelos</a> <a href="https://www.reviltec.com.br/tag/noticias" class="tag-cloud-link tag-link-500 tag-link-position-19" style="font-size: 12.389830508475pt;" aria-label="notícias (406 itens)">notícias</a> <a href="https://www.reviltec.com.br/tag/nova" class="tag-cloud-link tag-link-591 tag-link-position-20" style="font-size: 8.8305084745763pt;" aria-label="nova (205 itens)">nova</a> <a href="https://www.reviltec.com.br/tag/novo" class="tag-cloud-link tag-link-192 tag-link-position-21" style="font-size: 12.745762711864pt;" aria-label="novo (437 itens)">novo</a> <a href="https://www.reviltec.com.br/tag/nao" class="tag-cloud-link tag-link-554 tag-link-position-22" style="font-size: 9.5423728813559pt;" aria-label="não (233 itens)">não</a> <a href="https://www.reviltec.com.br/tag/para" class="tag-cloud-link tag-link-31 tag-link-position-23" style="font-size: 22pt;" aria-label="para (2.635 itens)">para</a> <a href="https://www.reviltec.com.br/tag/pass" class="tag-cloud-link tag-link-95 tag-link-position-24" style="font-size: 12.745762711864pt;" 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-25" style="font-size: 11.559322033898pt;" aria-label="pode (342 itens)">pode</a> <a href="https://www.reviltec.com.br/tag/por" class="tag-cloud-link tag-link-1102 tag-link-position-26" style="font-size: 11.559322033898pt;" aria-label="Por (344 itens)">Por</a> <a href="https://www.reviltec.com.br/tag/principais" class="tag-cloud-link tag-link-120 tag-link-position-27" style="font-size: 8.4745762711864pt;" aria-label="principais (190 itens)">principais</a> <a href="https://www.reviltec.com.br/tag/pro" class="tag-cloud-link tag-link-125 tag-link-position-28" style="font-size: 8.9491525423729pt;" aria-label="Pro (209 itens)">Pro</a> <a href="https://www.reviltec.com.br/tag/robos" class="tag-cloud-link tag-link-7540 tag-link-position-29" style="font-size: 11.915254237288pt;" aria-label="robos (369 itens)">robos</a> <a href="https://www.reviltec.com.br/tag/robotica" class="tag-cloud-link tag-link-7559 tag-link-position-30" style="font-size: 13.813559322034pt;" aria-label="robotica (538 itens)">robotica</a> <a href="https://www.reviltec.com.br/tag/robotics" class="tag-cloud-link tag-link-7558 tag-link-position-31" style="font-size: 9.7796610169492pt;" aria-label="Robotics (247 itens)">Robotics</a> <a href="https://www.reviltec.com.br/tag/robo" class="tag-cloud-link tag-link-1461 tag-link-position-32" style="font-size: 8.7118644067797pt;" aria-label="robô (199 itens)">robô</a> <a href="https://www.reviltec.com.br/tag/samsung" class="tag-cloud-link tag-link-1199 tag-link-position-33" style="font-size: 9.7796610169492pt;" 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-34" style="font-size: 9.1864406779661pt;" 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-35" style="font-size: 9.5423728813559pt;" 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-36" style="font-size: 13.457627118644pt;" aria-label="seu (502 itens)">seu</a> <a href="https://www.reviltec.com.br/tag/sobre" class="tag-cloud-link tag-link-827 tag-link-position-37" style="font-size: 13.813559322034pt;" aria-label="sobre (530 itens)">sobre</a> <a href="https://www.reviltec.com.br/tag/sua" class="tag-cloud-link tag-link-506 tag-link-position-38" style="font-size: 10.016949152542pt;" aria-label="sua (258 itens)">sua</a> <a href="https://www.reviltec.com.br/tag/tavern" class="tag-cloud-link tag-link-45 tag-link-position-39" style="font-size: 9.4237288135593pt;" 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-40" style="font-size: 15.118644067797pt;" aria-label="uma (692 itens)">uma</a> <a href="https://www.reviltec.com.br/tag/usar" class="tag-cloud-link tag-link-260 tag-link-position-41" style="font-size: 8.2372881355932pt;" aria-label="usar (179 itens)">usar</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.389830508475pt;" aria-label="você (409 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: 9.4237288135593pt;" aria-label="vídeo (227 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.5423728813559pt;" aria-label="Wordpress (234 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: 19.271186440678pt;" 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.409090909091pt;" 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.590909090909pt;" 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.409090909091pt;" 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.590909090909pt;" 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.681818181818pt;" 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.391 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.636363636364pt;" aria-label="Tutoriais (1.989 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.818181818182pt;" aria-label="Wordpress (287 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.636363636364pt;" 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.jobclas.com" 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> <script type="text/javascript" src="https://www.reviltec.com.br/wp-includes/js/comment-reply.min.js?ver=6.5.2" id="comment-reply-js" async="async" data-wp-strategy="async"></script> </body> </html>