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

引言

在 HTML 開發(fā)領(lǐng)域，提高編碼效率和質(zhì)量是每位開發(fā)者追求的目標。通義靈碼，作為一款由阿里云技術(shù)團隊開發(fā)的智能編碼助手，能夠通過其強大的 AI 能力，為 HTML 開發(fā)者提供包括代碼自動補全、智能注釋、代碼優(yōu)化等多方面的支持。本文將指導您如何在 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ā)前端頁面時仍會選擇使用 VSCode，因為相比于 jetbrain 和 vs 以及 eclipse 這種重量級的 IDE，VSCode 更加輕巧，所以本文以 VSCode 為主進行介紹！

前提條件

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

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

安裝步驟

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

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

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

主要功能應(yīng)用

代碼自動補全

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

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

智能注釋生成

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

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

代碼解釋

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

代碼優(yōu)化建議

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

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

單元測試自動生成

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

比如可以使用 Python 的 unittest（單元測試框架）和 bs4（html 解析框架）進行頁面的單元測試

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

智能問答

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

AI 程序員

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

實用技巧

會話管理：

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

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

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

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

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