工欲善其事，必先利其器。對(duì)于前端開(kāi)發(fā)而言，使用VSCode已經(jīng)能夠極大地提高前端的開(kāi)發(fā)效率了。但有了AI加持后，前端開(kāi)發(fā)的效率又更上一層樓了！

本文采用的AI是通義靈碼插件提供的通義千問(wèn)大模型，是目前AI性能榜第一梯隊(duì)的存在！

簡(jiǎn)介

通義靈碼是由阿里云技術(shù)團(tuán)隊(duì)打造的智能編碼助手。它基于通義大模型，能夠提供：

• 代碼續(xù)寫(xiě)和優(yōu)化

• 自然語(yǔ)言描述生成代碼

• 注釋生成和代碼解釋

• 單元測(cè)試生成

• 研發(fā)智能問(wèn)答

• 代碼問(wèn)題修復(fù)等功能。

通義靈碼官網(wǎng)：https://tongyi.aliyun.com/lingma/

通義靈碼支持：JetBrains IDEs、Visual Studio Code、Visual Studio，及遠(yuǎn)程開(kāi)發(fā)場(chǎng)景（Remote SSH、Docker、WSL、Web IDE），安裝后登錄賬號(hào)即可開(kāi)始使用。

Jetbrains系列的ide都可以做前端開(kāi)發(fā)，但jetbrains系列的ide都比較耗費(fèi)性能，我們一般會(huì)選擇更加輕量的VSCode進(jìn)行前端開(kāi)發(fā)。

安裝指南

請(qǐng)確保你已經(jīng)安裝了VSCode，本文不再贅述安裝過(guò)程（詳見(jiàn)：Visual?Studio?Code 入門(mén)）。 VSCode三端的插件安裝方式基本一致，本文以Windows為例，介紹如何在VSCode中安裝通義靈碼插件。 對(duì)于VSCode而言,通義靈碼的使用非常簡(jiǎn)單，只需要在VSCode中安裝插件即可。在VSCode中打開(kāi)插件市場(chǎng)，搜索“?TONGYI Lingma?”即可找到插件，點(diǎn)擊安裝即可。
   
安裝完成后VSCode的左側(cè)會(huì)多出一個(gè)通義靈碼的圖標(biāo)，點(diǎn)擊即可進(jìn)入插件界面。


點(diǎn)擊立即登錄，同意用戶協(xié)議，會(huì)跳轉(zhuǎn)到登錄頁(yè)面。



通義靈碼支持多種登錄方式，包括賬號(hào)密碼登錄、手機(jī)號(hào)登錄、支付寶、阿里云、淘寶、釘釘?shù)卿洝?


登錄后即可使用通義靈碼的各項(xiàng)功能。

功能演示

代碼續(xù)寫(xiě)

通義靈碼提供了行級(jí)和函數(shù)級(jí)的代碼補(bǔ)全功能。該功能會(huì)在你進(jìn)行代碼編寫(xiě)時(shí)，根據(jù)當(dāng)前代碼文件及相關(guān)代碼文件的上下文，自動(dòng)為你生成行級(jí)/函數(shù)級(jí)的代碼建議，此時(shí)你可以使用快捷鍵采納、廢棄，或查看不同的代碼建議。

對(duì)于靜態(tài)頁(yè)面（HTML和CSS）開(kāi)發(fā)，這個(gè)功能或許比較雞肋，但對(duì)于JavaScript而言，這是一個(gè)極其強(qiáng)大的功能，我們可以通過(guò)該功能快速實(shí)現(xiàn)一些JS行為效果，也可以實(shí)現(xiàn)一些功能！

一般情況下AI會(huì)實(shí)時(shí)根據(jù)你的代碼生成后續(xù)的代碼，但有時(shí)候AI需要我們手動(dòng)觸發(fā)才能生成代碼建議，我們可以通過(guò)快捷鍵 ?alt+?P? 手動(dòng)觸發(fā)生成代碼建議。

開(kāi)發(fā)小提示：為了讓代碼補(bǔ)全功能更貼近我們想要的結(jié)果，我們可以先寫(xiě)代碼注釋描述其功能。例如上圖所示

通義靈碼提供了一組快捷鍵使用方式，可以更好的進(jìn)行代碼續(xù)寫(xiě)的控制：

在一些文件中可能不需要代碼續(xù)寫(xiě)功能，可以參考禁用行間生成。關(guān)閉對(duì)某類(lèi)文件的代碼續(xù)寫(xiě)功能

智能問(wèn)答

通義靈碼提供了智能問(wèn)答功能，它可以對(duì)你的問(wèn)題做出回答，你也可以讓他進(jìn)行代碼創(chuàng)作。我們可以通過(guò)這個(gè)功能來(lái)讓AI幫我們生成解決方案，或者讓AI實(shí)現(xiàn)某個(gè)功能的代碼案例。

基于智能問(wèn)答，還能實(shí)現(xiàn)很多有用的功能，比如后續(xù)的代碼注釋，代碼解釋，單元測(cè)試生成和代碼優(yōu)化，都是基于基于智能問(wèn)答實(shí)現(xiàn)的。

會(huì)話創(chuàng)建和清理

