Cursor 完全使用指南 2026：AI IDE 讓編程效率翻倍的實戰手冊

在 2026 年，如果你還在用「普通編輯器 + 網頁版 ChatGPT 來回粘貼」的方式寫代碼，那你可能正在以一半的效率工作。Cursor 作為一款「AI 原生」的代碼編輯器，已經徹底改變了編程的方式。

Cursor 基於 VS Code 構建，完全兼容你熟悉的插件和快捷鍵，但它在底層深度集成了 GPT-5、Claude 4.0 等頂尖大模型，讓你可以直接在編輯器中聊天、寫代碼、改代碼、甚至讓 AI 幫你完成整個功能。

本文作為 AI Agent 實戰終極指南 的姊妹篇，將帶你從零掌握 Cursor 的完整使用方法。

---

目錄

1. 為什麼選擇 Cursor：它比 VS Code + Copilot 強在哪？
2. 安裝與配置：5 分鐘完成初始設置
3. 核心功能一：Command K（智能補全）
4. 核心功能二：AI Chat（對話式編程）
5. 核心功能三：Rules（規則定製）
6. 核心功能四：@-mention（精準引用上下文）
7. 核心功能五：Agent Mode（全自動編程模式）
8. 實戰場景：10 個讓你效率翻倍的 Cursor 技巧
9. 高階配置：自定義模型、快捷鍵與工作流
10. Cursor vs 競品對比：Copilot、Windsurf、Bolt.new

---

1. 為什麼選擇 Cursor：它比 VS Code + Copilot 強在哪？

你可能會問：「我已經有 VS Code + GitHub Copilot 了，還需要 Cursor 嗎？」

答案取決於你希望 AI 在編程中扮演什麼角色：

工具	AI 角色	典型交互方式	能做什麼
VS Code + Copilot	被動助手	灰字提示 → Tab 接受	補全函數、生成註釋
Cursor	主動合作者	自然語言對話 → AI 修改代碼	理解整個倉庫、跨文件重構、自主實現功能

1.1 Cursor 的核心優勢

① 真正的代碼理解，不只是補全

✅ 讀取整個代碼倉庫，理解項目結構和編碼規範
✅ 跨文件推理，知道修改 A 文件會影響 B 文件
✅ 自動查看相關代碼再給出建議，不會瞎編 API

② 五大核心功能，覆蓋完整工作流

Command K → 快速生成/修改選中代碼
AI Chat   → 對話式理解和調試
@-mention → 精準指定上下文（文件、文件夾、網頁）
Rules     → 告訴 AI 你的團隊規範（如「用 TypeScript」「用 React Hook」）
Agent     → 讓 AI 自主完成多步任務（如「實現登錄功能」）

③ 零遷移成本，完全兼容 VS Code

✅ 基於 VS Code 構建，99% 的快捷鍵一致
✅ 支持幾乎所有 VS Code 插件（包括 Prettier、ESLint、GitLens 等）
✅ 支持導入 VS Code 設置和主題
✅ 支持連接遠程 SSH / WSL / Dev Container

④ 多種模型自由切換

• GPT-5 / GPT-4o（OpenAI，綜合能力最強）
• Claude 4.0 Sonnet / Opus（Anthropic，代碼質量高）
• Gemini 3.1 Pro（Google，多模態強）
• 自定義 OpenAI-compatible 模型（支持 DeepSeek V4 等國產模型）

1.2 適合誰用？

用戶類型	Cursor 能幫你什麼	效率提升
初級開發者	講解代碼、生成基礎功能、幫你理解報錯	⬆️ 200%
全棧工程師	快速在前後端之間切換、編寫測試、代碼重構	⬆️ 100%
學習新技術	邊學邊問，無需切換到瀏覽器查文檔	⬆️ 150%
代碼審查	AI 先幫你 Review 一遍，再提交 PR	⬆️ 80%
閱讀大型代碼庫	快速理解陌生項目的架構和核心邏輯	⬆️ 300%

---

2. 安裝與配置：5 分鐘完成初始設置

2.1 下載與安裝

① 訪問官網：cursor.com（國內用戶可直接訪問，速度尚可）

