Este artículo se publicó por primera vez en la cuenta oficial: ¡Más IA (power_ai), bienvenido a prestar atención, la programación y los productos secos de IA se entregarán a tiempo!
Comience con GitHub Copilot en Visual Studio Code
GitHub Copilot es una herramienta de programación de pares de IA. Es una forma elegante de decir que es un "segundo programador" que funciona dentro de su editor de código fuente. A medida que escribe código, Copilot le dará sugerencias en forma de autocompletado para ayudarlo a escribir código de manera más rápida y eficiente.
Este artículo lo guía a través de la instalación y configuración de GitHub Copilot en Visual Studio Code. Luego, aprenderá a usar Copilot para acelerar el proceso de programación.
Requerir
Para usar GitHub Copilot, debe tener una cuenta de GitHub. Si aún no lo ha hecho, puede registrarse para obtener una cuenta en el sitio web oficial .
Antes de registrarse en GitHub Copilot , asegúrese de haber iniciado sesión en su cuenta de GitHub. El servicio ofrece una prueba gratuita de 30 días, después de lo cual deberá suscribirse a uno de los planes pagos.
Si no tiene intención de suscribirse a un plan pago, cancele GitHub Copilot antes de que finalice la prueba para evitar que se le facture.
Finalmente, debe tener instalado Visual Studio Code en su máquina local. Para instalar Visual Studio Code, visite la página oficial de descarga de VS Code .
Instalar la extensión GitHub Copilot
Primero, inicie su editor de Visual Studio Code. A continuación, haga clic en la pestaña Extensiones . Busque GitHub Copilot en el cuadro de búsqueda . Instale y active la extensión (tiene más de 5 millones de descargas al momento de escribir):
Una vez que la extensión esté completamente activada, aparecerá un mensaje que le indicará que inicie sesión en GitHub. Haga clic en el botón para iniciar sesión. El proceso de autenticación será rápido ya que ya inició sesión en GitHub y GitHub Copilot. Si el proceso fue exitoso, encontrará el ícono de Copilot en la esquina inferior derecha de VS Code.
Haz una pregunta técnica a Copilot
Aunque Copilot se factura como un asistente de codificación, puede hacerle preguntas técnicas directamente. Es perfecto si se está preparando para una entrevista técnica y desea respuestas rápidas a preguntas comunes de entrevistas.
Para hacer preguntas a GitHub Copilot, escribe tu pregunta en un comentario que comience con **:q**:
// q: 对象导向编程中的类是什么？
Una vez que vea la sugerencia de Copilot (en gris), presione la tecla Tab en su teclado para aceptarla como su respuesta. La respuesta va precedida de **:a**. La tecla Tab funciona tanto en computadoras Windows como Mac.
También puede solicitar una de estas respuestas específicamente para obtener más información al respecto. Copilot predice lo que está a punto de preguntar y autocompleta las preguntas por usted.
Copiloto con HTML y CSS
Ahora dirijamos nuestra atención a la codificación, comenzando con un ejemplo de HTML. Copilot puede ayudar a acelerar el proceso de escritura de HTML. Veamos cómo.
Cree dos archivos HTML en su proyecto. Los archivos deben llamarse ejemplo1.html y ejemplo2.html . A continuación, abra el archivo example1.html en VS Code .
Primer tipo ****Declaración de tipo de documento. Cuando presiona Intro en su teclado , Copilot ya sabe que la etiqueta `` será la próxima obvia en agregar. Por lo tanto, sugiere agregar pestañas (presione Tab para aceptar).
Después de eso, Copilot sugiere que agregue ，然后是. Se cierra <head>, por supuesto, <body>y <h1>se sugiere agregar etiquetas y párrafos.
Si desea generar un elemento, simplemente describa el elemento que desea generar en un comentario y presione Tabulador . Aquí hay un ejemplo:
<!-- 一个内联蓝色标题的h1 -->
Esto generará un elemento con texto azul <h1>:
<h1 style="color:blue">这是一个蓝色的标题</h1>
También puede solicitar crear una lista con viñetas, utilizando los siguientes consejos:
<!-- 创建一个项目符号列表 -->
Aquí está el resultado:
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
Como práctica recomendada, los estilos siempre deben estar en una sola hoja de estilo. Cree un archivo styles.css en la misma carpeta que el archivo HTML .
Las siguientes sugerencias generarán elementos de enlace que hacen referencia a hojas de estilo. <head>Escriba esta sugerencia dentro de una etiqueta en HTML :
<!-- 引用名为style.css的样式表 -->
Esta será la salida:
<link rel="stylesheet" type="text/css" href="style.css">
Si los archivos de la hoja de estilo están dentro de otra carpeta, simplemente describa la estructura del directorio en su mensaje y Copilot usará hrefla URL correcta en él.
Copilot ayuda con Bootstrap
Con un simple aviso de "Agregar Bootstrap", Copilot generará un enlace que hace referencia a Bootstrap en la CDN. Esto es mucho más conveniente que buscar en la web los últimos enlaces a Bootstrap.
Copilot también aplica clases de Bootstrap a sus elementos. Cuando inicia un <div>elemento y presiona la barra espaciadora, Copilot sabe que lo más probable es que desee agregar alerty alert-successclasificar, por lo que sugerirá agregar.
<div class="alert alert-success">
<strong>成功!</strong>这个警告框代表了一个成功或积极的行动
</div>
Simplemente presione Tabulador para aceptar sugerencias.
Simplifica expresiones regulares con Copilot
Si alguna vez ha trabajado con expresiones regulares, probablemente sepa lo difícil que es descifrar estos patrones. Pero con Copilot a su lado, escribir expresiones regulares es mucho más fácil porque puede pedirle a Copilot que escriba patrones específicos para usted.
Por ejemplo, si desea escribir una expresión regular que coincida con los números de teléfono, puede escribir el siguiente mensaje en su archivo JavaScript:
// 用正则表达式匹配这种格式的电话号码 (xxx) xxx-xxxx
Si presiona Enter en su teclado , Copilot le dará la expresión regular que solicitó:
var phoneRegex = /^\(\d{3}\) \d{3}-\d{4}$/;
Las expresiones regulares se utilizan a menudo para realizar pruebas, que es de lo que trata la siguiente sección.
Copilot facilita las pruebas unitarias
Copilot hace que las pruebas unitarias sean muy fáciles. Veamos un ejemplo.
La siguiente función toma una cadena, busca una coincidencia con una expresión regular y analiza el primer y el último valor, luego concatena los números de acuerdo con el 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 "无效的运算符";
}
}
Ahora puede decirle a Copilot console.log()que pruebe la función con una pista como esta:
// 测试 calculator 函数
Copilot registrará cada operación y dará salida:
console.log("1+1") // 2
console.log("1-1") // 0
console.log("1*1") // 1
console.log("1/1") // 1
Para el siguiente aviso, Copilot generará un código para la prueba unitaria de la función:
// 创建 calculator 函数的单元测试
var assert = require("asser")
assert.equal(calculator("1+1"), 2, "calculator可以进行加法")
No solo genera código, sino que también sugiere pruebas para otras operaciones además de la suma.
Elija entre múltiples soluciones de Copilot
Hasta ahora, hemos visto a Copilot dar algunos consejos. Pero recuerda siempre que no siempre tienes que elegir la primera sugerencia. Si no te gusta la primera opción, siempre puedes elegir otra.
Considere los siguientes consejos:
// 创建一个函数，该函数接收一个字符串并返回其反向字符串
Comience a presionar Tabulador para ver sugerencias. Si no está satisfecho con la primera sugerencia, desplace el cursor sobre el texto y navegue hasta la siguiente solución (utilice el icono ** >). Una vez que encuentre una solución aceptable, puede hacer clic en el botón Aceptar**.
Incitando a Copilot con múltiples condiciones
Al escribir su aviso de Copilot, puede especificar múltiples condiciones. Esto es muy útil si desea escribir un programa complejo con diferentes reglas.
Digamos que desea analizar una lista de gastos con algunas condiciones. Dentro de la función, le pedirá a Copilot que haga tres cosas en su aviso (indicado por comentarios):
function parseExpenses(expenses) {
/* 解析费用清单并返回由三元组(日期、数值、货币)组成的数组。忽略以//开始的行。
使用Date()解析日期
*/
}
Aquí hemos especificado tres condiciones: analizar el manifiesto, ignorar los comentarios, analizar la fecha. Presione Control-Enter y elija la mejor solución de las sugerencias.
Cuando probé, una de las sugerencias fue:
return expenses.split("\n")
.filter(line => !line.startsWith("//"))
.map(line => line.split(","))
.map(([date, value, currency]) => [new Date(date), Number(value), currency]);
Genial. Pero cuidado: algunas de las sugerencias que me han hecho usan <string> line[0]=="/"para probar qué líneas deben ignorarse. ¡Esto no es lo que pedimos!
Al leer el código generado por Copilot o cualquier otra herramienta de IA, es muy importante asegurarse de que hace lo que espera.
en conclusión
En este tutorial, aprendimos los conceptos básicos del uso de GitHub Copilot. Simplemente escriba su sugerencia en los comentarios y presione Control-Enter para ver las sugerencias.
Hola, soy Shisan, un conductor veterano que se ha desarrollado durante 7 años y una empresa extranjera durante 5 años en Internet durante 2 años. Puedo vencer a Ah San y Lao Mei, y también me han arruinado los comentarios de relaciones públicas. A lo largo de los años, trabajé a tiempo parcial, comencé un negocio, me hice cargo del trabajo privado y mezclé el trabajo. Ganó dinero y perdió dinero. En el camino, mi sentimiento más profundo es que no importa lo que aprendas, debes seguir aprendiendo. ¡Mientras puedas perseverar, es fácil lograr adelantar en las curvas! Así que no me preguntes si es demasiado tarde para hacer lo que hago ahora. Si aún no tiene una dirección, puede seguirme [cuenta pública: Más IA (power_ai)], donde a menudo compartiré información de vanguardia y conocimientos de programación para ayudarlo a acumular capital para tomar curvas y adelantar.