開發工具的規則已經徹底改變！

開發者們過去可能很難想象，有一天安裝 Tailwind CSS 只需給 VS Code 一句指令即可。但現在，這已經成為現實。

VS Code 最近推出了“Agent 模式”，它并非只是簡單地給出開發建議，而是真正能代替開發者完成一系列實際操作：

• ? 自動安裝依賴
• ? 修改配置文件
• ? 啟動本地開發服務器

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

VS Code Agent模式：真正的AI開發同事

如何開啟Agent模式

這個功能目前正逐步推送，可能并非所有人都能看到。不過開啟它其實非常簡單：

• 打開設置 (Ctrl+, 或 Cmd+,)
• 搜索 "agent"
• 勾選啟用選項

圖片

完成以上步驟后，聊天欄就會出現三個模式：

• Ask（類似 ChatGPT 回答問題）
• Edit（修改文件）
• Agent（執行一切操作，像真實開發者）

圖片

注意：缺少上下文時，它表現非常笨拙

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

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

解決方案：強制AI閱讀最新文檔

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

「嚴格按照這些步驟執行。」

圖片

于是，它表現完美：

• 跳過多余步驟（已有項目環境）
• 準確修改了 postcss.config.mjs
• 創建CSS文件
• 甚至啟動了本地開發服務器

AI工具的真正力量在于，要像指導初級開發人員一樣明確指令。

圖片

終極考驗：它能否獨立構建一個完整應用？

開發者給出了一份明確的產品需求文檔（PRD），要求構建一個名為“3D時間表”的Web應用。但首先遇到了一個重大障礙：

數據庫整合問題

AI需要了解Postgres數據庫結構（例如 users、lists 表）。怎么辦？

MCP服務器登場：與數據庫直接對話的利器

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

安裝過程：

1.從 mcp.so 找到對應Postgres MCP服務器。

圖片

在這里獲取名稱包：

圖片

2.使用 npm 安裝：

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

圖片

圖片

npm install <mcp-server-name>

3.在 VS Code 中，使用命令行添加MCP服務器連接到數據庫。

隨后，開發者向Agent模式提問：

「告訴我數據庫的結構？」

AI立刻連接數據庫并準確回復：

「你的數據庫有兩個表：users 和 lists，主鍵分別是…」

最關鍵時刻：“幫我構建這個應用！”

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

「請根據這份文檔構建完整應用。」

隨后，開發者離開電腦，30分鐘后回來檢查成果。

30分鐘后的驚人結果：

AI完成了一個完整的應用：

• 使用 Tailwind CSS 構建的UI界面
• 數據庫整合完畢
• 自動獲取鏈接的元數據（標題、圖標）
• 支持拖放排序功能

唯一需要手動修正的，是一個Postgres導入語句錯誤。但即使這個錯誤，也被VS Code內置的智能修復（Next Edit Suggestions）及時捕捉：

自動修正自己的錯誤

開發者修正了導入語句，VS Code 隨即自動提示并修復了其它相關錯誤。

被忽視的強大功能：“自由選擇AI模型”

VS Code 的AI并非只能使用 Copilot，開發者還能：

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

最終評價：它真的代表了未來嗎？

經過多項測試，得出以下結論：

• ? Agent模式顛覆傳統，僅憑指令即可構建完整功能。
• ? MCP服務器解決了AI不了解數據庫結構的難題。
• ? 智能錯誤修復功能顯著節約調試時間。

但與此同時，也有一些局限：

• ?? AI不是萬能的，缺乏明確指令會陷入困境。
• ?? 復雜任務可能需要更長處理時間。
  

接下來，還能做什么？

未來開發者可能繼續嘗試：

• 調試舊版遺留代碼
• 實現自動化部署流程
• 自動編寫和運行測試用例

很明顯，這種AI驅動的開發方式，已經徹底改變了傳統編程的面貌。