② 選擇版本：

Windows：.exe 安裝包 或 Portable 便攜版
macOS：Intel / Apple Silicon 兩種版本（自動識別）
Linux：.deb（Debian/Ubuntu）、.rpm（Fedora/RHEL）、AppImage

③ 首次啟動：

啟動後會問你：
1. 是否從 VS Code 導入設置（推薦選「是」）
2. 是否登錄賬號（免費用戶有使用限額，Pro 版無限制）
3. 選擇你喜歡的主題和鍵盤映射（VS Code 風格 / Sublime 風格）

2.2 賬號與訂閱

方案	價格（2026 年中）	限額	適合
Free（免費）	$0	50 次 AI 請求/天，低速模型	輕度體驗
Pro（專業版）	$20/月 或 $200/年	不限速，全部模型，Agent 功能	日常開發
Business（團隊版）	$40/用戶/月	團隊管理 + 企業級安全	公司使用

💡 國內支付：支持信用卡。也可通過 合租平臺 共享 Pro 賬號，約 50-80 元/月。

2.3 關鍵設置項

打開 Cursor 設置（Cmd/Ctrl + ,），重點關注以下配置：

① AI 模型選擇（Settings → Features）

Model：推薦選擇「Claude 4.0 Sonnet」或「GPT-5」
  • Sonnet：速度快，適合日常補全和聊天
  • GPT-5：最強推理，適合複雜任務
  • Opus：最頂尖質量，但速度慢，適合高難度任務

Tips：可在 Command K 中隨時臨時切換模型

② Rules（規則定製）

在項目根目錄創建 .cursorrules 文件，或在設置中配置全局 Rules：

你是一位專業的全棧工程師，遵循以下規範：
1. 使用 TypeScript 編寫，優先使用類型而非 any
2. 遵循 React 18+ 最佳實踐，使用函數組件和 Hooks
3. 使用 Tailwind CSS 進行樣式處理
4. 編寫清晰的函數註釋，複雜邏輯需添加行內註釋
5. 遵循現有代碼的命名風格和項目結構
6. 優先使用項目已有的工具庫（如 lodash、axios）
7. 不重複造輪子，使用成熟的社區方案
8. 代碼風格與項目保持一致，遵循 ESLint 規則

📌 Rules 是 Cursor 的殺手級功能。它讓 AI 真正遵循你團隊的編碼規範，而不是生成「教科書風格」的代碼。

③ 快捷鍵綁定（Keymap）

功能	快捷鍵（VS Code 風格）	說明
Command K（AI 編輯）	Cmd/Ctrl + K	選中代碼後使用
AI Chat（側邊欄）	Cmd/Ctrl + L	打開 AI 對話
Agent Mode	Cmd/Ctrl + Shift + L	多步任務自動執行
Quick Fix AI	Cmd/Ctrl + .	AI 修復報錯

---

3. 核心功能一：Command K（智能補全）

Command K（Windows/Linux 上為 Ctrl + K）是 Cursor 中使用頻率最高的功能。

3.1 基本用法：選中 → 輸入指令 → AI 修改

流程示意：

1. 在代碼編輯器中選中一段代碼（或光標所在位置）
2. 按 Cmd + K 打開輸入框
3. 用自然語言描述你想要的修改
4. 按回車，AI 直接在代碼中應用修改
5. 你可以：Accept（接受）/ Reject（拒絕）/ Retry（重試）

3.2 10 個常用指令模板

直接複製使用，效率立竿見影：

場景	你可以這樣輸入
添加功能	「給這個組件添加一個 loading 狀態，顯示 spinner」
代碼重構	「重構這段代碼，將重複邏輯提取為函數」
修復 Bug	「修復這段代碼中的內存洩漏問題」
添加錯誤處理	「給這個異步函數添加 try-catch 和錯誤日誌」
編寫測試	「為這個函數編寫完整的單元測試，使用 Vitest」
解釋代碼	「用中文解釋這段代碼在做什麼」
性能優化	「優化這段代碼的性能，減少循環次數」
安全增強	「檢查這段代碼是否存在 SQL 注入或 XSS 漏洞」
添加文檔	「為這個函數添加 JSDoc 註釋和使用示例」
類型完善	「為這段 JavaScript 代碼添加 TypeScript 類型定義」

