HTML 開發(fā)者的智能助手：通義靈碼在 VSCode 中的應(yīng)用

引言

在 HTML 開發(fā)領(lǐng)域，提高編碼效率和質(zhì)量是每位開發(fā)者追求的目標(biāo)。通義靈碼，作為一款由阿里云技術(shù)團(tuán)隊(duì)開發(fā)的智能編碼助手，能夠通過其強(qiáng)大的 AI 能力，為 HTML 開發(fā)者提供包括代碼自動(dòng)補(bǔ)全、智能注釋、代碼優(yōu)化等多方面的支持。本文將指導(dǎo)您如何在 VSCode 中配置和使用通義靈碼，以優(yōu)化您的 HTML 開發(fā)流程。

安裝與配置

HTML 開發(fā)可用的工具很多，Jet brains 系列的大部分 ide 都可以開發(fā) html，而 webStorm 是他家專門用于 web 頁面開發(fā)的。此外微軟的 VS 和 VSCode , 還有一些別的公司研發(fā)的比如 atom，hbuilder，notepad++，eclipse 等都可以用于 html 開發(fā)。

但大多數(shù)程序員在開發(fā)前端頁面時(shí)仍會(huì)選擇使用 VSCode，因?yàn)橄啾扔?jetbrain 和 vs 以及 eclipse 這種重量級(jí)的 IDE，VSCode 更加輕巧，所以本文以 VSCode 為主進(jìn)行介紹！

前提條件

確保您的開發(fā)環(huán)境中已安裝 VSCode。

如果尚未安裝，可以從 VSCode官網(wǎng) 下載并安裝。

安裝步驟

1. 通過 VSCode 插件市場(chǎng)安裝
   打開 VSCode，進(jìn)入擴(kuò)展視圖（快捷鍵：`?Ctrl+Shift+X?`）。
   - 搜索“?TONGYI Lingma?”。
   - 找到插件后，點(diǎn)擊安裝。
   

2. 使用 VSIX 文件安裝
   訪問通義靈碼官網(wǎng)下載 VSIX 安裝包。
   在 VSCode 中，選擇“擴(kuò)展”視圖，點(diǎn)擊“從 VSIX 安裝”，然后選擇下載的 VSIX 文件進(jìn)行安裝。
   

3. 安裝完成后，VSCode 界面左側(cè)會(huì)顯示通義靈碼的圖標(biāo)，點(diǎn)擊圖標(biāo)并按照提示登錄即可開始使用。

主要功能應(yīng)用

代碼自動(dòng)補(bǔ)全

雖然通義靈碼也提供了 html 的代碼自動(dòng)補(bǔ)全，但前端開發(fā)設(shè)計(jì)樣式一般由美工決定，使用代碼補(bǔ)全并不能生成我們真正需要的代碼（但或許還是會(huì)有猜對(duì)的機(jī)會(huì)）。

我們可以通過禁用行間生成來關(guān)閉該功能。

智能注釋生成

通義靈碼確實(shí)提供了對(duì) html 代碼的注釋生成和代碼解釋，你可以像其他編程語言那樣使用代碼注釋和代碼解釋。

但對(duì)于 html 而言，代碼的注釋應(yīng)該由開發(fā)者自己根據(jù)結(jié)構(gòu)進(jìn)行確定，而不是生成對(duì)每個(gè) html 標(biāo)簽都注釋的 html 代碼，這樣注釋會(huì)讓 html 文件變大，影響頁面加載！

代碼解釋

通義靈碼也提供了代碼解釋功能，但 html 是一種結(jié)構(gòu)化的標(biāo)記語言，代碼解釋其實(shí)必要性不大。

代碼優(yōu)化建議

通義靈碼提供了對(duì)html的代碼優(yōu)化建議，對(duì)于前端開發(fā)工作者而言，只用?div?和?span?標(biāo)簽就能開發(fā)一個(gè)頁面，但這種方式是缺乏語義化的，對(duì)搜索引擎不友好，有些元素可能被廢棄，有些屬性可能不能使用了，對(duì)于程序員來說記住哪些是廢棄的元素需要一定的知識(shí)積累，而現(xiàn)在使用代碼優(yōu)化它可以幫助你快速完成這些工作！

雖然它會(huì)提供優(yōu)化后的代碼，但前端開發(fā)工作者應(yīng)該更多的參考其給出的建議自行修改，而不是直接合并！

單元測(cè)試自動(dòng)生成

HTML 并不是編程語言（是標(biāo)記語言），它并不像其他編程語言一樣可以有最小分隔單元（函數(shù)或者類）可以進(jìn)行測(cè)試，但軟件測(cè)試中也有針對(duì)頁面進(jìn)行的 ui 測(cè)試，一般使用 Python 結(jié)合一些 Python 工具庫對(duì)html 頁面進(jìn)行解析。

比如可以使用 Python 的 unittest（單元測(cè)試框架）和 bs4（html 解析框架）進(jìn)行頁面的單元測(cè)試

與代碼優(yōu)化相同，這里也會(huì)提供測(cè)試代碼

智能問答

在開發(fā)過程中遇到問題，可以直接向通義靈碼提問，它將提供解決方案或相關(guān)的代碼示例。

AI 程序員

AI 程序員是用來幫助開發(fā)者進(jìn)行編碼工作的，它可以通過對(duì)話的方式根據(jù)你的需求描述和要求，對(duì)整個(gè)項(xiàng)目進(jìn)行代碼開發(fā)，代碼審查和代碼變更。

實(shí)用技巧

會(huì)話管理：

與其他的對(duì)話型 AI 相同，通義靈碼也有上下文的概念，通義給出的答案會(huì)更傾向于之前的提問與回答，也就是說如果你一直在問?img?的標(biāo)簽，當(dāng)你突然詢問?target?屬性時(shí)通義靈碼可能會(huì)認(rèn)為你詢問的是?img?的?target?屬性，但實(shí)際上這是一個(gè)?a?標(biāo)簽特有的屬性！

言下之意就是，如果你想詢問新的內(nèi)容，要么下夠足夠多的描述（定語），要么新開一個(gè)會(huì)話，或者清除現(xiàn)在的會(huì)話。

可以通過會(huì)話創(chuàng)建和清理來清理大模型記錄的提問信息，你可以選擇會(huì)話創(chuàng)建和清理，也可以選擇會(huì)話清理。

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

創(chuàng)建新會(huì)話：在對(duì)話框中中輸入`?/newTask?`，然后點(diǎn)擊確定即可。