參考Youtube影片

400小時Cursor經驗分享：AI輔助開發的終極指南

嘿嘿，各位開發者們！今天要跟大家分享一個超級厲害的AI開發小幫手 - Cursor！我可是花了整整400多個小時跟這位AI助手培養感情，現在要把所有的秘笈都倒給你們啦！不管你是AI開發新手還是老鳥，保證這篇文章都能讓你學到滿滿的乾貨。準備好了嗎？讓我們一起來探索Cursor的神奇世界吧！

Cursor是什麼？為什麼你該care?

Cursor是一款強大的AI輔助開發工具，它能幫助我們寫程式碼、解決bug、甚至設計系統架構。想像一下，有一個超級聰明的AI助手24小時待命，隨時幫你解決開發難題，是不是很酷？

但是，別以為有了AI就可以躺著收錢了喔！正確使用Cursor才能發揮它的最大威力。接下來，我會把我的心得一五一十地告訴你們，保證讓你的開發效率飆升！

Cursor使用的必備設定

首先，我們要先把Cursor設定好，才能開始我們的AI開發之旅。

1. 創建do.cursor規則文件

這個文件就像是你跟Cursor的溝通手冊，超級重要！

# Project Overview
[在這裡寫下你的專案願景]

# Personality
教我就像一個資深開發者那樣

# Tech Stack
前端：React, Next.js
後端：Node.js, Express
資料庫：MongoDB

# Processes
錯誤修復流程：
1. 用簡單的話解釋錯誤
2. 寫出3段分析段落
3. 提供修復建議

# Environment Variables
DATABASE_URL=...
API_KEY=...

# Current File Structure
[使用tree命令獲取的文件結構]

# Important Instructions
[重複最重要的指令]

# Other Context
[其他相關資訊]

# Comments
請務必在程式碼中加入詳細註解

2. 選擇正確的AI模型

去Cursor設定裡，把這些模型打開：

  • Claude 3.5 Sonnet (1022版本)
  • Gemini Pro
  • GPT-4
  • Claude-3-Opus-20240229

我個人最常用的是Sonnet，超級給力！

提示技巧大公開

要讓Cursor發揮最大功效，提示技巧可是關鍵中的關鍵！來看看我的獨門秘笈：

  1. 越少程式碼越好：告訴Cursor “the fewer lines of code, the better”，它就會寫出簡潔有力的程式碼。

  2. 像資深開發者那樣：使用 “proceed like a senior developer” 或 “proceed like a 10x engineer”，讓AI模仿頂尖開發者的思維。

  3. 堅持到底：加上 “do not stop working until you’ve implemented this feature fully and completely”，避免AI半途而廢。

  4. 理性分析：遇到錯誤時，讓AI先寫3段分析段落，避免過早下結論。

  5. 簡潔回答：加上 “answer in short” 可以獲得簡潔的回答，節省時間。

  6. 保留註解：記得說 “do not delete comments”，保留重要的程式碼註解。

  7. 總結當前狀態：使用 “summary of current state” 提示，幫助AI理解目前的開發進度。

專業的提示結構

想要寫出高質量的提示？試試這個結構：

  1. 用2-4句話解釋你要做什麼
  2. 標記相關文件
  3. 說明如何執行，以及不該做什麼
  4. 提供上下文資訊
  5. 重複核心指令
  6. 指定輸出格式

特殊MD文件的魔力

為了讓Cursor更懂你的專案，創建一些特殊的Markdown文件：

  • database_setup.md：描述資料庫結構、表格、欄位等
  • design_principles.md：UI/UX設計原則
  • roadmap.md：專案發展路線圖

這些文件可以大大提升Cursor的理解能力，讓它更好地協助你的開發工作。

避免技術債務的秘訣

使用AI開發工具時，很容易不知不覺就積累了大量技術債務。以下是我的建議：

  1. 持續學習：不要完全依賴AI，要不斷提升自己的技能。
  2. 理解每一行程式碼：不要盲目接受AI生成的程式碼，要確保自己理解每一部分。
  3. 定期重構：不要讓程式碼變得難以維護，定期進行重構。
  4. 寫詳細註解：為AI生成的程式碼添加詳細註解，幫助未來的自己或其他開發者理解。

何時使用其他工具？

Cursor很強大，但有時候我們也需要其他工具來輔助開發：

  • 設計階段：使用Figma或Sketch進行UI/UX設計
  • 資料庫設計：可以考慮使用專門的資料庫設計工具
  • 版本控制：Git依然是不可或缺的工具
  • 測試：使用專門的測試框架來確保程式碼品質