3.3 實戰示例

假設你有以下 React 代碼，選中後按 Cmd + K：

function UserList({ users }) {
  return (
    <ul>
      {users.map(user => (
        <li>{user.name}</li>
      ))}
    </ul>
  )
}

輸入指令：「添加空狀態和錯誤狀態處理，當 users 為空時顯示提示，同時添加 loading 狀態」

AI 會輸出：

function UserList({ users, loading, error }) {
  if (loading) {
    return (
      <div className="flex items-center justify-center p-8">
        <div className="h-8 w-8 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600"></div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="rounded-lg border border-red-200 bg-red-50 p-4 text-red-700">
        加載失敗：{error.message}
      </div>
    )
  }

  if (!users || users.length === 0) {
    return (
      <div className="rounded-lg border border-gray-200 bg-gray-50 p-8 text-center text-gray-500">
        暫無用戶數據
      </div>
    )
  }

  return (
    <ul className="space-y-2">
      {users.map(user => (
        <li key={user.id} className="rounded-md border border-gray-200 p-3 hover:bg-gray-50">
          {user.name}
        </li>
      ))}
    </ul>
  )
}

整個過程耗時 不到 10 秒。

3.4 高級技巧

① 快速生成新代碼：不選中任何內容，直接在空文件中按 Cmd + K，讓 AI 從頭開始寫。

② 多文件修改：配合 @ 引用其他文件，讓 AI 同時修改多個文件（詳見第 6 節）。

③ 撤銷 AI 修改：AI 修改會在 Git 中產生一個獨立的 diff，你可以用普通的撤銷操作回滾。

④ 快速切換模型：在 Command K 輸入框中輸入 @claude 或 @gpt5 前綴，可臨時切換模型。

---

4. 核心功能二：AI Chat（對話式編程）

按 Cmd + L 打開 AI Chat 側邊欄。這是你學習和理解代碼的最佳工具。

4.1 Chat vs Command K 的區別

維度	Command K	AI Chat
目的	修改代碼	理解、學習、討論
輸出位置	直接寫進編輯器	在側邊欄顯示
上下文	當前選中的代碼	整個代碼庫（按需）
交互風格	單向指令	多輪對話

4.2 典型對話場景

① 理解陌生代碼

你：幫我解釋一下 src/utils/auth.ts 這個文件在做什麼

Cursor AI：好的，讓我先查看這個文件...（自動讀取文件）
這個文件主要負責用戶認證邏輯，包含三個核心功能：
1. generateToken() - 生成 JWT token
2. verifyToken() - 校驗 token 有效性
3. hashPassword() - 使用 bcrypt 加密用戶密碼

設計上採用了...

② 調試報錯

你：TypeError: Cannot read property 'map' of undefined
這是什麼原因？怎麼修復？

Cursor AI：（自動定位錯誤位置的代碼）
這個錯誤發生在 UserList 組件第 12 行，原因是 users 初始值為 undefined。

修復方案：

③ 學習新技術

你：我想用 Next.js 14 App Router 重寫這個項目，第一步應該做什麼？

Cursor AI：讓我先看一下項目結構...
基於你當前的技術棧（React 18 + Vite），遷移到 Next.js 14 的建議步驟：

1. 第一步：初始化新的 Next.js 項目
   npx create-next-app@latest my-nextjs-app

2. 文件結構映射
   pages/*.tsx → app/*/page.tsx
   utils/     → 保持在根目錄
   components/ → 移動到 app/components/ 或 components/

3. ...（詳細方案）

需要我幫你開始第一步嗎？

4.3 Chat 中的實用技巧

• 📎 快速添加文件引用：在 Chat 輸入框中拖入文件，或輸入 @ 後選擇文件/文件夾
• 📝 複製代碼塊：AI 回答中的代碼可以一鍵複製到編輯器
• 🔄 一鍵 Apply：點擊「Apply」按鈕直接將 AI 修改應用到文件
• 💾 保存對話歷史：重要對話可以保存為筆記，方便回顧

