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

2025-03-18 16:42 更新

簡(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)下載并安裝通義靈碼插件。

通義靈碼-vsc插件市場(chǎng)

2. 使用插件安裝包安裝

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

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

通義靈碼-vsc離線插件安裝

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

通義靈碼插件

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

協(xié)議許可

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

登錄頁(yè)面

登錄后即可使用通義靈碼的各項(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)擊確定。

會(huì)話操作

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程序員1

或生成特定代碼

ai程序員2

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

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


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)