記住，Cursor是輔助工具，不是萬能的。合理搭配其他工具，才能打造出最佳的開發流程。

Cursor vs. 人工編碼：何時該用哪個？

來看看這張表格，幫你快速決定何時該用Cursor，何時該自己動手：

情境Cursor人工編碼
簡單的CRUD操作✅❌
複雜的業務邏輯❌✅
程式碼重構✅❌
新功能原型✅❌
性能優化❌✅
錯誤修復✅✅
文檔生成✅❌

進階Cursor使用技巧

想要成為Cursor大師嗎？試試這些進階技巧：

  1. 自定義程式碼片段：為常用的程式碼片段創建快捷方式，讓Cursor更快生成。

  2. 使用多個AI模型：不同的任務使用不同的AI模型，發揮各自的優勢。

  3. 建立專案特定的提示庫：為你的專案創建一個提示庫，存放常用的提示。

  4. 結合版本控制：讓Cursor幫你生成有意義的commit訊息。

  5. 自動化測試生成：使用Cursor生成單元測試和整合測試。

實戰案例：使用Cursor開發一個Todo App

讓我們通過一個實際的例子來看看如何使用Cursor開發一個簡單的Todo App。

首先，我們先告訴Cursor我們的需求：

我們要開發一個簡單的Todo App，需要以下功能：
1. 添加新的todo項目
2. 標記todo項目為完成
3. 刪除todo項目
4. 顯示所有todo項目列表

使用React作為前端框架，Node.js和Express作為後端，MongoDB作為資料庫。請幫我設計基本的架構和API。

Cursor可能會給出這樣的回應：

好的，我來幫你設計Todo App的基本架構和API。

前端 (React):
1. 組件結構
   - App
     - TodoList
       - TodoItem
     - AddTodoForm

2. 主要功能
   - 顯示todo列表
   - 添加新todo
   - 更新todo狀態
   - 刪除todo

後端 (Node.js + Express):
1. API端點
   - GET /api/todos：獲取所有todo項目
   - POST /api/todos：創建新的todo項目
   - PUT /api/todos/:id：更新指定todo項目的狀態
   - DELETE /api/todos/:id：刪除指定的todo項目

2. 資料模型 (MongoDB)
   Todo:
   - id: ObjectId
   - text: String
   - completed: Boolean
   - createdAt: Date

API設計：
1. GET /api/todos
   響應: [{ id, text, completed, createdAt }, ...]

2. POST /api/todos
   請求體: { text: string }
   響應: { id, text, completed, createdAt }

3. PUT /api/todos/:id
   請求體: { completed: boolean }
   響應: { id, text, completed, createdAt }

4. DELETE /api/todos/:id
   響應: { message: "Todo deleted successfully" }

這個設計提供了基本的CRUD操作，你可以根據需要進行擴展。

有了這個基本架構，我們就可以開始實現具體的功能了。讓我們用Cursor來幫我們寫一個簡單的後端API：

請幫我用Node.js和Express實現GET /api/todos的路由處理函數。使用async/await語法，並假設我們已經有一個Todo模型。

Cursor可能會生成類似這樣的程式碼：

const express = require('express');
const router = express.Router();
const Todo = require('../models/Todo');

router.get('/api/todos', async (req, res) => {
  try {
    const todos = await Todo.find().sort({ createdAt: -1 });
    res.json(todos);
  } catch (error) {
    console.error('Error fetching todos:', error);
    res.status(500).json({ message: 'Server error' });
  }
});

module.exports = router;

這樣，我們就快速實現了一個獲取所有todo項目的API端點。接下來，我們可以繼續使用Cursor來實現其他API端點和前端組件。

結語

哇，我們今天學到了超多東西啊！從Cursor的基本設定到進階使用技巧，再到實際的開發案例，相信大家對如何運用AI來提升開發效率已經有了深入的了解。

記住，Cursor是個強大的工具，但它並不能完全取代人類開發者的創造力和判斷力。善用Cursor，讓它成為你的得力助手，但同時也要不斷提升自己的技能。

最後，我想說的是，AI輔助開發是未來的趨勢，早點掌握這項技能，你就能在這個快速變化的技術世界中保持競爭力。所以，快去試試Cursor吧，相信你會愛上它的！

希望這篇文章對你有幫助。如果你有任何問題或者使用Cursor的心得，歡迎在評論區分享喔！我們一起在AI的浪潮中乘風破浪，創造更多令人驚嘆的程式作品！加油！