---

5. 核心功能三：Rules（規則定製）

Rules 是 Cursor 中最被低估、但最強大的功能之一。它讓你告訴 AI 你團隊的編碼規範，從此 AI 生成的代碼不再是「教科書答案」，而是真正符合你項目風格的代碼。

5.1 設置位置

有三個層級的 Rules，優先級從高到低：

1. 項目級（優先級最高）：在項目根目錄創建 .cursorrules 文件
2. 團隊級：在 Cursor 團隊設置中配置
3. 全局級：Cursor 設置 → Features → Global Rules

5.2 .cursorrules 文件示例

在你的項目根目錄創建 .cursorrules 文件：

## 項目技術棧
- 前端框架：React 18 與 Next.js 14（App Router）
- 語言：TypeScript 5.3+，嚴格模式
- 樣式：Tailwind CSS 3.x
- 狀態管理：Zustand（輕量場景）/ TanStack Query（服務端狀態）
- 測試：Vitest + React Testing Library
- Lint/Format：ESLint + Prettier（配置見 .eslintrc.json）

## 編碼規範
1. 始終使用類型而非 any。如需靈活類型，優先使用 unknown
2. 組件使用函數式寫法，優先箭頭函數
3. 使用具名導出（export const）而非默認導出，便於全局搜索
4. 複雜邏輯需添加註釋說明「為什麼這麼寫」而非「寫了什麼」
5. 異步函數始終處理錯誤（try-catch 或 Promise.catch）
6. 遵循現有文件和文件夾命名風格（kebab-case 文件名，PascalCase 組件名）
7. 使用項目中的 utility 函數和 hooks，不要重複實現

## 不要做的事情
- 不要引入新的第三方庫，除非明確詢問後獲得許可
- 不要修改項目的 package.json 或配置文件，除非是特定任務需要
- 不要使用 @ts-ignore 或 @ts-nocheck 抑制類型錯誤
- 不要在客戶端組件中直接使用 process.env

5.3 Rules 生效後的效果

有了這份 Rules，AI 在生成代碼時會：

✅ 自動使用 TypeScript 嚴格模式
✅ 使用項目已有的工具（zustand、tanstack-query）
✅ 遵循你的命名規範（kebab-case 文件、PascalCase 組件）
✅ 不會引入新依賴
✅ 寫出的代碼風格與你團隊完全一致

🎯 實戰建議：團隊中共同維護一份 .cursorrules，提交到 Git 倉庫。 新成員加入後，AI 會「繼承」團隊的編碼習慣。

---

6. 核心功能四：@-mention（精準引用上下文）

@ 符號是 Cursor 的「上下文控制」功能。在 Command K 和 AI Chat 中都可以使用。

6.1 @ 能引用什麼？

@文件路徑      →  引用單個文件的內容
@文件夾        →  引用整個文件夾的所有文件
@符號名        →  引用特定函數/類/變量的定義
@#文件名:行號  →  引用文件中特定位置
@web          →  聯網搜索最新信息（RAG 檢索網頁）
@docs         →  引用文檔（如 React 官方文檔、MDN）
@git          →  引用 Git 歷史（最近的 commit、PR 描述等）

6.2 實戰示例

示例 1：跨文件重構

在 Command K 中輸入：
"@src/utils/api.ts @src/hooks/useAuth.ts
重構這兩個文件中的錯誤處理邏輯，統一使用新的 ApiError 類"

示例 2：基於文檔生成代碼

"@docs/react.dev#server-components
基於 React 18 Server Components 規範重寫這個頁面組件"

示例 3：基於錯誤日誌調試

"@web 搜索 Next.js 14 'dynamic server error' 的解決方案
幫我修復 src/app/products/page.tsx 中的這個報錯"

示例 4：理解大型函數

"@src/lib/payment.ts#processPayment
用中文詳細解釋這個支付函數的完整流程，包括可能的異常情況"

6.3 為什麼 @-mention 如此重要？

過去：你告訴 AI「幫我寫這個功能」
      AI 可能引用了錯誤的工具、違背了項目規範、或忽略了已有實現

