# 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 功能。

![](https://pic.yupi.icu/1/image-20260107133923123.png)

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 鍵就能接受建議。

![](https://pic.yupi.icu/1/image-20260107134002087.png)

這個功能特別適合寫重複性程式碼、補全函數實現、快速生成樣板程式碼。優點是速度快，不會打斷思路；缺點是只能補全，不能做大的修改。



#### 2、Agent 智能體

這是 Cursor 2.0 推出的最強大功能，也是最接近 AI 程式設計師的模式。在這個模式下，AI 可以同時修改多個檔案、自動建立新檔案、執行命令（比如安裝依賴）、理解整個專案結構、甚至使用瀏覽器測試。

你可以用它來新增新功能（需要修改多個檔案）、重構程式碼、修復複雜 Bug、搭建專案框架等，可以處理各種複雜任務。

Cursor 還推出了自研的 **Composer 模型**，這是一個專門為軟體工程優化的 AI 模型，生成速度比同類模型快 4 倍。

舉個例子：
```
請新增使用者認證功能，包括：
- 登入頁面
- 註冊頁面
- 認證中介軟體
- 使用者資料庫模型
```

Agent 會自動分析專案，安裝必要的依賴包、建立需要的檔案、修改相關程式碼，直到完成任務。

![](https://pic.yupi.icu/1/image-20260107134332952.png)



#### 3、Chat 對話和內聯編輯

Chat 是最常用的功能。你可以選中一段程式碼，然後用自然語言告訴 AI 你想做什麼。可以用它來解釋程式碼的作用、修改某個函數、修復 bug、優化效能等等。

![](https://pic.yupi.icu/1/image-20260107134511105.png)

內聯編輯則可以讓你在程式中直接修改，按 `Cmd/Ctrl + K` 快速呼叫，AI 會在目前位置生成或修改程式碼。

![](https://pic.yupi.icu/1/image-20260107134532921.png)

舉些例子，你可以選中一段程式碼，然後跟 AI 說：
- 這個函數的作用是什麼？
- 幫我優化一下效能
- 加上錯誤處理



### 怎麼使用 Cursor？

讓我用一個完整的例子來演示 Cursor 的使用流程。

比如我想做一個仿真的電子黑板，想畫什麼就畫什麼，還能匯出為圖片。

揮毫潑墨，好不痛快！

1）首先，到 [Cursor 官網](https://cursor.com) 下載適合你系統的版本（Windows/Mac/Linux 都支援）。

2）建立一個空的資料夾，用於存放整個專案程式碼。推薦名稱為英文，比如 `yupi-drawboard` 。

然後打開 Cursor，打開剛剛建立的資料夾。

![](https://pic.yupi.icu/1/image-20260107142103143.png)

3）打開 Agent 面板，選擇 Agent 模式和大模型，然後輸入提示詞來描述你的需求：

```
幫我開發一個仿真的電子黑板，使用者可以在上面畫畫並匯出為圖片
```

![](https://pic.yupi.icu/1/image-20260107142244095.png)

接下來喝杯咖啡，等待 AI 生成程式碼就好。它會自動建立多個檔案，你可以在 Agent 面板中看到它的工作進度。

![](https://pic.yupi.icu/1/image-20260107142422465.png)

4）幾分鐘之後，AI 生成了完整的程式碼。你可以選擇全部接受或者全部拒絕，也可以自己選擇接受哪些程式碼：

![](https://pic.yupi.icu/1/image-20260107142737589.png)

5）由於需求比較簡單，直接在瀏覽器中打開 `index.html`  網頁檔案，就能看到執行效果了。

![](https://pic.yupi.icu/1/image-20260107142906255.png)

效果還不錯吧？猜猜我寫的是什麼~

6）如果需要修改細節或者修復 Bug，也是直接跟 AI 對話即可。

當然，如果你有一定的程式設計基礎，可以自己選中某段程式碼，按 `Cmd/Ctrl + K` 使用內聯編輯。

![](https://pic.yupi.icu/1/image-20260107142631274.png)

當你自己寫新程式碼時，AI 會自動提示（Tab 補全功能），按 Tab 接受建議就行。

這就是 Cursor 的基本用法。此外 Cursor 還支援聯網搜尋、使用瀏覽器、語音輸入、MCP 外掛等更多能力，後續可以慢慢探索。



### Cursor 的優缺點

Cursor 是我目前用過的功能最全面的 AI 程式碼編輯器，它的幾種 AI 模式覆蓋了從程式碼補全到智能體的所有場景。

因為基於 VS Code，所有 VS Code 的外掛、主題、快捷鍵都能用，如果你之前用過 VS Code，上手會非常快。

而且你可以在 Claude、GPT、Gemini 等主流新模型之間自由切換，還能使用自己的大模型和 API Key。

![](https://pic.yupi.icu/1/1764145641557-9b0b777f-f9ca-4cb4-8566-437dbd4b2cbb.png)

此外，Cursor 的使用者量很多，遇到問題比較容易找到解決方案，網上的教學、影片也最多，魚皮自己也是一直在關注 Cursor 的發展動態，也做過不少教學。

不過 Cursor 最大的硬傷還是價格，高級套餐本身價格就比較貴，每個套餐還有用量的限制。

當你超出每月包含的用量時，可以選擇新增按需用量（按 API 費率計費）或者升級到更高檔位。不同模型的 API 成本不同，你的模型選擇會影響用量消耗速度。

詳細的價格資訊和用量計算，建議查看 [Cursor 官方定價文件](https://cursor.com/cn/docs/account/pricing)，那裡有最新最準確的資訊。

如果你認真學習 Vibe Coding，我推薦訂閱 Pro 版。20 刀換來的效率提升，對大多數人來說是值得的。如果你是重度使用者，每天大量使用 Agent，可以考慮 Pro Plus 或 Ultra。

像魚皮這種 Cursor 重度患者，即使開了高級套餐，也得承受天價賬單……

![](https://pic.yupi.icu/1/yupicursorbilling.png)

此外，Agent 模式處理複雜任務時可能需要等待較長時間。雖然有 AI 輔助，但還是需要一定的程式設計基礎，完全零基礎的新手可能會覺得有點複雜。

更多 Cursor 的使用技巧和省錢方法，可以查看本系列教學的【進階選學：經驗技巧】板塊，那裡有詳細的講解。





## 三、其他主流 AI 程式碼編輯器

除了 Cursor，市面上還有一些其他的 AI 程式碼編輯器值得了解。



### Windsurf

[Windsurf](https://codeium.com/windsurf) 是 Codeium 公司推出的 AI 程式碼編輯器，最大的優勢是完全免費。用完額度後，Windsurf 仍可免費使用，特別適合學生和預算有限的開發者。

並且提供了 Cascade 智能體模式（類似 Cursor 的 Agent），用自然語言描述需求，AI 會自動建立和修改多個檔案。最大的優勢是完全免費

![](https://pic.yupi.icu/1/image-20260107135727334.png)



### Antigravity

[Antigravity](https://antigravity.google) 是 Google 推出的智能體開發平台，介面類似 VS Code。它採用 Agent 優先的設計，AI 智能體可以自主規劃、執行和驗證複雜任務。

它整合了 Gemini 等大模型，支援 1M Token 上下文，適合想嘗試 Google AI 生態、需要超長上下文的大型專案的開發者。

![](https://pic.yupi.icu/1/image-20260107135834072.png)



### Kiro

[Kiro](https://kiro.dev) 是 Amazon 推出的 AI IDE，強調 「規範驅動開發」。先寫需求規範，再讓 AI 實現。

它和 AWS 深度整合，可以直接部署到 AWS 服務，適合使用 AWS 服務的開發者、需要規範化開發流程的團隊、做企業級應用的場景。

![](https://pic.yupi.icu/1/image-20260107135922286.png)



### TRAE

[TRAE](https://www.trae.ai) 是字節跳動推出的 AI 原生程式設計工具。有 2 種開發模式：

- IDE 模式類似 Cursor，保留傳統開發流程
- SOLO 模式讓 AI 主導，自動推進開發任務

TRAE 的 SOLO 模式是它最大的亮點，區別於傳統的人類主導 + AI 輔助程式設計，SOLO 模式讓 AI 主導任務並自動執行開發。你只需要有一個想法，AI 就能自動生成產品需求文件、技術架構文件，然後自主編寫程式碼、安裝依賴、測試驗證，直到專案可以正常執行。

而且 TRAE 支援整合第三方服務，比如 Supabase 資料庫、Stripe 支付、OpenRouter AI 服務等，不用看文件就能傻瓜式整合。可以幫你快速開發包含完整前端和後端的商業級產品。

![](https://pic.yupi.icu/1/image-20250928222329915.png)

國內版的 TRAE 很適合中文使用者，訪問速度快。魚皮用 TRAE SOLO 開發過微信小程序，感興趣的可以看看 [實戰影片](https://www.bilibili.com/video/BV1yMn3zuE7L)。



### Zed

[Zed](https://zed.dev) 是用 Rust 編寫的高效能程式碼編輯器，由 Atom 的創始團隊打造。內建 AI 助手、支援多種 AI 模型、支援即時協作編輯。

優點是啟動速度極快、佔用資源少。適合追求極致效能、電腦配置一般、需要團隊協作的開發者。

![](https://pic.yupi.icu/1/windows-multibuffer.jpeg)



## 四、怎麼選擇 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 元件
```

![](https://pic.yupi.icu/1/image-20260107140926938.png)



### 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) 為主：

![](https://pic.yupi.icu/1/image-20260104192219087.png)



### 4、程式碼審查

AI 生成的程式碼不一定