Cursor 完全使用教程

本文是對 Juan Stoppa 的博文 Code Smarter, Not Harder: Developing with Cursor and Claude Sonnet[1] 的改譯。之所以叫改譯是因爲本文大部分內容是根據我自己的使用體驗來講的,但是因爲行文的框架是參考他的文章架構來的,因此叫做改譯。

本篇教程主要介紹了 Cursor 的基本功能的使用。

簡單介紹一下 Cursor

Cursor 是由 Anysphere[2] 這個實驗室打造的代碼編輯器,它基於 VSCode 修改派生,因此所有你在 VSCode 上的配置都能夠導入到 Cursor 裏使用,如果你平常使用 VSCode 進行開發,那麼你能夠非常便捷地遷移過來。

Cursor 和 VSCode 的最大的不同點在於它內置了 AI 進行代碼的協作,爲此它對 VSCode 進行了諸多修改,這些修改使得它的體驗比在 VSCode 上使用諸如 Github Copilot 一類的插件更加舒服。這麼說也許很單調,我以 Github Copilot 進行對比說明。

Github Copilot 在 VSCode 中是以一個插件導入的:

使用上,Copilot 的輔助集中在這幾點上:代碼補全、和 GPT 一樣的對話窗口與代碼的生成重寫。

代碼補全是我喜歡的 Copilot 的核心功能,它會在你書寫代碼的時候自動推理出後續的內容,你只需要按一下 Tab 鍵就能接收它的建議:

它的最大優點是沉浸式的體驗:我可以很方便地複寫一些樣板代碼,不需要離開我的編輯器,不需要去複製黏貼原有的代碼——這是不講生成效果而言的,然而事實上它在大部分情況下確實能夠生成出我想要的代碼。

而後是和 GPT 一樣的對話窗口,它的優點是能夠便捷地將當前你正在編輯的代碼的上下文同時提交給大模型,從而獲得更好的生成效果:

最後是平平無奇的編輯器內的代碼生成編輯重寫,你可以通過 VSCode 的小燈泡(正式名叫 Code Action,用於對代碼做出一些行爲)觸發:

選擇使用 Copilot 進行修改後,會彈出相應的 prompt 輸入框,你可以輸入 /doc 之類的命令幫助 Copilot 是進行文檔生成或是更好地對你的代碼做出修改 / 重寫:

