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

簡(jiǎn)介

在前端開發(fā)領(lǐng)域，頁(yè)面調(diào)試一直是個(gè)繁瑣的過程，而傳統(tǒng)開發(fā)中美工與前端的對(duì)接也常常出現(xiàn)問題。如今，阿里云技術(shù)團(tuán)隊(duì)推出的通義靈碼智能編碼助手，為前端開發(fā)者帶來了新的解決方案，讓開發(fā)者可以像指揮者一樣，借助 AI 的力量來調(diào)試頁(yè)面。

通義靈碼基于通義大模型，具備以下功能：

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

對(duì)于 CSS 開發(fā)，雖然它并不算真正意義上的編程語言，但通義靈碼的諸多功能依然能夠?yàn)?CSS 開發(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)即可開啟智能編碼之旅。

由于 VSCode 是前端開發(fā)人員常用的 CSS 開發(fā)環(huán)境，本文將詳細(xì)介紹如何在 VSCode 中安裝配置通義靈碼，并展示其在 CSS 開發(fā)中的功能應(yīng)用。

安裝指南

確保已安裝 VSCode 后，按照以下步驟進(jìn)行插件安裝：

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

對(duì)于VSCode而言,通義靈碼的使用非常簡(jiǎn)單，只需要在VSCode中安裝插件即可。

1. 使用插件市場(chǎng)安裝

通義靈碼已上架VSCode插件市場(chǎng)。

1. 打開 VSCode，點(diǎn)擊左側(cè)的擴(kuò)展圖標(biāo)，進(jìn)入插件市場(chǎng)。
2. 在搜索框中輸入“TONGYI Lingma”，找到對(duì)應(yīng)的插件。
3. 點(diǎn)擊“安裝”按鈕，VSCode 會(huì)自動(dòng)下載并安裝通義靈碼插件。

2. 使用插件安裝包安裝

若無法通過插件市場(chǎng)安裝，可采用以下方式：

1. 訪問鏈接下載 Visual Studio Code 的 VSIX 安裝包：下載地址
2. 下載完成后，打開 VSCode，點(diǎn)擊左側(cè)的擴(kuò)展圖標(biāo)。
3. 點(diǎn)擊“從 VSIX 安裝”按鈕，選擇下載好的 VSIX 文件進(jìn)行安裝。

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

首次使用時(shí)，需點(diǎn)擊“立即登錄”并同意用戶協(xié)議。

可選擇賬號(hào)密碼、手機(jī)號(hào)、支付寶、阿里云、淘寶、釘釘?shù)鹊卿浄绞健?/p>

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

功能演示

代碼續(xù)寫

在 CSS 開發(fā)中，只需輸入完整的樣式提示詞，通義靈碼就能準(zhǔn)確生成相應(yīng)的樣式代碼。例如，當(dāng)你輸入“flex 布局”，AI 會(huì)根據(jù)常見的 flex 布局規(guī)則，生成相關(guān)的 CSS 代碼片段，幫助你快速構(gòu)建布局樣式。

代碼注釋

對(duì)于已有的 CSS 代碼，通義靈碼可以自動(dòng)生成注釋，提高代碼的可讀性。這對(duì)于團(tuán)隊(duì)協(xié)作開發(fā)尤其有用，能讓其他開發(fā)者更容易理解你的代碼邏輯。

代碼解釋

與代碼注釋不同，代碼解釋功能會(huì)告訴你代碼為什么這么寫。

選中對(duì)應(yīng)的 CSS 規(guī)則后，右鍵選擇通義靈碼的解釋代碼功能，左側(cè)對(duì)話框會(huì)生成該段代碼的解釋。

這在學(xué)習(xí)他人樣式或回顧自己以前的代碼時(shí)非常有幫助。

代碼優(yōu)化

CSS 中有很多規(guī)則可以簡(jiǎn)寫，以提高代碼的閱讀性和可維護(hù)性。

通義靈碼的代碼優(yōu)化功能，可以通過合并（diff）操作，將原代碼替換為優(yōu)化后的代碼，使你的 CSS 代碼更加簡(jiǎn)潔高效。

智能問答

這是 CSS 開發(fā)者使用通義靈碼時(shí)最有用的工具之一。

前端開發(fā)中，經(jīng)常會(huì)遇到一些不常用的 CSS 規(guī)則，此時(shí)可直接使用問答功能向 AI 提問。

例如，詢問“如何實(shí)現(xiàn) CSS 圓角效果”，AI 會(huì)給出具體的代碼示例和使用說明。

而且，對(duì)于需要多條規(guī)則才能完整實(shí)現(xiàn)的樣式，通義靈碼還能提供參考案例和具體用法。

實(shí)際上在之前的功能中也有智能問答的展示，之前的很多功能都是基于智能問答實(shí)現(xiàn)的，他們只不過是在智能問答的時(shí)候輸入了合適的上下文（甚至是文件），以代碼解釋為例，就是把這段代碼也作為內(nèi)容向AI進(jìn)行提問。

智能問答現(xiàn)在可以選擇不同的大模型了，可以選擇通義千問的大模型，也可以選擇時(shí)下很火的deep seek 大模型。不過編程相關(guān)的通義系列的大模型更加專業(yè)！

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

智能問答是一個(gè)持續(xù)對(duì)話的過程，你可以持續(xù)進(jìn)行提問，但大模型也會(huì)因此記錄你之前的提問信息，可能會(huì)影響后續(xù)的回答，比如你一直在問CSS的內(nèi)容，如果突然詢問一個(gè)非CSS相關(guān)的（比如SCSS的循環(huán)（SCSS是一種優(yōu)化的寫樣式的語言，它可以被編譯為CSS）），AI會(huì)因?yàn)樯舷挛牡脑蛞詾槟氵€在詢問，可能會(huì)因此生成錯(cuò)誤的答案，所以在合適的時(shí)機(jī)你應(yīng)該清除上下文或者結(jié)束對(duì)話。

智能問答是一個(gè)持續(xù)對(duì)話的過程。為了不影響后續(xù)回答的準(zhǔn)確性，你可以通過以下方式清理大模型記錄的提問信息：

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

AI程序員

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

你可以像產(chǎn)品經(jīng)理一樣指導(dǎo) AI 進(jìn)行代碼開發(fā)，要求其創(chuàng)建項(xiàng)目。

或生成特定代碼

不過，最終是否接受 AI 生成的代碼，決定權(quán)仍在你手中。

其強(qiáng)大之處在于，它的上下文是整個(gè)項(xiàng)目，你可以通過描述樣式來讓 AI 幫你寫前端頁(yè)面。