現在：你告訴 AI「@這個文件 @那個文件夾 幫我做這件事」
      AI 先閱讀這些文件，理解上下文後再給出答案

效果：代碼質量提升、錯誤率下降、不需要手動粘貼大量代碼給 AI

---

7. 核心功能五：Agent Mode（全自動編程模式）

Agent Mode 是 Cursor 2026 年的重頭戲，也是真正讓 AI 「替你編程」的功能。

按 Cmd/Ctrl + Shift + L 啟動 Agent 模式。

7.1 Agent Mode 能做什麼？

與普通的 Chat 不同，Agent 可以自主規劃、多步執行、讀取/修改多個文件、運行命令並根據結果調整。

一個典型的 Agent 任務：

你：在這個 Next.js 項目中實現一個用戶註冊功能，包括表單、服務端驗證和數據庫寫入

Agent 的執行過程：
1. 🔍 閱讀項目結構，瞭解已有的用戶相關代碼
2. 📋 制定計劃：需要創建哪些文件
3. 📝 創建 `src/app/register/page.tsx`（註冊頁面）
4. 📝 創建 `src/app/api/register/route.ts`（API 路由）
5. 📝 修改 `src/lib/prisma.ts`（添加 User 模型）
6. 📝 創建 `src/lib/validation.ts`（Zod 校驗規則）
7. 🔄 自動運行 `npx prisma migrate dev` 創建數據庫表
8. 🧪 檢查是否有編譯錯誤，自動修復
9. ✅ 完成任務，向你彙報執行摘要

7.2 適合用 Agent 的場景

場景	示例
功能實現	「實現一個 Todo List 功能，包含增刪改查和本地存儲」
代碼遷移	「把這個 Vue 2 組件遷移到 React 18」
項目初始化	「用 Vite + React + TypeScript 創建一個新項目，配置 ESLint、Prettier、Tailwind」
Bug 排查	「定位並修復登錄頁面在 Safari 瀏覽器上的白屏問題」
代碼重構	「把 src/services/ 目錄下所有 JavaScript 文件重寫為 TypeScript」
編寫測試	「為 src/utils 目錄下的所有函數編寫完整的單元測試」

7.3 使用 Agent 的注意事項

✅ 明確目標：任務描述越清晰，Agent 完成得越好
✅ 從小處開始：先試試 1-2 個文件的小任務，再讓它處理複雜需求
✅ 全程監控：Agent 會在執行過程中顯示它正在做什麼，有問題隨時可以中斷
✅ 人工審查：Agent 完成後，務必自己 Review 一遍代碼，尤其是涉及安全和數據庫操作的部分
✅ Git 提交：在執行 Agent 任務前確保工作區乾淨，便於區分 AI 修改

7.4 Agent Mode 的侷限性

❌ 複雜業務邏輯仍可能出錯，尤其是跨多個系統的交互
❌ 對大型項目的完整重構（>100 個文件）仍需要人工引導
❌ 無法處理需要人工判斷的決策（如產品設計選擇、數據庫選型）
❌ 有時會陷入「死循環」，反覆修改同一文件

---

8. 實戰場景：10 個讓你效率翻倍的 Cursor 技巧

下面是從日常開發中總結的 10 個高頻場景 + 完整操作步驟。

8.1 場景一：快速搭建新項目

目標：用最短時間搭建一個 Vite + React + TypeScript + Tailwind 的項目

操作步驟：
1. 在 Cursor 中打開一個空文件夾
2. 按 Cmd + L 打開 Chat
3. 輸入：
   "幫我在當前目錄初始化一個 Vite + React + TypeScript 項目，
    配置好 Tailwind CSS 3.x、ESLint、Prettier。
    項目結構要包含 src/components、src/hooks、src/utils、src/pages。
    寫一個示例頁面展示項目已就緒。"
4. AI 會自動：
   - 運行 npm create vite
   - 安裝 tailwindcss、postcss、autoprefixer
   - 創建配置文件（tailwind.config.js、postcss.config.js）
   - 創建示例組件和頁面
5. 你只需：npm install → npm run dev