雖然看起來很 awesome ,但是我個人的實際體驗是不太行的。:( 因爲它的重寫大多數情況下會重新生成一份代碼,然後我又要去刪除掉原有的代碼...... 只能說,我用 Copilot 主要就是愛代碼補全這個功能。

而 Cursor 的使用體驗尤爲驚人,Copilot 做得好的,它做得更好; Copilot 做不好的,它做得趨於完美。

代碼補全,個人體驗下來精度更加高,Copilot 時常會出現不能完好生成封閉的代碼塊的情況(例如不能正確生成 () {} 的彼此的配對),但它很少出現這種情況。

對話窗口,我的天哪,Copilot 和它對比真的是個垃圾,因爲 Cursor 對話生成的代碼是可以直接應用到你的代碼上的:

之所以 Cursor 能直接將修改部分的內容應用到你的代碼上,是因爲它自己微調了一個模型,讓 LLM 輸出了 Git 那樣的 diff fomat[3]。藉助 diff format 它能夠精確地修改相應地代碼段。

並且更舒服的是, Cusor 在一次對話裏能夠方便地傳遞多個源代碼文件或是掃描你整個項目的代碼倉(按下 ctrl + enter)提取出相關內容作爲向大模型詢問的上下文,以獲得更精確的回答:

可以通過相關 UI 快速添加相關文件,按下 ctrl + enter 會基於代碼倉的代碼進行對話

生成速度和索引速度非常流暢,因爲它會類似於 JetBrains 那樣對代碼倉建立索引,不過它的索引是做向量化(embeddings,習慣翻譯是向量內嵌,但我喜歡叫它向量化),因此在索引的時候可以便捷地做相似性的搜索以獲得更好的生成效果。

除此之外,Cursor 自己內置了比較方便的快捷鍵,在後文裏我會提到這些內容。

總之簡單粗暴的一句話:Cursor 真的使用體驗爆殺 Copilot。

雖然從我之前寫 VSCode 的插件的經驗來看,之所以一些東東 Copilot 使用體驗一般,最主要還是因爲作爲 VSCode 插件限制了它,但是 Cursor 是魔改的編輯器,因此很多受限的功能都能大膽自由地去做,也無怪乎 Cursor 能做得那麼好。

Cursor 的基本使用

安裝

Cursor 需要去它的官網上下載:https://www.cursor.com/。下載完後需要註冊才能使用,支持 Google 與 Github 賬號登錄。

Cursor 採取的是訂閱制。新用戶可以試用兩週的 Pro 訂閱。而要訂閱 Pro 的話,每個月需要支付 20 刀(大約一百四十元上下浮動)。雖然它確實好用,但是有丟丟小貴是真的(

安裝完後,Cursor 會在第一次啓動時提示你是否要導入你的 VSCode 配置,導入完成後,你基本上就擁有了 AI 增強版的 VSCode 了。

快捷鍵及對應的功能

Cursor 具有以下快捷鍵使用相應的 AI 功能。

1. CTRL/CMD + L 打開對話框

使用 CTRL/CMD + L 鍵在編輯器的右邊打開對話框(這個 L 是 vim 鍵位下的向右,vim 鍵位下的方向鍵是 h,j,k,l 在鍵盤上爲一行的鍵位,h在左邊所以向左,l 在右邊向右,j 向下 k 向上。我很喜歡這一點)。

2. CTRL/CMD + K 打開生成窗口

使用 CTRL/CMD + K 鍵在光標停留上方(因爲 k 代表向上!💕)打開生成窗口:

需要額外說明的是,當你選中一塊內容後,按下 CTRL/CMD + K 鍵,也能夠打開相應的窗口,此時生成內容依據的上下文會是你選中的內容:

3. CTRL/CMD + I 打開 Composer

使用 CTRL/CMD + I 能夠打開 Cursor 的特殊功能:Composer。Composer 是 Cursor 的特色功能,它的功能就是在一個對話窗口裏同時對多個文件進行修改。

想要使用 Composer ,首先要在 Cursor 的設置裏打開它,你需要按這個順序訪問它的設置頁面:File > Prefereces > Cursor Settings > Features > Enable Composer

使用 CTRL + I 打開的 Composer 是這樣的一個可以拖動的小面板界面:

你可以在這裏輸入一個分步驟、涉及多文件的複雜修改,而後 Composor 會同時生成涉及到的文件的所有修改。但通常而言,使用 Composer 應該在通過小面板界面的右上角的按鈕打開它的完整界面:

它會比較清晰地在左邊列出在你累計的對話中,你要修改那些文件的哪些地方,並且你可以直接 apply 相關的修改。

這一點是目前我體驗最好的 AI 輔助編程 的方式:你可以很自然地不斷在一個窗口內用自然語言描述你的需求,而不需要在多個窗口和文件裏進行切換。我感覺 Cursor 是探索出來了最好的交互形式。

便捷提供上下文信息的 @ 註記

爲了更方便地向大語言模型提供上下文信息,Cursor 內設了不同地 @ 註記,使用 @ 註記能夠方便地注入不同類型的上下文信息到你的對話裏。

@ 註記有一些是通用的,在所有對話窗口中都可以使用;有一些是特殊的,我會在提到時做補充說明。

注:事實上 Github Copilot 也有類似的功能,但是沒 Cursor 齊全好用。

1. @Files 註記,傳遞指定代碼文件的上下文

當你在對話框輸入 @Files 註記時,Cursor 會自動彈出對你代碼倉庫的檢索列表,你可以輸入你想要導入上下文的文件名,而後按下確認鍵,相應的文件裏的內容便會屆時自動注入到上下文中

2. @Code 註記,傳遞指定代碼塊的上下文

Code 註記提供更精確的代碼片段,@ 註記的使用都大同小異,會彈出相應的檢索框,你輸入關鍵詞後在索引列表中選擇相應的代碼塊即可。

代碼塊的識別是由你開發環境的 LSP 決定的,大多數情況下都是精確的:

3. @Docs 註記,從函數或庫的官方文檔裏獲取上下文

@Docs 註記能夠從函數或庫的官方文檔裏獲取上下文。目前,它只能從可訪問的在線文檔裏獲取上下文。因此,你自己寫的類似於 JSDoc 之類的文檔信息除非你能整一個線上地址,否則是沒用的~ 我個人覺得這個功能不是很泛用。

4. @Web 註記,從搜索引擎的搜索內容獲取上下文

@Web 註記類似於一種方法,它會默認將你的提問先向搜索引擎進行搜索,然後從搜索結果裏提取上下文餵給 LLM。但因爲 Cursor 官方沒公開透明具體的實現法子,它自個也沒調好,實際上使用效果忽好忽差的。

如果你遇到問題想偷懶不打開網頁搜報錯或是大模型自身的回答無法解決問題,你可以直接使用這個註記。

5. @Folders 註記,傳遞文件目錄信息的上下文

@Folders 註記能夠提供文件目錄的相關信息,如果你遇到什麼路徑問題,可以考慮使用這個註記向大模型尋求解決方法。

6. @Chat 註記,只能在文件內的代碼生成窗口裏使用的註記

@Chat 註記只能在文件內的代碼生成窗口(CTRL + K 打開的窗口)裏使用,它能夠將你右邊打開的對話窗口裏的對話內容作爲上下文傳遞給大模型。

7. @Definitions 註記,只能在文件內的代碼生成窗口裏使用的註記

和 @Chat 註記一樣,@Definitions 註記只能在文件內的代碼生成窗口裏使用。它會將你光標停留的那一行代碼裏涉及到的變量、類型的相關定義作爲上下文傳遞給大模型,類似於 @Code 註記。

8. @Git 註記,只能在對話窗裏使用

對話窗指的是通過 CTRL + L 與 CTRL + I 打開的對話窗口。@Git 註記能夠將你當前的 Git 倉庫的 commit 歷史作爲上下文傳遞給大模型。

感覺比較適合在代碼協作的時候查戰犯清算的時候使用。

8. @Codebase 註記,只能在對話窗裏使用,用於在代碼倉裏掃描相應的文件傳入

Codebase 註記其實不是很好用,與其說它是掃代碼倉,不如說是從代碼倉裏尋找到你想要的文件的上下文傳入,也就是 CodebaseFilter 。

我感覺平時開發不會用到,因爲它要傳遞過濾條件設置過濾參數:

它和通過 CTRL + enter 快捷鍵的區別估計就在於你能夠自定義查詢的過濾規則。但我感覺沒啥用。

最後

如果你有經濟條件的話,可以試試用用 Cursor ,它的使用體驗真的很好(即使沒有)。你別看我文字稿好像也沒講啥,只要你用一下就能有很深的體會了。開發體驗是真的好。

這篇稿子雖然說是改譯,但好像基本上都是我把我自己的使用體驗寫下來了~ 因此如果你去看原文,估計會發現這裏沒內容能和它對上。

我有點糾結要不要把這篇文章的分類改一下。主要是因爲我是看到了原文才興起了自己寫一下簡單使用教程的心思,但這篇文章結構上確實是受原文影響的。唉,糾結。

References

[1] Code Smarter, Not Harder: Developing with Cursor and Claude Sonnet: https://jstoppa.com/posts/artificial-intelligence/fundamentals/code-smarter-not-harder-developing-with-cursor-and-claude-sonnet/post/
[2] Anysphere: https://anysphere.inc/
[3] diff fomat: https://www.cursor.com/blog/instant-apply#diff-models

本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源https://mp.weixin.qq.com/s/vtPeHRUTLD6A4h59E-e_3w