Este artigo foi publicado pela primeira vez na conta oficial: Mais AI (power_ai), bem-vindo para prestar atenção, programação e produtos secos AI serão entregues a tempo!
Introdução ao GitHub Copilot no Visual Studio Code
O GitHub Copilot é uma ferramenta de programação de par AI. É uma maneira elegante de dizer que é um "segundo programador" que trabalha dentro do seu editor de código-fonte. À medida que você escreve o código, o Copilot oferece sugestões na forma de preenchimento automático para ajudá-lo a escrever o código com mais rapidez e eficiência.
Este artigo orienta você na instalação e configuração do GitHub Copilot no Visual Studio Code. Em seguida, você aprenderá como usar o Copilot para acelerar o processo de programação.
Exigir
Para usar o GitHub Copilot, você precisa ter uma conta do GitHub. Se ainda não o fez, você pode se inscrever para uma conta no site oficial .
Antes de se inscrever no GitHub Copilot , verifique se você está conectado à sua conta do GitHub. O serviço oferece um teste gratuito de 30 dias, após o qual você precisará se inscrever em um dos planos pagos.
Se você não tem intenção de assinar um plano pago, cancele o GitHub Copilot antes do final da avaliação para evitar cobranças.
Finalmente, você precisa ter o Visual Studio Code instalado em sua máquina local. Para instalar o Visual Studio Code, visite a página oficial de download do VS Code .
Instale a extensão do GitHub Copilot
Primeiro, inicie o editor de código do Visual Studio. Em seguida, clique na guia Extensões . Pesquise por GitHub Copilot na caixa de pesquisa . Instale e ative a extensão (tem mais de 5 milhões de downloads até o momento):
Assim que a extensão estiver totalmente ativada, aparecerá um prompt solicitando que você faça login no GitHub. Clique no botão para fazer login. O processo de autenticação será rápido, pois você já está logado no GitHub e no GitHub Copilot. Se o processo for bem-sucedido, você encontrará o ícone Copilot no canto inferior direito do VS Code.
Faça uma pergunta técnica ao Copilot
Embora o Copilot seja cobrado como um assistente de codificação, você pode fazer perguntas técnicas diretamente. É perfeito se você estiver se preparando para uma entrevista técnica e quiser respostas rápidas para perguntas comuns em entrevistas.
Para fazer perguntas ao GitHub Copilot, coloque sua pergunta em um comentário começando com **:q**:
// q: 对象导向编程中的类是什么？
Depois de ver a sugestão do Copilot (esmaecida), pressione a tecla Tab no 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 pedir uma dessas respostas especificamente para obter mais informações sobre ela. O Copilot prevê o que você está prestes a perguntar e preenche automaticamente as perguntas para você.
Copiloto com HTML e CSS
Agora vamos voltar nossa atenção para a codificação, começando com um exemplo de HTML. O Copilot pode 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 o arquivo example1.html no VS Code .
Primeiro tipo ****Declaração de tipo de documento. Quando você pressiona Enter em seu teclado , o Copilot já sabe que a tag `` será a próxima óbvia a ser adicionada. Portanto, sugere adicionar guias (pressione Tab para aceitar).
Depois disso, o Copilot sugere que você adicione ，然后是. Ele fecha <head>, com certeza, <body>e <h1>tags e parágrafos são sugeridos para serem adicionados.
Se você deseja gerar um elemento, basta descrever o elemento que deseja gerar em um comentário e pressionar Tab . Aqui está um exemplo:
<!-- 一个内联蓝色标题的h1 -->
Isso irá gerar um elemento com texto azul <h1>:
<h1 style="color:blue">这是一个蓝色的标题</h1>
Você também pode pedir para criar uma lista com marcadores, usando as seguintes dicas:
<!-- 创建一个项目符号列表 -->
Aqui está o resultado:
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
Como prática recomendada, os estilos sempre devem estar em uma única folha de estilo. Crie um arquivo styles.css na mesma pasta que o arquivo HTML .
As dicas a seguir irão gerar elementos de link referenciando folhas de estilo. <head>Escreva esta dica dentro de uma tag em HTML :
<!-- 引用名为style.css的样式表 -->
Esta será a saída:
<link rel="stylesheet" type="text/css" href="style.css">
Se os arquivos de folha de estilo estiverem dentro de outra pasta, apenas descreva a estrutura do diretório em seu prompt e o Copilot usará hrefo URL correto nele.
Copilot ajuda com Bootstrap
Com um simples prompt "Adicionar Bootstrap", o Copilot gerará um link referenciando o Bootstrap no CDN. Isso é muito mais conveniente do que pesquisar na Web os links mais recentes para o Bootstrap.
O Copilot também aplica classes Bootstrap aos seus elementos. Quando você inicia um <div>elemento e pressiona a barra de espaço, o Copilot sabe que você provavelmente deseja adicionar alertuma alert-successclasse, então ele sugerirá adicionar.
<div class="alert alert-success">
<strong>成功!</strong>这个警告框代表了一个成功或积极的行动
</div>
Basta pressionar Tab para aceitar as sugestões.
Simplifique expressões regulares com o Copilot
Se você já trabalhou com expressões regulares, provavelmente sabe como é difícil decifrar esses padrões. Mas com o Copilot ao seu lado, escrever expressões regulares é muito mais fácil porque você pode pedir ao Copilot para escrever padrões específicos para você.
Por exemplo, se você deseja escrever uma expressão regular que corresponda a números de telefone, pode escrever o seguinte prompt em seu arquivo JavaScript:
// 用正则表达式匹配这种格式的电话号码 (xxx) xxx-xxxx
Se você pressionar Enter no teclado , o Copilot fornecerá a expressão regular solicitada:
var phoneRegex = /^\(\d{3}\) \d{3}-\d{4}$/;
As expressões regulares costumam ser usadas para testes, que é o assunto da próxima seção.
Copilot facilita o teste de unidade
O Copilot torna o teste de unidade muito fácil. Vejamos um exemplo.
A função a seguir pega uma string, verifica uma correspondência com uma expressão regular e analisa o primeiro e o último valores e, em seguida, concatena os números de acordo com o operador:
function calculator(str) {
var regex = /^\(\d{3}\) \d{3}-\d{4}$/;
var match = str.match(regex)
var num1 = parseInt(match[1])
var num2 = parseInt(match[3])
switch (match[2]) {
case "+":
return num1 + num2;
case "-":
return num1 - num2;
case "*":
return num1 * num2;
case "/":
return num1 / num2;
default:
return "无效的运算符";
}
}
Agora você pode dizer ao Copilot console.log()para testar a função com uma dica como esta:
// 测试 calculator 函数
O copiloto registrará cada operação e fornecerá a saída:
console.log("1+1") // 2
console.log("1-1") // 0
console.log("1*1") // 1
console.log("1/1") // 1
Para o prompt abaixo, o Copilot gerará código para unidade de teste da função:
// 创建 calculator 函数的单元测试
var assert = require("asser")
assert.equal(calculator("1+1"), 2, "calculator可以进行加法")
Além de gerar código, também sugere testes para outras operações além da adição.
Escolha entre várias soluções da Copilot
Até agora, vimos o Copilot dar alguns conselhos. Mas lembre-se sempre de que nem sempre você precisa escolher a primeira sugestão. Se não gostar da primeira opção, pode sempre escolher outra.
Considere as seguintes dicas:
// 创建一个函数，该函数接收一个字符串并返回其反向字符串
Comece a pressionar Tab para ver as sugestões. Se você não estiver satisfeito com a primeira sugestão, passe o mouse sobre o texto e navegue até a próxima solução (use o ícone ** >). Depois de encontrar uma solução aceitável, você pode clicar no botão Aceitar**.
Solicitando o copiloto com várias condições
Ao escrever o prompt do Copilot, você pode especificar várias condições. Isso é muito útil se você quiser escrever um programa complexo com regras diferentes.
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 (indicadas por comentários):
function parseExpenses(expenses) {
/* 解析费用清单并返回由三元组(日期、数值、货币)组成的数组。忽略以//开始的行。
使用Date()解析日期
*/
}
Aqui especificamos três condições: manifesto de análise, comentários ignorados, data de análise. Pressione Control-Enter e escolha a melhor solução entre as sugestões.
Quando testei, uma das sugestões foi:
return expenses.split("\n")
.filter(line => !line.startsWith("//"))
.map(line => line.split(","))
.map(([date, value, currency]) => [new Date(date), Number(value), currency]);
Isso é ótimo. Mas cuidado - algumas das sugestões feitas a mim usam <string> line[0]=="/"para testar quais linhas devem ser ignoradas. Não foi isso que pedimos!
Ao ler o código gerado pelo Copilot ou qualquer outra ferramenta de IA, é muito importante certificar-se de que ele faz o que você espera.
para concluir
Neste tutorial, aprendemos os fundamentos do uso do GitHub Copilot. Basta escrever sua dica nos comentários e pressionar Control-Enter para ver as sugestões.
Olá, sou Shisan, um piloto veterano que desenvolve há 7 anos e uma empresa estrangeira há 5 anos na Internet há 2 anos. Posso derrotar Ah San e Lao Mei e também fui arruinado por comentários de relações públicas. Ao longo dos anos, trabalhei meio período, abri um negócio, assumi o trabalho privado e misturei o trabalho. Ganhou dinheiro e perdeu dinheiro. Ao longo do caminho, meu sentimento mais profundo é que não importa o que você aprenda, você deve continuar aprendendo. Contanto que você possa perseverar, é fácil conseguir ultrapassagens nas curvas! Portanto, não me pergunte se é tarde demais para fazer o que faço agora. Se você ainda não tem uma direção, pode me seguir [conta pública: Mais AI (power_ai)], onde frequentemente compartilharei algumas informações de ponta e conhecimento de programação para ajudá-lo a acumular capital para curvas e ultrapassagens.