Cursor IDE 有蠻多小撇步與快捷鍵，可以幫我們更有效率，且可以更精準地生成優良的程式碼。

這篇將會介紹 Cursor IDE 中常用的指令為主，以及 VSCode 的快捷鍵，能夠充分發揮這些工具的潛力，大大提升開發速度呦！

Claude 的部分則是也會提一些，介紹幾個比較「通用」下指令的訣竅。

常用指令

Cursor 常用的 tag

1. @{程式碼檔案} 檔案

   • 請 AI 讀取某些檔案作為「上下文」參考依據
   • 以此指令產出的程式碼會比較有脈絡，而不會「橫空出世」寫出不符我們要求的「範例程式碼」
   • 如以下所示，明確指示 Cursor 幫我把功能移到特定檔案來實作
     

2. @codebase

   • 在側邊欄打開的情況下（開啟 Chat 模式），在輸入欄中輸入 @codebase
   • 輸入這個指令後，Cursor 會讀取整個專案的程式碼檔案作為「脈絡」依據，簡單來說就是加強版的 @OOXX 指令。
   • 如以下圖片所示，請 Cursor 幫我找哪些組件用到了 React Markdown 這個函式庫。
     

3. 個人常用指令模板：

   • 單獨檔案篇：參考 @OOXX，幫我依據此程式碼，生成新的 {實作 / 測試 / 模板…等}。
   • 解釋檔案篇：@codebase，請幫我找到跟 {你要問的功能} 有關的程式碼 ，列出檔案並解釋其中內容。

其他 VSCode 也常用到的快捷鍵

先前已經介紹過，Cursor IDE 是基於 VSCode 的 AI 整合 IDE，這邊也幫大家整理了一些 VSCode 常用的快捷鍵。

以下這些是自己在用 Cursor 時，最常使用到的快捷鍵。

• Cmd + Shift + P：
  • 搜尋檔案
  • 鍵入 > ，讓你可以快速執行各種 VSCode 內建或是插件之指令
• Opt + F12：快速打開 / 關閉終端機面板。
• F12（Cmd + B ）：快速導引到「使用該程式碼」的地方

Claude 怎麼下指令？

基本技巧跟 ChatGPT 差不多，不外乎以下幾個重點，這邊幫大家整理一下：

• 清晰且具體的指令：明確定義了你希望 AI 幫你做的事。
  • e.g. 請幫我用 TypeScript 寫一個 compose 函式，該函式接收一個數字陣列，並回傳其中最大值。
• 提供明確的脈絡資訊：為 AI 提供相關的背景資訊（上下文脈絡資訊）。
  • e.g. 我正在開發一個線上購物網站，需要一個演算法來計算購物車中商品的總價，包括折扣和稅金之計算。
• 給「優良」範例：除了提供指令以外，最好也給幾個範例。
  • e.g. 請給我幾個有關程式演算法範例，像是「小蝦米之於大鯨魚」這種類比方式。
• 迭代與完善：不要期望一次就能得到完美的結果。
  • e.g. 上個回答之後，再新增有關「資料結構」的類比舉例。
• 將複雜任務拆解串連為子任務：在處理比較複雜的任務時，最好將其拆解成小任務做串連指令。
  • 不好的範例：請幫我做一個完整的購物網站
  • 較好的範例
    • e.g. 首先，我要能夠在購物網站讓使用者可以註冊和登入，請幫我用 firebase 實作其功能。
    • e.g. 接著，幫我製作使用者的個人頁面，且該頁面須在「登入後」才能訪問。

結語

為大家總結重點

• Cursor IDE：
  • 使用 @ 給 Cursor IDE 比較精確的「程式碼」範圍指令，生成的 Code 更為精準。
  • 熟記 VSCode 快捷鍵，開發更有效率。
• Claude / ChatGPT：
  • 拆解：大問題拆成小問題，可以用 Follow Up 方式接續問下去。
  • 具體：以明確清晰之條件指示 AI 。
  • 脈絡：提供 AI 完整的脈絡，或是賦予其角色。

值得一提的是，因為 Cursor IDE 也是基於 Claude 或是 ChatGPT 這些 LLM 模型來生成程式碼，因此也是要以「具體且清晰脈絡」的指令，請 AI 進行生成喔！