Cursor AI 教學10x你的Programming 效率

今天,我想和你分享,我用了Cursor 4個月,去開發軟件,的終極使用心得。

Cursor 是一個可以讓你寫Program的開發編輯器。它其實是Visual Studio Code的一個分支,但它加入了很多,AI輔助寫程式的功能。

這個Cursor,真的非常厲害,是一個劃時代的產物。

它將AI Model的寫Code的能力發揮到極致 - 可以超強地幫你寫Code,真的可以10X你的開發效率!

現在,很多時候,我的工作,就是將我要寫的東西,用英文打出來,然後Review一下AI寫的Code,再試試看。

你可以說,我由自己寫Program,變成了控制電腦去寫Program!

整個時代已經不同了!

這是一個令人很興奮的時代。代表著一個人可以做到超多的東西。

準備好了嗎? 我們開始吧!

前言

其實我自上年六月,已經有聽聞過Cursor。到了10月,就真的落手落腳,去用它寫程式。

如果你用現在的我,和一年的我比較,可能10個以前的我, 都不夠我現在一個人做到的東西快,多和準。全因為有了Cursor!

現在我做的開發,60-70%的Program,已經是由AI寫出來的了!

如果是寫Backend的話,有8 - 9成的Program,都是由AI寫。因為Backend有很多邏輯上的東西,AI處理得很好。

Frontend的話,反而會少一點,只有2至3成。因為Frontend有很多Layout的東西,細節,是要人手肉眼,慢慢調整才會好看,所以不能讓AI做。

要注意,如果你是純新手,你也可以透過Cursor去寫一些東西。但太繁複的東西則未必做到。

如果你是有基本開發底子,Cursor才能發揮最大的作用。

因此,我覺得現在是一個非常的黃金機會,去學寫Code,做開發。因為當你學會基本以後,你可以借助AI,開發出到很多很多東西。

好了,我就不說這麼多廢話了。

進入今天的主題 - 我會分享Cursor的3個主要用法,和8個Tips,讓你學會使用這個Programming神器。這些都是我這4個月以內,瘋狂使用Cursor去做開發,總結出來的心得。

P.S. 如果你想了解更多基本編程,如HTML。可以看看這編文章: HTML教學課程 (入門篇)

下載Cursor

要用Cursor,第一件事當然是去下載它。

cursor.com,下載 Cursor。

它是一個收費的軟件,價錢為 USD 20/每月。但你可以免費試用兩個星期。

Cursor 其實只有三個主要用法:

  • Auto Complete
  • Ctrl/Cmd + K 小範圍寫 Code
  • Ctrl/Cmd + L 大範圍寫 Code

1. Auto Complete

什麼是 Auto Complete 呢?

就是你寫 Code 的時候,它會提示你之後要寫什麼。

如果你想要 AI 的提示 Code,按一下 Tab 就可以了。

其實,以前的 GitHub Copilot 已經有這個功能。

但 Cursor 的 Auto Complete,是一個超級強化了的 Auto Complete。

它不但可以一行一行提示,更可以一堆一堆的 Code 提示。

它更會估到接下來你將想做什麼,去那一行...等等。有時候,你只要不斷 Tab Tab Tab Tab Tab,它就全都做好了。

就像你一邊寫 Code,AI 在旁一邊看著,幫著你似的。非常強大!

2. Ctrl/Cmd + K 小範圍寫Code

第二個用法,就是 Ctrl/Cmd + K,小範圍寫 Code 的功能。

MacBook 就按 Cmd + K。

Windows 就按 Ctrl + K。

當你有一小段的 Code 想叫 AI 改,你就可以用這 Cmd + K 的功能。

用法就是,將你要改的東西 highlight,然後按 Cmd + K。

接下來,你就可以直接用英文或是你會的語言,直接告訴 AI 你要做的東西,AI 就可以替你完成!

AI 完成後,如果你覺得可以,按 Accept 就行了。不行的話就按 Reject。

3. Ctrl/Cmd + L 大範圍寫Code

使用 Cursor 最常用的用法,就是 Ctrl/Cmd + L 了。

你會在你主要修改的檔案上,按 Cmd + L。

右邊便會出了一個 Chatbox。

接下來,把你要做的東西告訴 AI。

然後,把相關的檔案都一一加下來。

模型選擇 Claude Sonnet 3.5 就可以。

Claude Sonnet 3.5 暫時是寫 Software 最好的 Model。如果你要處理更難的問題,ChatGPT o 系列 / Deepseek R 系列的推理 Model 會表現更好。但會比較貴和要等。理解你指示也沒有 Sonnet 好。