8.2 場景二：讀懂陌生代碼庫

目標：接手一個陌生項目，快速理解其架構和核心邏輯

操作步驟：
1. 用 Cursor 打開項目根目錄
2. 按 Cmd + L，輸入：
   "請分析這個項目的整體結構和技術棧，包括：
    ① 前端框架、UI 組件庫、狀態管理方案
    ② 路由結構和主要頁面
    ③ 數據請求和狀態管理方式
    ④ 項目的入口文件和初始化流程
    用中文輸出一份結構化的項目分析報告"
3. Cursor 會讀取 package.json、目錄結構和關鍵文件，生成完整分析
4. 進一步提問："@src/store/index.ts 詳細解釋狀態管理的設計"

8.3 場景三：把錯誤信息變成修復方案

目標：控制檯報錯，快速定位和修復

操作步驟：
1. 在終端看到報錯（如 Webpack 編譯錯誤、運行時 TypeError）
2. 複製錯誤信息
3. 按 Cmd + L 打開 Chat，粘貼錯誤
4. 或使用 Quick Fix：
   - 在有紅色波浪線的代碼上按 Cmd + .
   - 選擇「Fix with AI」
5. AI 會：
   - 定位錯誤代碼位置
   - 解釋錯誤原因
   - 給出修復代碼
   - 一鍵應用修復

8.4 場景四：為現有代碼添加單元測試

目標：為 src/utils 目錄下的工具函數添加完整測試

操作步驟：
1. 選中 src/utils 文件夾
2. 按 Cmd + Shift + L 打開 Agent
3. 輸入：
   "為 src/utils/ 目錄下所有函數編寫單元測試，使用 Vitest 作為測試框架。
    每個函數至少包含 3 個測試用例：正常場景、邊界情況、異常場景。
    測試文件放在 src/utils/__tests__/ 目錄下，
    命名格式為 <filename>.test.ts。"
4. Agent 會自動創建測試文件並填充測試用例
5. 運行 npm test 驗證覆蓋率

8.5 場景五：API 文檔 → 前端代碼

目標：根據後端 Swagger/OpenAPI 文檔自動生成前端 API 調用代碼

操作步驟：
1. 準備好 API 文檔鏈接或 JSON schema
2. 按 Cmd + L：
   "@web https://api.example.com/docs/swagger.json
    根據這個 API 文檔，幫我創建 src/api/ 目錄下的 API 調用封裝，
    使用 TypeScript 定義完整的請求和響應類型。"
3. Cursor 會讀取 Swagger 文檔，自動生成：
   - src/api/types.ts（類型定義）
   - src/api/client.ts（HTTP 客戶端封裝）
   - src/api/user.ts（按模塊分組的 API 方法）

8.6 場景六：代碼 Review 自檢

目標：提交 PR 前讓 AI 幫你 Review 一遍代碼

操作步驟：
1. 確保你的改動是 Git 的最新 commit
2. 按 Cmd + L：
   "@git diff HEAD~3..HEAD
    Review 我最近 3 個 commit 的改動，檢查：
    1. 是否有明顯的 bug 或邏輯錯誤
    2. 是否缺少錯誤處理或邊界情況判斷
    3. 是否有安全漏洞（SQL 注入、XSS、敏感信息洩露）
    4. 代碼是否符合項目規範
    5. 性能是否有優化空間
    用中文給出結構化的 Review 報告"
3. 根據 AI 報告修復問題後再提交 PR

8.7 場景七：根據設計稿生成頁面

目標：有一張設計稿或截圖，快速生成對應的前端代碼

操作步驟（需 Gemini 或支持多模態的模型）：
1. 按 Cmd + L 打開 Chat
2. 點擊輸入框中的 📎 圖標
3. 上傳設計稿圖片或粘貼截圖
4. 輸入：
   "根據這張設計稿，生成對應的 React + Tailwind CSS 代碼。
    要求：
    - 精確還原設計稿的佈局和樣式
    - 使用響應式設計（移動端友好）
    - 添加交互動畫和 hover 效果
    - 使用語義化的 HTML 標籤"
5. AI 會生成完整的 JSX/TSX 代碼和 className

