yupi-translate-app[bot]
16 KiB
AI 程式碼編輯器
更專業、更強大的 Vibe Coding 開發方式
你好，我是魚皮。
在前面的文章中，我們學習了零代碼平台和 AI 智能體平台的使用方法。如果你已經用這些工具做出了幾個專案，可能會開始感覺到一些限制：
- 我想修改某個具體的檔案，但零代碼平台不夠靈活......
- 專案越來越大，在瀏覽器裡管理程式碼有點吃力......
- 我想學習更專業的開發方式，但又不想放棄 AI 的幫助......
如果你有這些想法，那麼恭喜你，是時候升級到 AI 程式碼編輯器了！
AI 程式碼編輯器結合了傳統程式碼編輯器的強大功能和 AI 的智能輔助，讓你可以更靈活、更專業地開發專案。這篇文章，我會詳細講解主流的 AI 程式碼編輯器 Cursor，並分享更多值得關注的 AI 程式碼編輯器。
一、什麼是 AI 程式碼編輯器？
在搞清楚 AI 程式碼編輯器之前，我們先來理解一個基本概念：什麼是程式碼編輯器？
簡單來說，程式碼編輯器就是程式設計師寫程式碼的工具，就像 Word 是寫文件的工具一樣。常見的程式碼編輯器有 VS Code、Sublime Text、Notepad++ 等。
還有一個相關的概念叫 IDE（整合開發環境），它比程式碼編輯器功能更強大，不僅能寫程式碼，還整合了除錯、編譯、版本控制等一整套開發工具。常見的 IDE 有 JetBrains 公司的 IntelliJ IDEA、PyCharm、WebStorm 等。
不過在實際使用中，程式碼編輯器和 IDE 的界線已經越來越模糊了。比如 VS Code 雖然叫編輯器，但通過安裝外掛，功能已經和 IDE 差不多了。所以你不用太糾結這兩個概念的區別，知道它們都是寫程式碼的工具就行。
現在我們來搞清楚 2 個問題：
- AI 程式碼編輯器和零代碼平台有什麼區別？
- AI 程式碼編輯器和傳統程式碼編輯器有什麼區別？
AI 程式碼編輯器 PK 零代碼平台
零代碼平台是在瀏覽器裡用的，你通過對話讓 AI 生成整個應用，特別適合快速做原型和簡單專案。而 AI 程式碼編輯器需要下載安裝到電腦，可以精確控制每個檔案、每行程式碼，而且有完整的開發工具鏈（比如程式碼除錯、版本控制等），更適合複雜專案和專業開發。
打個比方，零代碼平台就像在餐廳點菜，廚師做好端上來；AI 程式碼編輯器則像在自己廚房做菜，有個智能助手在旁邊幫你。
AI 程式碼編輯器 PK 傳統程式碼編輯器
那 AI 程式碼編輯器和傳統的程式碼編輯器（比如 VS Code、JetBrains、Sublime Text）又有什麼區別呢？
我認為，最大的區別是 AI 的深度整合。
傳統程式碼編輯器只是一個寫程式碼的工具，你需要自己想清楚每一行程式碼怎麼寫。而 AI 程式碼編輯器內建了強大的 AI 助手，可以幫你生成程式碼、解釋程式碼、修改程式碼、甚至自動執行多檔案任務。
具體來說，AI 程式碼編輯器有這些傳統編輯器沒有的能力：
- 用自然語言描述需求就能生成程式碼
- AI 能理解整個專案的上下文
- 可以自動修改多個檔案
- 能自動執行命令（比如安裝依賴）
- 有智能程式碼補全（比傳統補全聰明得多）
簡單來說，傳統程式碼編輯器是 「你自己寫程式碼的工具」，AI 程式碼編輯器是 「AI 幫你寫程式碼的工具」。實際使用中，效率差距可能是 10 倍以上。
如果你有一定的程式設計基礎，上手 AI 程式碼編輯器會非常快。
二、Cursor 最火的 AI 程式碼編輯器
Cursor 是目前最火的 AI 程式碼編輯器，被稱為 「AI 時代的 VS Code」。因為它基於 VS Code 改造，保留了 VS Code 的所有優點，同時加入了強大的 AI 功能。
Cursor 的核心優勢：
- 多種 AI 功能：Tab 程式碼補全、Agent 智能體、Chat 對話、內聯編輯等
- 多模型支援：可以使用 Claude、GPT、Gemini、Grok 等多個模型，還有 Auto 自動選擇功能
- 上下文感知：AI 能理解整個專案的程式碼，支援最高 1M Token 的上下文（Max 模式）
- 生態成熟：基於 VS Code 開發，支援所有 VS Code 外掛
Cursor 的核心 AI 功能
Cursor 最強大的地方在於它提供了多種 AI 功能，適合不同的場景。
1、Tab 程式碼補全
這是最基礎的功能，類似於 GitHub Copilot。當你寫程式碼時，AI 會自動預測你要寫什麼，按 Tab 鍵就能接受建議。
這個功能特別適合寫重複性程式碼、補全函數實現、快速生成樣板程式碼。優點是速度快，不會打斷思路；缺點是只能補全，不能做大的修改。
2、Agent 智能體
這是 Cursor 2.0 推出的最強大功能，也是最接近 AI 程式設計師的模式。在這個模式下，AI 可以同時修改多個檔案、自動建立新檔案、執行命令（比如安裝依賴）、理解整個專案結構、甚至使用瀏覽器測試。
你可以用它來新增新功能（需要修改多個檔案）、重構程式碼、修復複雜 Bug、搭建專案框架等，可以處理各種複雜任務。
Cursor 還推出了自研的 Composer 模型，這是一個專門為軟體工程優化的 AI 模型，生成速度比同類模型快 4 倍。
舉個例子：
請新增使用者認證功能，包括：
- 登入頁面
- 註冊頁面
- 認證中介軟體
- 使用者資料庫模型
Agent 會自動分析專案，安裝必要的依賴包、建立需要的檔案、修改相關程式碼，直到完成任務。
3、Chat 對話和內聯編輯
Chat 是最常用的功能。你可以選中一段程式碼，然後用自然語言告訴 AI 你想做什麼。可以用它來解釋程式碼的作用、修改某個函數、修復 bug、優化效能等等。
內聯編輯則可以讓你在程式中直接修改，按 Cmd/Ctrl + K 快速呼叫，AI 會在目前位置生成或修改程式碼。
舉些例子，你可以選中一段程式碼，然後跟 AI 說：
- 這個函數的作用是什麼？
- 幫我優化一下效能
- 加上錯誤處理
怎麼使用 Cursor？
讓我用一個完整的例子來演示 Cursor 的使用流程。
比如我想做一個仿真的電子黑板，想畫什麼就畫什麼，還能匯出為圖片。
揮毫潑墨，好不痛快！
1）首先，到 Cursor 官網 下載適合你系統的版本（Windows/Mac/Linux 都支援）。
2）建立一個空的資料夾，用於存放整個專案程式碼。推薦名稱為英文，比如 yupi-drawboard 。
然後打開 Cursor，打開剛剛建立的資料夾。
3）打開 Agent 面板，選擇 Agent 模式和大模型，然後輸入提示詞來描述你的需求：
幫我開發一個仿真的電子黑板，使用者可以在上面畫畫並匯出為圖片
接下來喝杯咖啡，等待 AI 生成程式碼就好。它會自動建立多個檔案，你可以在 Agent 面板中看到它的工作進度。
4）幾分鐘之後，AI 生成了完整的程式碼。你可以選擇全部接受或者全部拒絕，也可以自己選擇接受哪些程式碼：
5）由於需求比較簡單，直接在瀏覽器中打開 index.html 網頁檔案，就能看到執行效果了。
效果還不錯吧？猜猜我寫的是什麼~
6）如果需要修改細節或者修復 Bug，也是直接跟 AI 對話即可。
當然，如果你有一定的程式設計基礎，可以自己選中某段程式碼，按 Cmd/Ctrl + K 使用內聯編輯。
當你自己寫新程式碼時，AI 會自動提示（Tab 補全功能），按 Tab 接受建議就行。
這就是 Cursor 的基本用法。此外 Cursor 還支援聯網搜尋、使用瀏覽器、語音輸入、MCP 外掛等更多能力，後續可以慢慢探索。
Cursor 的優缺點
Cursor 是我目前用過的功能最全面的 AI 程式碼編輯器，它的幾種 AI 模式覆蓋了從程式碼補全到智能體的所有場景。
因為基於 VS Code，所有 VS Code 的外掛、主題、快捷鍵都能用，如果你之前用過 VS Code，上手會非常快。
而且你可以在 Claude、GPT、Gemini 等主流新模型之間自由切換，還能使用自己的大模型和 API Key。
此外，Cursor 的使用者量很多，遇到問題比較容易找到解決方案，網上的教學、影片也最多，魚皮自己也是一直在關注 Cursor 的發展動態，也做過不少教學。
不過 Cursor 最大的硬傷還是價格，高級套餐本身價格就比較貴，每個套餐還有用量的限制。
當你超出每月包含的用量時，可以選擇新增按需用量（按 API 費率計費）或者升級到更高檔位。不同模型的 API 成本不同，你的模型選擇會影響用量消耗速度。
詳細的價格資訊和用量計算，建議查看 Cursor 官方定價文件，那裡有最新最準確的資訊。
如果你認真學習 Vibe Coding，我推薦訂閱 Pro 版。20 刀換來的效率提升，對大多數人來說是值得的。如果你是重度使用者，每天大量使用 Agent，可以考慮 Pro Plus 或 Ultra。
像魚皮這種 Cursor 重度患者，即使開了高級套餐，也得承受天價賬單……
此外，Agent 模式處理複雜任務時可能需要等待較長時間。雖然有 AI 輔助，但還是需要一定的程式設計基礎，完全零基礎的新手可能會覺得有點複雜。
更多 Cursor 的使用技巧和省錢方法，可以查看本系列教學的【進階選學：經驗技巧】板塊，那裡有詳細的講解。
三、其他主流 AI 程式碼編輯器
除了 Cursor，市面上還有一些其他的 AI 程式碼編輯器值得了解。
Windsurf
Windsurf 是 Codeium 公司推出的 AI 程式碼編輯器，最大的優勢是完全免費。用完額度後，Windsurf 仍可免費使用，特別適合學生和預算有限的開發者。
並且提供了 Cascade 智能體模式（類似 Cursor 的 Agent），用自然語言描述需求，AI 會自動建立和修改多個檔案。最大的優勢是完全免費
Antigravity
Antigravity 是 Google 推出的智能體開發平台，介面類似 VS Code。它採用 Agent 優先的設計，AI 智能體可以自主規劃、執行和驗證複雜任務。
它整合了 Gemini 等大模型，支援 1M Token 上下文，適合想嘗試 Google AI 生態、需要超長上下文的大型專案的開發者。
Kiro
Kiro 是 Amazon 推出的 AI IDE，強調 「規範驅動開發」。先寫需求規範，再讓 AI 實現。
它和 AWS 深度整合，可以直接部署到 AWS 服務，適合使用 AWS 服務的開發者、需要規範化開發流程的團隊、做企業級應用的場景。
TRAE
TRAE 是字節跳動推出的 AI 原生程式設計工具。有 2 種開發模式：
- IDE 模式類似 Cursor，保留傳統開發流程
- SOLO 模式讓 AI 主導，自動推進開發任務
TRAE 的 SOLO 模式是它最大的亮點，區別於傳統的人類主導 + AI 輔助程式設計，SOLO 模式讓 AI 主導任務並自動執行開發。你只需要有一個想法，AI 就能自動生成產品需求文件、技術架構文件，然後自主編寫程式碼、安裝依賴、測試驗證，直到專案可以正常執行。
而且 TRAE 支援整合第三方服務，比如 Supabase 資料庫、Stripe 支付、OpenRouter AI 服務等，不用看文件就能傻瓜式整合。可以幫你快速開發包含完整前端和後端的商業級產品。
國內版的 TRAE 很適合中文使用者，訪問速度快。魚皮用 TRAE SOLO 開發過微信小程序，感興趣的可以看看 實戰影片。
Zed
Zed 是用 Rust 編寫的高效能程式碼編輯器，由 Atom 的創始團隊打造。內建 AI 助手、支援多種 AI 模型、支援即時協作編輯。
優點是啟動速度極快、佔用資源少。適合追求極致效能、電腦配置一般、需要團隊協作的開發者。
四、怎麼選擇 AI 程式碼編輯器？
看到這裡，你可能會問：這麼多 AI 程式碼編輯器，我該選哪個呢？
其實選擇很簡單，主要看你的需求和預算。
優先推薦 Cursor。截止到目前，Cursor 仍然是功能最強大、生態最成熟的 AI 程式碼編輯器，我自己主力也是用 Cursor 做專案開發。
前面也提到過，它的優勢包括：
- 功能全面：Tab、Agent、Chat、內聯編輯等
- 更新快：經常推出新功能
- 上下文理解能力強：支援最高 1M Token
- 多模型支援：可以自由切換 Claude、GPT、Gemini 等，第一時間對接新模型
- 生態成熟：基於 VS Code，所有外掛都能用
- 社群活躍：遇到問題很容易找到解決方案
如果你預算充足（每月 20 美元以上），Cursor 是首選。如果你預算有限，Windsurf 是很好的免費選擇，雖然功能相對簡單，但對學習來說完全夠用。
五、AI 程式碼編輯器實戰技巧
無論你選擇 Cursor 還是其他 AI 程式碼編輯器，下面這些實戰技巧都能幫你提升效率。
1、善用上下文
AI 程式碼編輯器最強大的地方在於它能理解整個專案的上下文。要充分利用這一點：
- 在專案根目錄建立
README.md，描述專案的整體架構 - 使用
.cursorrules（或者其他編輯器支援的規則檔案），告訴 AI 你的編碼規範 - 在對話時，引用相關的檔案（
@檔案名）
舉個例子：
參考 @src/components/ImageUploader.vue 的程式碼風格，建立一個 Card 元件
2、分步驟實現
不要一次性提出太複雜的需求，而是分步驟來：
❌ 不好的方式：
做一個完整的電商網站
✅ 推薦的方式：
第一步：建立商品列表頁面
第二步：新增商品詳情頁面
第三步：新增購物車功能
第四步：新增結算功能
3、利用快捷鍵
熟練使用快捷鍵可以大大提升效率。
以 Cursor 為例，建議嘗試下面這些快捷鍵，能讓你少用滑鼠，操作更快。
對話相關：
Cmd/Ctrl + L：切換側邊欄（除非已綁定到某個模式）Cmd/Ctrl + I：切換側邊欄（除非已綁定到某個模式）Cmd/Ctrl + K：打開行內編輯，可以在目前位置插入 AI 生成的程式碼Tab：接受建議
程式碼編輯：
Cmd/Ctrl + Shift + L：將選中內容新增到聊天Alt + ↑/↓：移動目前行Cmd/Ctrl + /：註釋/取消註釋
檔案操作：
Cmd/Ctrl + Shift + F：全域搜尋
更多最新的預設鍵盤快捷鍵以 官方文件 為主：
4、程式碼審查
AI 生成的程式碼不一定