智能問(wèn)答是一個(gè)持續(xù)對(duì)話的過(guò)程，你可以持續(xù)進(jìn)行提問(wèn)，但大模型也會(huì)因此記錄你之前的提問(wèn)信息，可能會(huì)影響后續(xù)的回答，為了提高AI生成答案的質(zhì)量，應(yīng)該適時(shí)清理會(huì)話。

清理會(huì)話可以通過(guò)創(chuàng)建一個(gè)新會(huì)話或者清理來(lái)實(shí)現(xiàn)：

• 清理會(huì)話：在對(duì)話框中輸入/clearContext，然后點(diǎn)擊確定即可。

• 創(chuàng)建新會(huì)話：在智能問(wèn)答的右上角有一個(gè)圓形 ?+? 號(hào)按鈕，點(diǎn)擊即可創(chuàng)建新對(duì)話。

代碼小技巧

通義靈碼生成的代碼一般都會(huì)在右上角有這四個(gè)小按鈕，分別對(duì)應(yīng)著插入、復(fù)制、新建和合并的功能，后續(xù)的功能會(huì)用到這些小技巧。

• 插入 ：會(huì)把 AI 生成的代碼替換到我們選中的代碼位置，一般在代碼注釋和代碼優(yōu)化中應(yīng)用。

• 復(fù)制 ：則是復(fù)制 AI 生成的代碼，我們可以自己選擇插入的位置。

• 新建 ：則是新建一個(gè)文件，把 AI 生成的代碼放進(jìn)去，一般而言生成測(cè)試代碼會(huì)選擇新建一個(gè)文件夾存放。

• 合并 ：則是把代碼黏貼到文件中，比如黏貼到選中的代碼后，一般我們?cè)谥悄軉?wèn)答中得到我們需要的代碼可以用合并。

代碼注釋

通義靈碼提供了代碼注釋功能，它可以根據(jù)你的代碼生成對(duì)應(yīng)的注釋，方便代碼閱讀和維護(hù)。

也可以用快捷鍵shift+alt+V,或者右鍵菜單中也有代碼注釋功能。

會(huì)在左側(cè)顯示代碼注釋結(jié)果

一般情況下我們只在源代碼中寫(xiě)注釋，只在JavaScript的代碼中寫(xiě)注釋！

代碼解釋

代碼解釋與代碼注釋不同，注釋是為了讓代碼更易讀，而代碼解釋是告訴你代碼為什么這么寫(xiě)。 與代碼注釋相同，選中代碼后，點(diǎn)擊通義靈碼的代碼解釋按鈕，通義靈碼會(huì)根據(jù)你的代碼生成對(duì)應(yīng)的解釋。 

單元測(cè)試生成

對(duì)于JavaScript的代碼，有些工具函數(shù)（類(lèi)）是可以通過(guò)單元測(cè)試來(lái)確保代碼可靠性的（比如某些算法）如何編寫(xiě)質(zhì)量?jī)?yōu)秀的單元測(cè)試代碼對(duì)于并非測(cè)試專業(yè)的前端程序員來(lái)說(shuō)是一個(gè)挑戰(zhàn)，不過(guò)我們可以通過(guò)AI來(lái)幫我們進(jìn)行代碼測(cè)試。

通義靈碼可以根據(jù)我們的代碼，設(shè)計(jì)對(duì)應(yīng)的測(cè)試用例。

通義靈碼甚至還能貼心地生成對(duì)應(yīng)的測(cè)試代碼：

測(cè)試用例代碼一般是復(fù)制后到一個(gè)專門(mén)的測(cè)試用例文件中，方便后續(xù)測(cè)試。也可以用新建文件，通義靈碼會(huì)再幫你創(chuàng)建一個(gè)測(cè)試用例文件。

代碼優(yōu)化

代碼開(kāi)發(fā)很難做到面面俱到，單人開(kāi)發(fā)往往容易疏漏。傳統(tǒng)開(kāi)發(fā)為了避免這種因個(gè)人主觀原因?qū)е碌拇a疏漏，會(huì)定期組織代碼評(píng)審，或者讓開(kāi)發(fā)者結(jié)對(duì)編程，互相審核對(duì)方的代碼?，F(xiàn)在有了通義靈碼，提供了一種新的方向：使用AI進(jìn)行代碼審查和優(yōu)化。

AI不僅能給出審查結(jié)果，提供優(yōu)化思路，甚至還能給出優(yōu)化的代碼：

代碼優(yōu)化一般使用合并（diff）操作來(lái)把原代碼替換成優(yōu)化后的代碼。

AI程序員

智能問(wèn)答往往基于單個(gè)文件或者部分代碼片段，而通義靈碼提供了AI程序員的功能，它基于整個(gè)項(xiàng)目，有些時(shí)候?qū)崿F(xiàn)某個(gè)功能需要多個(gè)代碼文件一起修改，AI程序員就能輕松勝任！

可以看見(jiàn)ai幫你生成了一些代碼，但最后你還得自行選擇是否接受他生成的代碼，最終決定權(quán)還在你自己。

AI前端程序員

AI程序員還有另一種用法。現(xiàn)在我們也可以給AI一張網(wǎng)站的圖片，讓AI根據(jù)圖片進(jìn)行代碼實(shí)現(xiàn)了！