8.8 場景八：從 JavaScript 遷移到 TypeScript

目標：將現有 JavaScript 項目升級到 TypeScript

操作步驟：
1. 打開 Agent 模式（Cmd + Shift + L）
2. 輸入：
   "將 src/ 目錄下所有 .js 和 .jsx 文件遷移到 TypeScript：
    1. 首先讀取每個文件，推斷類型
    2. 將文件重命名為 .ts / .tsx
    3. 添加缺失的類型註解（尤其是函數參數和返回值）
    4. 創建類型定義文件 src/types/index.ts
    5. 確保 tsc --noEmit 無報錯

重要規則：
- 不要使用 any，除非明確無法推斷
- 複雜類型優先使用 interface 而非 type
- 保留原有邏輯和行為，只做類型化"
3. Agent 會逐個文件進行遷移，期間可能需要你確認一些模糊的類型

8.9 場景九：一鍵生成複雜組件

目標：實現一個功能完整的 DataTable 組件，包含排序、搜索、分頁

操作步驟：
1. 新建文件 src/components/DataTable.tsx
2. 在空文件中按 Cmd + K
3. 輸入：
   "實現一個功能完整的 React DataTable 組件，要求：
    - 支持按列點擊排序（升序/降序）
    - 支持全文搜索過濾
    - 支持分頁和每頁數量調整
    - 支持自定義單元格渲染
    - 使用 Tailwind CSS 美化樣式
    - 使用 TypeScript 泛型支持任意數據類型
    - 提供完整的使用示例"
4. AI 在 10-30 秒內生成 200-400 行完整代碼
5. 按需微調細節

8.10 場景十：數據庫 Schema → 完整 CRUD

目標：根據數據庫 schema 自動生成完整的 CRUD API 和頁面

操作步驟：
1. 準備好 schema 文件或 Prisma schema
2. Agent 模式輸入：
   "@prisma/schema.prisma
    基於這個數據庫 schema，生成完整的 CRUD 功能：
    1. API 路由（Next.js App Router）：GET / POST / PUT / DELETE
    2. 前端頁面：列表頁（帶搜索和分頁）、創建表單、編輯頁面
    3. 使用 React Hook Form + Zod 做表單驗證
    4. 使用 TanStack Query 管理服務端狀態
    5. 所有接口需要鑑權（使用現有的 auth middleware）
    代碼風格遵循 .cursorrules 中的規範"
3. Agent 會自動生成 10+ 個文件，包含完整的業務邏輯

---

9. 高階配置：自定義模型、快捷鍵與工作流

9.1 自定義模型（支持 DeepSeek、Qwen 等國產模型）

Cursor 支持通過 OpenAI-compatible API 接入任何大模型：

設置路徑：Cursor Settings → Models → Add Custom Model

配置示例（DeepSeek V4）：
  Base URL: https://api.deepseek.com/v1
  API Key:  your-deepseek-api-key
  Model:    deepseek-chat
  Context:  128000

配置示例（本地 Ollama）：
  Base URL: http://localhost:11434/v1
  API Key:  ollama（任意值）
  Model:    qwen2.5:14b
  Context:  128000

📖 相關教程：

• Ollama 本地部署私有 AI 完整教程
• DeepSeek V4 接入 Claude Code 完全教程

9.2 自定義快捷鍵

如果你習慣了 VS Code 的快捷鍵，可以在 keybindings.json 中添加：

[
  {
    "key": "cmd+i",
    "command": "cursor.chat",
    "when": "editorFocus"
  },
  {
    "key": "cmd+j",
    "command": "cursor.command-k"
  },
  {
    "key": "shift+cmd+c",
    "command": "cursor.agent"
  }
]

9.3 推薦的 VS Code 插件組合

Cursor 兼容幾乎所有 VS Code 插件，以下是推薦組合：

🧩 Prettier + ESLint（代碼格式化）
🧩 GitLens（Git 增強，配合 @git 使用效果更佳）
🧩 Error Lens（行內顯示報錯，配合 Quick Fix AI 使用）
🧩 Path Intellisense（路徑自動補全）
🧩 Tailwind CSS IntelliSense（Tailwind 類名提示）
🧩 Live Server（本地預覽網頁）
🧩 Code Spell Checker（拼寫檢查，避免變量名拼寫錯誤）

