[GitHub Global] Translate Vibe Coding 零基础教程/10 编程工具/04 AI 代码编辑器.md to zh-TW
This commit is contained in:
yupi-translate-app[bot]
committed by
GitHub
GitHub
parent
035d1178a8
commit
65e1e1e6a3
@@ -0,0 +1,373 @@
|
||||
# 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 的核心優勢：
|
||||
|
||||
1. 多種 AI 功能：Tab 程式碼補全、Agent 智能體、Chat 對話、內聯編輯等
|
||||
2. 多模型支援：可以使用 Claude、GPT、Gemini、Grok 等多個模型，還有 Auto 自動選擇功能
|
||||
3. 上下文感知：AI 能理解整個專案的程式碼，支援最高 1M Token 的上下文（Max 模式）
|
||||
4. 生態成熟：基於 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 官網](https://cursor.com) 下載適合你系統的版本（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 官方定價文件](https://cursor.com/cn/docs/account/pricing)，那裡有最新最準確的資訊。
|
||||
|
||||
如果你認真學習 Vibe Coding，我推薦訂閱 Pro 版。20 刀換來的效率提升，對大多數人來說是值得的。如果你是重度使用者，每天大量使用 Agent，可以考慮 Pro Plus 或 Ultra。
|
||||
|
||||
像魚皮這種 Cursor 重度患者，即使開了高級套餐，也得承受天價賬單……
|
||||
|
||||
|
||||
|
||||
此外，Agent 模式處理複雜任務時可能需要等待較長時間。雖然有 AI 輔助，但還是需要一定的程式設計基礎，完全零基礎的新手可能會覺得有點複雜。
|
||||
|
||||
更多 Cursor 的使用技巧和省錢方法，可以查看本系列教學的【進階選學：經驗技巧】板塊，那裡有詳細的講解。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 三、其他主流 AI 程式碼編輯器
|
||||
|
||||
除了 Cursor，市面上還有一些其他的 AI 程式碼編輯器值得了解。
|
||||
|
||||
|
||||
|
||||
### Windsurf
|
||||
|
||||
[Windsurf](https://codeium.com/windsurf) 是 Codeium 公司推出的 AI 程式碼編輯器，最大的優勢是完全免費。用完額度後，Windsurf 仍可免費使用，特別適合學生和預算有限的開發者。
|
||||
|
||||
並且提供了 Cascade 智能體模式（類似 Cursor 的 Agent），用自然語言描述需求，AI 會自動建立和修改多個檔案。最大的優勢是完全免費
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### Antigravity
|
||||
|
||||
[Antigravity](https://antigravity.google) 是 Google 推出的智能體開發平台，介面類似 VS Code。它採用 Agent 優先的設計，AI 智能體可以自主規劃、執行和驗證複雜任務。
|
||||
|
||||
它整合了 Gemini 等大模型，支援 1M Token 上下文，適合想嘗試 Google AI 生態、需要超長上下文的大型專案的開發者。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### Kiro
|
||||
|
||||
[Kiro](https://kiro.dev) 是 Amazon 推出的 AI IDE，強調 「規範驅動開發」。先寫需求規範，再讓 AI 實現。
|
||||
|
||||
它和 AWS 深度整合，可以直接部署到 AWS 服務，適合使用 AWS 服務的開發者、需要規範化開發流程的團隊、做企業級應用的場景。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### TRAE
|
||||
|
||||
[TRAE](https://www.trae.ai) 是字節跳動推出的 AI 原生程式設計工具。有 2 種開發模式：
|
||||
|
||||
- IDE 模式類似 Cursor，保留傳統開發流程
|
||||
- SOLO 模式讓 AI 主導，自動推進開發任務
|
||||
|
||||
TRAE 的 SOLO 模式是它最大的亮點，區別於傳統的人類主導 + AI 輔助程式設計，SOLO 模式讓 AI 主導任務並自動執行開發。你只需要有一個想法，AI 就能自動生成產品需求文件、技術架構文件，然後自主編寫程式碼、安裝依賴、測試驗證，直到專案可以正常執行。
|
||||
|
||||
而且 TRAE 支援整合第三方服務，比如 Supabase 資料庫、Stripe 支付、OpenRouter AI 服務等，不用看文件就能傻瓜式整合。可以幫你快速開發包含完整前端和後端的商業級產品。
|
||||
|
||||
|
||||
|
||||
國內版的 TRAE 很適合中文使用者，訪問速度快。魚皮用 TRAE SOLO 開發過微信小程序，感興趣的可以看看 [實戰影片](https://www.bilibili.com/video/BV1yMn3zuE7L)。
|
||||
|
||||
|
||||
|
||||
### Zed
|
||||
|
||||
[Zed](https://zed.dev) 是用 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` ：全域搜尋
|
||||
|
||||
更多最新的預設鍵盤快捷鍵以 [官方文件](https://cursor.com/cn/docs/configuration/kbd) 為主：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 4、程式碼審查
|
||||
|
||||
AI 生成的程式碼不一定
|
||||
Reference in New Issue
Block a user