本文首發(fā)于公眾號：更AI (power_ai)，歡迎關(guān)注，編程、AI干貨及時送!
在Visual Studio Code中開始使用GitHub Copilot
GitHub Copilot是一個AI配對編程工具。這是一個花哨的說法，稱它為"第二程序員"，它在你的源代碼編輯器內(nèi)部工作。在你編寫代碼時，Copilot會以自動完成的方式給出建議，幫助你更快、更有效地編寫代碼。
本文將引導(dǎo)你安裝并設(shè)置在Visual Studio Code中的GitHub Copilot。然后，你將學(xué)習(xí)如何使用Copilot來加快編程過程。
要求
要使用GitHub Copilot，你需要有一個GitHub賬戶。如果你還沒有，你可以在官方網(wǎng)站上注冊一個賬戶。
在注冊GitHub Copilot之前，請確保你已經(jīng)登錄到你的GitHub賬戶。該服務(wù)提供30天的免費(fèi)試用，之后你需要訂閱其中一個付費(fèi)計(jì)劃。
如果你無意訂閱付費(fèi)計(jì)劃，那么請?jiān)谠囉媒Y(jié)束前取消GitHub Copilot，以避免收到賬單。
最后，你需要在你的本地機(jī)器上安裝Visual Studio Code。要安裝Visual Studio Code，訪問官方VS Code下載頁面。
安裝GitHub Copilot擴(kuò)展
首先，啟動你的Visual Studio Code編輯器。接下來，點(diǎn)擊Extensions標(biāo)簽。在搜索框中搜索GitHub Copilot。安裝并激活擴(kuò)展（在撰寫此文時，該擴(kuò)展已有超過500萬的下載量）：
一旦擴(kuò)展完全激活，將出現(xiàn)一個提示，告訴你登錄GitHub。點(diǎn)擊按鈕登錄。認(rèn)證過程會很快，因?yàn)槟阋呀?jīng)登錄了GitHub和GitHub Copilot。如果過程成功，你將在VS Code的右下角找到Copilot圖標(biāo)。
向Copilot提出技術(shù)問題
雖然Copilot被稱為編碼助手，但你可以直接向它提出技術(shù)問題。如果你正在為技術(shù)面試做準(zhǔn)備，想快速得到常見面試問題的答案，這是非常完美的。
要向GitHub Copilot提問，將你的問題放在以**:q**開始的注釋中：
// q: 對象導(dǎo)向編程中的類是什么？
一旦你看到Copilot的建議(灰色)，點(diǎn)擊鍵盤上的Tab鍵接受它作為你的答案。答案前面有**:a**。Tab鍵在Windows和Mac電腦上都有效。
你也可以專門詢問其中的一個答案以獲取更多關(guān)于它的信息。Copilot會預(yù)測你即將提問的內(nèi)容，并為你自動完成問題。
使用HTML和CSS的Copilot
現(xiàn)在讓我們將注意力轉(zhuǎn)向編碼，從一個HTML示例開始。Copilot可以幫助加快編寫HTML的過程。讓我們看看如何操作。
在你的項(xiàng)目中創(chuàng)建兩個HTML文件。文件應(yīng)命名為example1.html和example2.html。接下來，在VS Code中打開example1.html文件。
首先鍵入****文檔類型聲明。當(dāng)你在鍵盤上點(diǎn)擊Enter時，Copilot已經(jīng)知道``標(biāo)簽將是下一個明顯要添加的標(biāo)簽。所以它建議添加標(biāo)簽（點(diǎn)擊Tab接受）。
在那之后，Copilot建議你添加，然后是。它關(guān)閉<head>，果然，<body>和<h1>標(biāo)簽以及段落被建議添加。
如果你想生成一個元素，你只需在注釋中描述你想生成的元素，然后按Tab。這是一個例子：
<!-- 一個內(nèi)聯(lián)藍(lán)色標(biāo)題的h1 -->
這將生成一個文本為藍(lán)色的<h1>元素：
<h1 style="color:blue">這是一個藍(lán)色的標(biāo)題</h1>
你還可以要求創(chuàng)建一個項(xiàng)目符號列表，使用以下提示：
<!-- 創(chuàng)建一個項(xiàng)目符號列表 -->
這是結(jié)果：
<ul>
<li>第一項(xiàng)</li>
<li>第二項(xiàng)</li>
<li>第三項(xiàng)</li>
</ul>
按照最佳實(shí)踐，樣式應(yīng)始終在一個單獨(dú)的樣式表中。在與HTML文件同一個文件夾中創(chuàng)建一個styles.css文件。
以下提示將生成引用樣式表的鏈接元素。在HTML中的<head>標(biāo)簽內(nèi)寫下這個提示：
<!-- 引用名為style.css的樣式表 -->
這將是輸出：
<link rel="stylesheet" type="text/css" href="style.css">
如果樣式表文件在另一個文件夾內(nèi)，只需在你的提示中描述目錄結(jié)構(gòu)，Copilot將在href中使用正確的URL。
Copilot幫助使用Bootstrap
只需一個簡單的"添加Bootstrap"提示，Copilot就會生成一個引用CDN上的Bootstrap的鏈接。這比在網(wǎng)上搜索Bootstrap的最新鏈接要方便得多。
Copilot還會將Bootstrap類應(yīng)用到你的元素上。當(dāng)你開始一個<div>元素并按空格鍵時，Copilot知道你最可能想添加alert和alert-success類，所以它會建議添加。
<div class="alert alert-success">
<strong>成功!</strong>這個警告框代表了一個成功或積極的行動
</div>
只需按Tab鍵即可接受建議。
使用Copilot簡化正則表達(dá)式
如果你曾經(jīng)使用過正則表達(dá)式，那你可能知道解讀這些模式有多么困難。但是有了Copilot在身邊，編寫正則表達(dá)式會容易很多，因?yàn)槟憧梢宰孋opilot為你編寫特定的模式。
例如，如果你想寫一個匹配電話號碼的正則表達(dá)式，你可以在JavaScript文件中寫下以下的提示：
// 用正則表達(dá)式匹配這種格式的電話號碼 (xxx) xxx-xxxx
如果你在鍵盤上按Enter鍵，Copilot會給你提供你請求的正則表達(dá)式：
var phoneRegex = /^\(\d{3}\) \d{3}-\d{4}$/;
正則表達(dá)式通常用于測試，這就是下一部分要講的內(nèi)容。
Copilot讓單元測試變得簡單
Copilot讓單元測試變得非常容易。讓我們看一個例子。
以下函數(shù)接收一個字符串，檢查是否匹配正則表達(dá)式，并解析第一個和最后一個值，然后根據(jù)操作符連接數(shù)字：
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 "無效的運(yùn)算符";
}
}
現(xiàn)在你可以告訴Copilot使用**** console.log() 這樣的提示來測試該函數(shù)：
// 測試 calculator 函數(shù)
Copilot將記錄每一次的操作并給出輸出：
console.log("1+1") // 2
console.log("1-1") // 0
console.log("1*1") // 1
console.log("1/1") // 1
對于下面的提示，Copilot將生成用于單元測試該函數(shù)的代碼：
// 創(chuàng)建 calculator 函數(shù)的單元測試
var assert = require("asser")
assert.equal(calculator("1+1"), 2, "calculator可以進(jìn)行加法")
它不僅會生成代碼，還會建議測試除加法之外的其他運(yùn)算。
由Copilot從多個解決方案中進(jìn)行選擇
到目前為止，我們已經(jīng)看到Copilot給出了一些建議。但請始終記住，你并不總是必須選擇第一個建議。如果你不喜歡第一個方案，你總是可以選擇另一個。
考慮以下提示：
// 創(chuàng)建一個函數(shù)，該函數(shù)接收一個字符串并返回其反向字符串
開始按Tab鍵查看建議。如果你對第一個建議不滿意，將鼠標(biāo)懸停在文本上并導(dǎo)航至下一個解決方案（使用** > 圖標(biāo)）。一旦你找到一個可接受的解決方案，你可以點(diǎn)擊接受**按鈕。
使用多個條件提示Copilot
在撰寫你的Copilot提示時，你可以指定多個條件。如果你想編寫一個具有不同規(guī)則的復(fù)雜程序，這是非常有用的。
假設(shè)你想解析一份有一些條件的費(fèi)用清單。在函數(shù)內(nèi)部，你會在你的提示中（由注釋表示）要求Copilot做三件事：
function parseExpenses(expenses) {
/* 解析費(fèi)用清單并返回由三元組(日期、數(shù)值、貨幣)組成的數(shù)組。忽略以//開始的行。
使用Date()解析日期
*/
}
在這里我們指定了三個條件：解析清單、忽略注釋、解析日期。按Control-Enter鍵，并從建議中選擇最佳解決方案。
當(dāng)我測試時，其中一個建議是：
return expenses.split("\n")
.filter(line => !line.startsWith("http://"))
.map(line => line.split(","))
.map(([date, value, currency]) => [new Date(date), Number(value), currency]);
這很不錯。但是要注意——一些對我提出的建議使用了 line[0]=="/" 來測試哪些行應(yīng)該被忽略。這并不是我們要求的！
閱讀由Copilot或其他任何AI工具生成的代碼時，確保其符合你的期望是非常重要的。
結(jié)論
在本教程中，我們了解了使用GitHub Copilot的基礎(chǔ)知識。只需在注釋中寫下你的提示，然后按Control-Enter鍵查看建議。文章來源：http://www.zghlxwxcb.cn/news/detail-595051.html
你好，我是拾叁，7年開發(fā)老司機(jī)、互聯(lián)網(wǎng)兩年外企5年。懟得過阿三老美，也被PR comments搞崩潰過。這些年我打過工，創(chuàng)過業(yè)，接過私活，也混過upwork。賺過錢也虧過錢。一路過來，給我最深的感受就是不管學(xué)什么，一定要不斷學(xué)習(xí)。只要你能堅(jiān)持下來，就很容易實(shí)現(xiàn)彎道超車！所以，不要問我現(xiàn)在干什么是否來得及。如果你還沒什么方向，可以先關(guān)注我[公眾號：更AI (power_ai)]，這里會經(jīng)常分享一些前沿資訊和編程知識，幫你積累彎道超車的資本。文章來源地址http://www.zghlxwxcb.cn/news/detail-595051.html
到了這里，關(guān)于如何在VS Code中運(yùn)用GitHub Copilot提高編程效率的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