---

10. Cursor vs 競品對比：Copilot、Windsurf、Bolt.new

到 2026 年，AI IDE 市場已經有了多個成熟產品。以下是橫向對比：

10.1 橫向對比表

維度	Cursor	GitHub Copilot	Windsurf	Bolt.new
開發者	Anysphere	GitHub	Codeium	StackBlitz
核心定位	完整 AI IDE	VS Code 插件	AI IDE	瀏覽器中的 AI IDE
主要模型	GPT-5、Claude 4.0	GPT-4o、Codex	Codeium、Claude	Bolt AI
Agent 能力	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
上下文	整個代碼庫	當前文件+鄰近	整個代碼庫	項目級
.cursorrules 等價物	✅ 原生支持	❌ 部分支持（Copilot Custom Instructions）	✅ .codeium_rules	✅ 項目級配置
本地運行	✅ 桌面應用	❌ 插件依賴 VS Code	✅ 桌面應用	❌ 瀏覽器
中文支持	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐
價格（月）	$20 Pro	$10 Copilot	$15 Pro	免費/$29 Pro
國內直連	✅ 可直接訪問	❌ 需翻牆	✅ 可直接訪問	✅ 可直接訪問

10.2 選擇建議

① 追求最強 AI 能力 + 完整 IDE 體驗 → Cursor

理由：Agent 模式最成熟、Rules 功能最強大、@-mention 最靈活
適合：專業開發者、對效率敏感的團隊

② 已有 VS Code 重度使用習慣、不想切換 IDE → Copilot

理由：不改變現有工作流，價格更便宜
適合：輕度 AI 輔助用戶、預算敏感

③ 想要瀏覽器中零配置完成全棧項目原型 → Bolt.new

理由：在瀏覽器中直接生成完整項目，一鍵部署
適合：快速原型、學習演示、教學場景

④ 想要更便宜的 AI IDE 替代方案 → Windsurf

理由：價格更低，功能與 Cursor 接近
適合：對價格敏感的獨立開發者

📖 延伸閱讀：GitHub Copilot 完全使用指南

---

總結

Cursor 不是「更快的代碼補全工具」，而是一種全新的編程方式。

在傳統編程中，你的工作流是：

理解需求 → 查文檔 → 寫代碼 → 調試 → 重構

使用 Cursor 後，工作流變成：

描述需求 → AI 生成初稿 → Review 和微調 → 完善細節

你的核心價值從「寫代碼」轉向「定義問題、審查質量、把握方向」。這不是減少了你的工作量，而是把你從 80% 的機械性工作中解放出來，專注在真正創造價值的 20%。

🎯 學習建議：

1. 第 1 周：每天至少使用 3 次 Command K，感受「描述需求 → AI 生成」的效率
2. 第 2 周：創建你的第一個 .cursorrules 文件
3. 第 3 周：嘗試一次 Agent 模式，讓 AI 獨立完成一個小型功能
4. 第 4 周：形成你的個人 AI 編程工作流

Cursor 的學習曲線很平緩，但收益巨大。 一旦你適應了「用自然語言描述目標」的編程方式，回到沒有 AI 的編輯器會感覺像用記事本寫代碼一樣原始。

---

延伸閱讀

• 2026 年 AI Agent 實戰終極指南（本文的上手指南）
• GitHub Copilot 完全使用指南
• DeepSeek V4 接入 Claude Code 完全教程
• Ollama 本地部署私有 AI 完整教程
• 2026 年最新 AI 大模型進階使用指南
• 國內使用 AI 的完整方案

---

---

延伸阅读

• 流媒体使用与常见问题汇总
• 全平台代理客户端配置指南
• 直连、中转、专线线路差异说明
• AI 工具新手入门与常见问题

免责声明

本文仅供技术交流和学习参考。涉及第三方服务的链接可能包含 sponsored 标记，请自行核实服务条款、价格和可用性，并遵守当地法律法规。