開(kāi)發(fā)工具的規(guī)則已經(jīng)徹底改變！

開(kāi)發(fā)者們過(guò)去可能很難想象，有一天安裝 Tailwind CSS 只需給 VS Code 一句指令即可。但現(xiàn)在，這已經(jīng)成為現(xiàn)實(shí)。

VS Code 最近推出了“Agent 模式”，它并非只是簡(jiǎn)單地給出開(kāi)發(fā)建議，而是真正能代替開(kāi)發(fā)者完成一系列實(shí)際操作：

• ? 自動(dòng)安裝依賴(lài)
• ? 修改配置文件
• ? 啟動(dòng)本地開(kāi)發(fā)服務(wù)器

然而首次嘗試中，它卻意外失敗——正是這次失敗揭示了使用AI工具時(shí)最關(guān)鍵的訣竅。

VS Code Agent模式：真正的AI開(kāi)發(fā)同事

如何開(kāi)啟Agent模式

這個(gè)功能目前正逐步推送，可能并非所有人都能看到。不過(guò)開(kāi)啟它其實(shí)非常簡(jiǎn)單：

• 打開(kāi)設(shè)置 (Ctrl+, 或 Cmd+,)
• 搜索 "agent"
• 勾選啟用選項(xiàng)

圖片

完成以上步驟后，聊天欄就會(huì)出現(xiàn)三個(gè)模式：

• Ask（類(lèi)似 ChatGPT 回答問(wèn)題）
• Edit（修改文件）
• Agent（執(zhí)行一切操作，像真實(shí)開(kāi)發(fā)者）

圖片

注意：缺少上下文時(shí)，它表現(xiàn)非常笨拙

第一次使用Agent模式安裝Tailwind CSS時(shí)，它給出了過(guò)時(shí)的指令。原因如下：

• Claude 3.5 模型數(shù)據(jù)停留在 2024年4月。
• Tailwind 最新文檔已更新到 2025 年。

解決方案：強(qiáng)制AI閱讀最新文檔

通過(guò)使用 #fetch 工具，將Tailwind最新官方安裝文檔鏈接直接傳遞給AI，并明確告知：

「嚴(yán)格按照這些步驟執(zhí)行?！?/span>

圖片

于是，它表現(xiàn)完美：

• 跳過(guò)多余步驟（已有項(xiàng)目環(huán)境）
• 準(zhǔn)確修改了 postcss.config.mjs
• 創(chuàng)建CSS文件
• 甚至啟動(dòng)了本地開(kāi)發(fā)服務(wù)器

AI工具的真正力量在于，要像指導(dǎo)初級(jí)開(kāi)發(fā)人員一樣明確指令。

圖片

終極考驗(yàn)：它能否獨(dú)立構(gòu)建一個(gè)完整應(yīng)用？

開(kāi)發(fā)者給出了一份明確的產(chǎn)品需求文檔（PRD），要求構(gòu)建一個(gè)名為“3D時(shí)間表”的Web應(yīng)用。但首先遇到了一個(gè)重大障礙：

數(shù)據(jù)庫(kù)整合問(wèn)題

AI需要了解Postgres數(shù)據(jù)庫(kù)結(jié)構(gòu)（例如 users、lists 表）。怎么辦？

MCP服務(wù)器登場(chǎng)：與數(shù)據(jù)庫(kù)直接對(duì)話(huà)的利器

MCP (Model Context Protocol) 是本地程序，用于將 VS Code 與外部系統(tǒng)（如數(shù)據(jù)庫(kù)）連接：

安裝過(guò)程：

1.從 mcp.so 找到對(duì)應(yīng)Postgres MCP服務(wù)器。

圖片

在這里獲取名稱(chēng)包：

圖片

2.使用 npm 安裝：

然后返回 VS 代碼，搜索'>mcp：添加服務(wù)器...'

圖片

圖片

npm install <mcp-server-name>

3.在 VS Code 中，使用命令行添加MCP服務(wù)器連接到數(shù)據(jù)庫(kù)。

隨后，開(kāi)發(fā)者向Agent模式提問(wèn)：

「告訴我數(shù)據(jù)庫(kù)的結(jié)構(gòu)？」

AI立刻連接數(shù)據(jù)庫(kù)并準(zhǔn)確回復(fù)：

「你的數(shù)據(jù)庫(kù)有兩個(gè)表：users 和 lists，主鍵分別是…」

最關(guān)鍵時(shí)刻：“幫我構(gòu)建這個(gè)應(yīng)用！”

開(kāi)發(fā)者直接在聊天框中輸入需求文檔，并告訴Agent模式：

「請(qǐng)根據(jù)這份文檔構(gòu)建完整應(yīng)用?！?/span>

隨后，開(kāi)發(fā)者離開(kāi)電腦，30分鐘后回來(lái)檢查成果。

30分鐘后的驚人結(jié)果：

AI完成了一個(gè)完整的應(yīng)用：

• 使用 Tailwind CSS 構(gòu)建的UI界面
• 數(shù)據(jù)庫(kù)整合完畢
• 自動(dòng)獲取鏈接的元數(shù)據(jù)（標(biāo)題、圖標(biāo)）
• 支持拖放排序功能

唯一需要手動(dòng)修正的，是一個(gè)Postgres導(dǎo)入語(yǔ)句錯(cuò)誤。但即使這個(gè)錯(cuò)誤，也被VS Code內(nèi)置的智能修復(fù)（Next Edit Suggestions）及時(shí)捕捉：

自動(dòng)修正自己的錯(cuò)誤

開(kāi)發(fā)者修正了導(dǎo)入語(yǔ)句，VS Code 隨即自動(dòng)提示并修復(fù)了其它相關(guān)錯(cuò)誤。

被忽視的強(qiáng)大功能：“自由選擇AI模型”

VS Code 的AI并非只能使用 Copilot，開(kāi)發(fā)者還能：

• 在設(shè)置中打開(kāi)「管理模型」；
• 輸入其它 AI模型API Key（如 Gemini、Ollama）；
• 隨意切換模型，靈活高效。

最終評(píng)價(jià)：它真的代表了未來(lái)嗎？

經(jīng)過(guò)多項(xiàng)測(cè)試，得出以下結(jié)論：

• ? Agent模式顛覆傳統(tǒng)，僅憑指令即可構(gòu)建完整功能。
• ? MCP服務(wù)器解決了AI不了解數(shù)據(jù)庫(kù)結(jié)構(gòu)的難題。
• ? 智能錯(cuò)誤修復(fù)功能顯著節(jié)約調(diào)試時(shí)間。

但與此同時(shí)，也有一些局限：

• ?? AI不是萬(wàn)能的，缺乏明確指令會(huì)陷入困境。
• ?? 復(fù)雜任務(wù)可能需要更長(zhǎng)處理時(shí)間。
  

接下來(lái)，還能做什么？

未來(lái)開(kāi)發(fā)者可能繼續(xù)嘗試：

• 調(diào)試舊版遺留代碼
• 實(shí)現(xiàn)自動(dòng)化部署流程
• 自動(dòng)編寫(xiě)和運(yùn)行測(cè)試用例

很明顯，這種AI驅(qū)動(dòng)的開(kāi)發(fā)方式，已經(jīng)徹底改變了傳統(tǒng)編程的面貌。