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

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

簡介

通義靈碼是由阿里云技術團隊打造的智能編碼助手。它基于通義大模型，能夠提供：

• 代碼續寫和優化

• 自然語言描述生成代碼

• 注釋生成和代碼解釋

• 單元測試生成

• 研發智能問答

• 代碼問題修復等功能。

通義靈碼官網：https://tongyi.aliyun.com/lingma/

通義靈碼支持：JetBrains?IDEs、Visual?Studio?Code、Visual?Studio，及遠程開發場景（Remote?SSH、Docker、WSL、Web?IDE），安裝后登錄賬號即可開始使用。

Jetbrains系列的ide都可以做前端開發，但jetbrains系列的ide都比較耗費性能，我們一般會選擇更加輕量的VSCode進行前端開發。

安裝指南

請確保你已經安裝了VSCode，本文不再贅述安裝過程（詳見：Visual?Studio?Code?入門）。?VSCode三端的插件安裝方式基本一致，本文以Windows為例，介紹如何在VSCode中安裝通義靈碼插件。?對于VSCode而言,通義靈碼的使用非常簡單，只需要在VSCode中安裝插件即可。在VSCode中打開插件市場，搜索“TONGYI?Lingma”即可找到插件，點擊安裝即可。
???

安裝完成后VSCode的左側會多出一個通義靈碼的圖標，點擊即可進入插件界面。

點擊立即登錄，同意用戶協議，會跳轉到登錄頁面。

通義靈碼支持多種登錄方式，包括賬號密碼登錄、手機號登錄、支付寶、阿里云、淘寶、釘釘登錄。

登錄后即可使用通義靈碼的各項功能。

功能演示

代碼續寫

通義靈碼提供了行級和函數級的代碼補全功能。該功能會在你進行代碼編寫時，根據當前代碼文件及相關代碼文件的上下文，自動為你生成行級/函數級的代碼建議，此時你可以使用快捷鍵采納、廢棄，或查看不同的代碼建議。

對于靜態頁面（HTML和CSS）開發，這個功能或許比較雞肋，但對于JavaScript而言，這是一個極其強大的功能，我們可以通過該功能快速實現一些JS行為效果，也可以實現一些功能！

一般情況下AI會實時根據你的代碼生成后續的代碼，但有時候AI需要我們手動觸發才能生成代碼建議，我們可以通過快捷鍵?alt+P?手動觸發生成代碼建議。

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

通義靈碼提供了一組快捷鍵使用方式，可以更好的進行代碼續寫的控制：

操作	macOS	Windows
接受行間代碼建議	Tab	Tab
廢棄行間代碼建議	esc	esc
查看上一個行間推薦結果	?(option)?+?[	Alt+[
查看下一個行間推薦結果	?(option)+]	Alt+]
手動觸發行間代碼建議	?(option)+P	Alt+P

在一些文件中可能不需要代碼續寫功能，可以參考++禁用行間生成++。關閉對某類文件的代碼續寫功能

智能問答

通義靈碼提供了智能問答功能，它可以對你的問題做出回答，你也可以讓他進行代碼創作。我們可以通過這個功能來讓AI幫我們生成解決方案，或者讓AI實現某個功能的代碼案例。

基于智能問答，還能實現很多有用的功能，比如后續的代碼注釋，代碼解釋，單元測試生成和代碼優化，都是基于基于智能問答實現的。

會話創建和清理

智能問答是一個持續對話的過程，你可以持續進行提問，但大模型也會因此記錄你之前的提問信息，可能會影響后續的回答，為了提高AI生成答案的質量，應該適時清理會話。

清理會話可以通過創建一個新會話或者清理來實現：

• 清理會話：在對話框中輸入/clearContext，然后點擊確定即可。

• **創建新會話：**在智能問答的右上角有一個圓形??+??號按鈕，點擊即可創建新對話。

代碼小技巧

通義靈碼生成的代碼一般都會在右上角有這四個小按鈕，分別對應著插入、復制、新建和合并的功能，后續的功能會用到這些小技巧。

• 插入?：會把?AI?生成的代碼替換到我們選中的代碼位置，一般在代碼注釋和代碼優化中應用。

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

• 新建?：則是新建一個文件，把?AI?生成的代碼放進去，一般而言生成測試代碼會選擇新建一個文件夾存放。

• 合并?：則是把代碼黏貼到文件中，比如黏貼到選中的代碼后，一般我們在智能問答中得到我們需要的代碼可以用合并。

代碼注釋

通義靈碼提供了代碼注釋功能，它可以根據你的代碼生成對應的注釋，方便代碼閱讀和維護。

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

會在左側顯示代碼注釋結果

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

代碼解釋

代碼解釋與代碼注釋不同，注釋是為了讓代碼更易讀，而代碼解釋是告訴你代碼為什么這么寫。?與代碼注釋相同，選中代碼后，點擊通義靈碼的代碼解釋按鈕，通義靈碼會根據你的代碼生成對應的解釋。

單元測試生成

對于JavaScript的代碼，有些工具函數（類）是可以通過單元測試來確保代碼可靠性的（比如某些算法）如何編寫質量優秀的單元測試代碼對于并非測試專業的前端程序員來說是一個挑戰，不過我們可以通過AI來幫我們進行代碼測試。

通義靈碼可以根據我們的代碼，設計對應的測試用例。

通義靈碼甚至還能貼心地生成對應的測試代碼：

測試用例代碼一般是復制后到一個專門的測試用例文件中，方便后續測試。也可以用新建文件，通義靈碼會再幫你創建一個測試用例文件。

代碼優化

代碼開發很難做到面面俱到，單人開發往往容易疏漏。傳統開發為了避免這種因個人主觀原因導致的代碼疏漏，會定期組織代碼評審，或者讓開發者結對編程，互相審核對方的代碼。現在有了通義靈碼，提供了一種新的方向：使用AI進行代碼審查和優化。

AI不僅能給出審查結果，提供優化思路，甚至還能給出優化的代碼：

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

AI程序員

智能問答往往基于單個文件或者部分代碼片段，而通義靈碼提供了AI程序員的功能，它基于整個項目，有些時候實現某個功能需要多個代碼文件一起修改，AI程序員就能輕松勝任！

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

AI前端程序員

AI程序員還有另一種用法。現在我們也可以給AI一張網站的圖片，讓AI根據圖片進行代碼實現了！