JavaScript AI 通義靈碼 VSCode插件安裝與功能詳解

簡(jiǎn)介

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

• 代碼續(xù)寫和優(yōu)化
• 自然語言描述生成代碼
• 注釋生成和代碼解釋
• 單元測(cè)試生成
• 研發(fā)智能問答
• 代碼問題修復(fù)等功能。

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

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

對(duì)于JavaScript開發(fā)者而言，最常見的開發(fā)環(huán)境就是VSCode，因此本文將介紹如何在VSCode中安裝配置通義靈碼，并演示其功能。

安裝指南

請(qǐng)確保你已經(jīng)安裝了VSCode，本文不再贅述安裝過程（詳見：Visual Studio Code 入門）。 VSCode三端的插件安裝方式基本一致，本文以Windows為例，介紹如何在VSCode中安裝通義靈碼插件。 對(duì)于VSCode而言,通義靈碼的使用非常簡(jiǎn)單，只需要在VSCode中安裝插件即可。

1. 使用插件市場(chǎng)安裝 通義靈碼已上架VSCode插件市場(chǎng)，在VSCode中打開插件市場(chǎng)，搜索“?TONGYI Lingma?”即可找到插件，點(diǎn)擊安裝即可。
     
2. 使用插件安裝包安裝 單擊下方鏈接，下載 Visual Studio Code 的 VSIX 安裝包；
   ? TONGYI Lingma-VS Code
   下載完成后，打開 VSCode，點(diǎn)擊左側(cè)的擴(kuò)展圖標(biāo)，點(diǎn)擊“從VSIX安裝”，選擇下載好的 VSIX 文件即可。
   
   安裝完成后VSCode的左側(cè)會(huì)多出一個(gè)通義靈碼的圖標(biāo)，點(diǎn)擊即可進(jìn)入插件界面。
   
   
   點(diǎn)擊立即登錄，同意用戶協(xié)議，會(huì)跳轉(zhuǎn)到登錄頁面。
   
   
   
   通義靈碼支持多種登錄方式，包括賬號(hào)密碼登錄、手機(jī)號(hào)登錄、支付寶、阿里云、淘寶、釘釘?shù)卿洝?
   
   
   登錄后即可使用通義靈碼的各項(xiàng)功能。

功能演示

代碼續(xù)寫

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

同時(shí)，當(dāng)你在編碼的過程中，也可以通過快捷鍵 ??? ?P? 手動(dòng)觸發(fā)生成代碼建議。

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

編輯器中代碼建議相關(guān)操作的快捷鍵如下：

并不是所有的代碼文件都需要使用代碼提示，比如在調(diào)試css的時(shí)候我們不希望出現(xiàn)代碼提示，這時(shí)候就可以禁用行間生成。

代碼注釋

通義靈碼提供了代碼注釋功能，它可以根據(jù)你的代碼生成對(duì)應(yīng)的注釋，方便代碼閱讀和維護(hù)。 使用代碼注釋需要先選中需要注釋的代碼,代碼左上角會(huì)出現(xiàn)一個(gè)按鈕，點(diǎn)擊即可選擇代碼注釋功能。

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

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

我們可以通過通義靈碼給我們返回的代碼塊右上角的按鈕進(jìn)行操作。 包括插入，復(fù)制，新建和合并（diff）操作，一般注釋是使用插入來把原代碼替換成有注釋的代碼。

代碼解釋

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

單元測(cè)試生成

對(duì)于軟件開發(fā)而言，測(cè)試是極其重要的，甚至有測(cè)試用例先行的情況。通義靈碼提供了生成代碼的單元測(cè)試的功能，并告訴你為什么要測(cè)試這些用例。 與代碼注釋相同，選中代碼后，點(diǎn)擊通義靈碼的生成單元測(cè)試代碼，通義靈碼會(huì)根據(jù)你的代碼生成對(duì)應(yīng)的單元測(cè)試代碼。

它還會(huì)告訴你為什么要測(cè)試這些用例。

生成的測(cè)試用例代碼

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

代碼優(yōu)化

單個(gè)人進(jìn)行開發(fā)很難做到面面俱到，偶爾會(huì)出現(xiàn)一些代碼遺漏的地方，比如錯(cuò)誤處理，邊界值處理和參數(shù)校驗(yàn)等。在團(tuán)隊(duì)開發(fā)中通常會(huì)存在結(jié)對(duì)編程互審代碼或者團(tuán)隊(duì)代碼 reviews?，F(xiàn)在有了通義靈碼，你可以通過通義靈碼來輔助你進(jìn)行代碼優(yōu)化，比如代碼錯(cuò)誤處理，邊界值處理和參數(shù)校驗(yàn)等。

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

智能問答

通義靈碼提供了智能問答功能，它可以對(duì)你的問題做出回答，你也可以讓他進(jìn)行代碼創(chuàng)作。

實(shí)際上在之前的功能中也有智能問答的展示，之前的很多功能都是基于智能問答實(shí)現(xiàn)的，他們只不過是在智能問答的時(shí)候輸入了合適的上下文（甚至是文件），以單元測(cè)試生成為例，實(shí)際上就是向智能問答提問：這段代碼的單元測(cè)試用例怎么寫。

智能問答現(xiàn)在可以選擇不同的大模型了，可以選擇通千問的大模型，也可以選擇時(shí)下很火的deep seek 大模型。

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

智能問答是一個(gè)持續(xù)對(duì)話的過程，你可以持續(xù)進(jìn)行提問，但大模型也會(huì)因此記錄你之前的提問信息，可能會(huì)影響后續(xù)的回答，比如你一直在問JavaScript如何使用循環(huán)，突然想了解多線程相關(guān)的內(nèi)容，智能問答會(huì)認(rèn)為你想了解的是JavaScript的多線程，并繼續(xù)進(jìn)行回答。 可以通過會(huì)話創(chuàng)建和清理來清理大模型記錄的提問信息，你可以選擇會(huì)話創(chuàng)建和清理，也可以選擇會(huì)話清理。 清理會(huì)話：在對(duì)話框中輸入/clearContext，然后點(diǎn)擊確定即可。 創(chuàng)建新會(huì)話：在對(duì)話框中中輸入/newTask，然后點(diǎn)擊確定即可。

AI程序員

AI程序員是用來幫助開發(fā)者進(jìn)行編碼工作的，它可以通過對(duì)話的方式 根據(jù)你的需求描述和要求，對(duì)整個(gè)項(xiàng)目進(jìn)行代碼開發(fā)，代碼審查和代碼變更。 換句話說，現(xiàn)在你才是產(chǎn)品經(jīng)理，你來指導(dǎo)ai進(jìn)行代碼開發(fā)，你可以要求ai創(chuàng)建一個(gè)項(xiàng)目

也可以讓ai生成一些代碼

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