如何使用AI輔助開(kāi)發(fā)HTML5 - 通義靈碼功能全解析

HTML5 作為最新的 HTML 標(biāo)準(zhǔn)，其新增的標(biāo)簽和功能通常需要與 CSS 和 JavaScript 配合使用，尤其是 JavaScript，許多復(fù)雜功能的實(shí)現(xiàn)都依賴(lài)于它。

如果開(kāi)發(fā)過(guò)程中頻繁在 HTML 和 JavaScript 手冊(cè)之間切換，會(huì)極大降低效率。

在 AI 時(shí)代，我們有更高效的解決方案——利用 AI 輔助開(kāi)發(fā)！

市面上的通用 AI 工具種類(lèi)繁多，但對(duì)于編程行業(yè)來(lái)說(shuō)，使用通義靈碼往往能獲得更高的準(zhǔn)確性和專(zhuān)業(yè)性。

通義靈碼簡(jiǎn)介

通義靈碼是阿里云技術(shù)團(tuán)隊(duì)打造的智能編碼助手，基于強(qiáng)大的通義大模型，提供以下功能：

• 代碼續(xù)寫(xiě)和優(yōu)化：根據(jù)上下文自動(dòng)生成高質(zhì)量的代碼建議，幫助快速完成代碼編寫(xiě)，并提供優(yōu)化方案提升代碼性能。
• 自然語(yǔ)言描述生成代碼：將需求轉(zhuǎn)化為代碼，加速開(kāi)發(fā)過(guò)程。
• 注釋生成和代碼解釋：為代碼添加清晰的注釋?zhuān)忉尨a邏輯，方便團(tuán)隊(duì)協(xié)作和后續(xù)維護(hù)。
• 單元測(cè)試生成：自動(dòng)生成測(cè)試用例，確保代碼的可靠性和穩(wěn)定性。
• 研發(fā)智能問(wèn)答：解答開(kāi)發(fā)過(guò)程中遇到的問(wèn)題，提供專(zhuān)業(yè)的技術(shù)指導(dǎo)。
• 代碼問(wèn)題修復(fù)：幫助快速定位并修復(fù)代碼中的錯(cuò)誤，提高開(kāi)發(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)始使用。

不管是HTML，CSS還是JavaScript，都更傾向于使用VSCode進(jìn)行代碼開(kāi)發(fā)，VSCode的通義靈碼插件支持也提供了上述的全部功能，所以本文以VSCode進(jìn)行介紹。

安裝指南

環(huán)境準(zhǔn)備

HTML、CSS 和 JavaScript 的開(kāi)發(fā)通常傾向于使用 Visual Studio Code（簡(jiǎn)稱(chēng) VSCode），其通義靈碼插件功能完整，因此本文以 VSCode 為例進(jìn)行介紹。

插件安裝

 VSCode三端的插件安裝方式基本一致，本文以Windows為例，介紹如何在VSCode中安裝通義靈碼插件。

確保已安裝 VSCode 后（如未安裝請(qǐng)查閱：Visual?Studio?Code 入門(mén)），在插件市場(chǎng)搜索“TONGYI Lingma”，找到通義靈碼插件并安裝。

安裝完成后，VSCode 左側(cè)會(huì)新增通義靈碼圖標(biāo)，點(diǎn)擊進(jìn)入插件界面。

首次使用需點(diǎn)擊“立即登錄”并同意服務(wù)協(xié)議，通義靈碼支持多種登錄方式，包括賬號(hào)密碼、手機(jī)號(hào)、支付寶、阿里云、淘寶、釘釘?shù)卿洝?



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

功能演示

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

在 HTML 開(kāi)發(fā)中，代碼續(xù)寫(xiě)功能相對(duì)雞肋，但在 HTML5 中，由于需要使用 JavaScript，代碼續(xù)寫(xiě)在 JavaScript 開(kāi)發(fā)中則顯得極其強(qiáng)大。

通義靈碼提供行級(jí)和函數(shù)級(jí)的代碼補(bǔ)全功能。

在開(kāi)啟自動(dòng)云端生成模式下，它會(huì)根據(jù)當(dāng)前代碼文件及相關(guān)文件的上下文，自動(dòng)生成代碼建議，可使用快捷鍵采納、廢棄或查看不同建議。

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

開(kāi)發(fā)小提示：
為了提高代碼補(bǔ)全的準(zhǔn)確性，建議在編寫(xiě)代碼前先寫(xiě)代碼注釋描述其功能。例如上圖所示

通義靈碼還提供了一組快捷鍵，方便更好地控制代碼續(xù)寫(xiě)過(guò)程：

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

智能問(wèn)答

通義靈碼的智能問(wèn)答功能強(qiáng)大，不僅可以回答你的技術(shù)問(wèn)題，還能進(jìn)行代碼創(chuàng)作。

例如，你可以向它咨詢 HTML5 中某個(gè)標(biāo)簽的用法，或者請(qǐng)求它生成一個(gè)特定功能的代碼片段。

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

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

智能問(wèn)答是一個(gè)持續(xù)對(duì)話的過(guò)程，為了提高 AI 生成答案的質(zhì)量，應(yīng)該適時(shí)清理會(huì)話。

你可以通過(guò)以下兩種方式清理會(huì)話：

• 清理會(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)答中得到我們需要的代碼可以用合并。

代碼注釋

通義靈碼的代碼注釋功能可以幫助你快速為代碼添加注釋?zhuān)岣叽a的可讀性和可維護(hù)性。

使用代碼注釋需要先選中需要注釋的代碼，右鍵選擇通義靈碼的生成注釋功能，點(diǎn)擊即可選擇代碼注釋功能。

也可以用快捷鍵 shift+alt+V 使用代碼注釋功能。

注釋結(jié)果會(huì)在左側(cè)顯示，你可以根據(jù)需要進(jìn)行修改和完善。

代碼解釋

與代碼注釋不同，代碼解釋是告訴你代碼為什么這么寫(xiě)。

選中代碼后，點(diǎn)擊通義靈碼的代碼解釋按鈕，通義靈碼會(huì)根據(jù)你的代碼生成對(duì)應(yīng)的解釋。

這對(duì)于理解復(fù)雜代碼邏輯、學(xué)習(xí)優(yōu)秀代碼示例非常有幫助。 

代碼優(yōu)化

代碼開(kāi)發(fā)很難做到面面俱到，單人開(kāi)發(fā)往往容易疏漏。

通義靈碼提供了一種新的方向：使用 AI 進(jìn)行代碼審查和優(yōu)化。

它不僅給出審查結(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é)與展望

通義靈碼作為一款智能編碼助手，為 HTML5 的開(kāi)發(fā)提供了強(qiáng)大的支持。

從代碼續(xù)寫(xiě)到智能問(wèn)答，從代碼注釋到單元測(cè)試生成，再到代碼優(yōu)化和 AI 程序員功能，它幾乎涵蓋了開(kāi)發(fā)過(guò)程中的各個(gè)方面。

通過(guò)本文的介紹，希望你能更好地理解和使用通義靈碼，提升自己的編程效率和代碼質(zhì)量。

然而，AI 輔助編程工具的發(fā)展仍在不斷進(jìn)步中。

未來(lái)，隨著技術(shù)的進(jìn)一步成熟，通義靈碼有望在更多場(chǎng)景下為開(kāi)發(fā)者提供更智能、更精準(zhǔn)的幫助。

對(duì)于廣大開(kāi)發(fā)者來(lái)說(shuō)，掌握并善用這樣的工具，無(wú)疑將在競(jìng)爭(zhēng)激烈的編程領(lǐng)域中占據(jù)優(yōu)勢(shì)。