好,最後,按 Submit 就可以了。

待 AI Generate 完 Code 後。

AI 會把所有即將要做的改動,顯示出來,你可以按 Apply,把改動放到你的檔案上。

當 Applying 完成後,你可以 Review 一下 Apply 了什麼。

綠色就是 AI 新加的 Code,紅色就是 AI 會刪減的 Code。

如果你覺得 OK,就按 Accept。

不然的話就按 Reject。

最底也有一個 Accept All,可以一下接受 AI 全部的更新!

就是這樣了!

AI 可以對很多個檔案同時進行建議,但是你要逐個檔案 Review 及 Apply。

如果有問題或是寫錯,繼續在 Follow Up 把問題,或是要做的東西告訴 AI 就可以了!

好了!基本的用法就是這樣了!

Cursor 還有其他的功能,例如 Composar。但是我覺得技術未夠成熟,很容易有 Bug,暫時不建議用。

接下來,我會和你分享使用 Cursor 的 8 個 Tips 和細節!

Tips 1: 每次只叫AI寫小小功能

用 AI 開發的一個最重要的概念,就是要把你做的東西拆細,逐個叫 AI 去做。

AI 雖然很強,但有時還是會寫錯東西的。

如果你一次過叫 AI 寫太多東西,一旦中間有一部分出錯,便會很亂。

要找哪裡錯更是很難,因為 Code 都不是你寫的。

所以,千萬不要貪心!

叫 AI 寫少少,你 Review 試一下 OK,再叫 AI 寫下一部分!

一定要 step by step!這個很重要,是第一大原則。

Tips 2: 盡量逐個Review一下AI的Code

AI 可能會在多個位置,建議新的 Code。

最穩妥的做法,就是每一 Part 新的 Code,都簡單看一看,沒有大問題才 Accept。

因為,AI 寫的 Code 不時常常都正確。有時更會刪掉你重要的 Code。

雖然我自己都很多時貪快,懶,一下子就 Accept All。但最好你就望清楚!

Tips 3: 多做Version Control

由於 AI 有時會寫錯 Code,而你又貪快沒有看清楚就 Accept 了很多次的 Code。

有時會發生,不知道哪個 Step 出了錯。

因此,多做 Version Control 就很重要。

Version Control 就是把你現在的 Code,放到 GitHub 上,儲存到一個 Version。

若果你遲下寫得太混亂出錯,也可以 Roll back 到這一個 Version,重新出發。

Tips 4: Loading 圓形,及Ctrl + Z 反回上一個動作

這個圓形是代表檔案未 Save。

沒有了這個圓形代表檔案已儲存。你要留意呀。

另外,你也可以按 Ctrl + Z,返回上一個動作,包括 AI 的 Code Apply。

Ctrl + Z 也可以進行多次的呀~

Tips 5: Codebase Submit只適合小的Codebase

在 Cmd + L 上,右手面的 Chatbox,除了 Submit 外,還有一個叫 ‘Codebase’ 的 Submit。

它的意思是,它會讀取你整個 Codebase 的內容,再替你生成 Code。

如果你 Codebase 檔案不多,是可以用這個的。

但是如果你 Codebase 很大,便不要用了。

因為 AI Model 是有 Context 上的限制的。

你還是乖乖的把相關檔案加進來,用普通的 Submit 吧!

Tips 6: 可以把有用的文件,放在一個Doc上

有時候,你寫 Code 會用到一些 AI Model 可能不會/不夠更新的 Documentation。

你可以把相關的 Documentation 複製,放上一個檔案。

在叫 AI 寫 Code 時,把這個檔案也加上。AI 就可以用你新的 Documentation 指示去寫 Code 了!

Tips 7: 寫完一個功能後,開一個新的Chatbox

由於 AI Model 是有 Context 上的限制的。

所以你在同一個 Chat 追問得太多,慢慢寫出來的 Code 便會愈來愈不準。

因此,我通常寫完一個功能後,便會開一個新的 Chatbox。

再叫 AI 寫 Code!

Tips 8: 使用Cursor Rule

在 Cursor,Settings,Rules for Settings。

可以設置一些 AI 寫 Code 的 rule。

如果你發現它有些東西老是寫得不當,可以在這裡加 Rules 做調整!

總結

好了!這就是我要分享的Cursor 3大主要用法,及8個使用Tips了。

希望大家都能好好運用這個Programming 神器!

加入我們的Email List

免費參加【網頁開發入門CRASH COURSE】線上課程!