接下來要在Cursor裡安裝一些擴充功能。點左側邊欄的「Extensions」圖示(上圖紅色方塊處),就會出現一堆你不認識它,它也不認識你的套件。那在下主要是以開發・改善WordPress外掛為主軸的,問了一下ChatGPT跟Gemini的意見之後,主要安裝了以下的Extension:

1.PHP Intelephense
2.PHP Debug
3.PHP DocBlocker
4.Prettier-Code formatter
5.WordPress Snippets
6.WordPress Playground for VS Code

由於Cursor的Extension來源跟VS Code不同,所以部分套件在Cursor裡搜尋不到。就像WordPress Snippets跟WordPress Playground for VS Code這兩個,因此必需要手動安裝。

在下是先去VsixHub.com搜尋跟Visual Studio Code上一模一樣的「WordPress Snippets」與「WordPress Playground for VS Code」,在下方的「Download Latest VSIX File」後下載.vsix檔。之後回到Cursor按Ctrl+Shift+P打開指令面板,輸入「Install from VSIX」後按Enter,選取剛下載的.vsix檔就可以安裝了。這個方法也適用於其他在Cursor市集找不到的VS Code套件。
WordPress Playground
「WordPress Playground for VS Code」是可以讓你在Cursor內,直接跑一個即時的WordPress,不用裝XAMPP、也不需要資料庫,就像WordPress Playground.net的功能一樣。

就如在下把Cursor指向Moelog AI Q&A Links資料夾後,按下Extensions圖示旁邊的V,執行WordPress Playground後就可以得到一個全新的WordPress網站,不用擔心外掛開發途中會被其他使用中的外掛或模板所汙染,或者發生衝突。

由於在下寫程式碼的機率是零,除了這個套件有點用處以外,其他的感覺不裝也可以的樣子(笑。

{JSON}
裝好Extensions之後,還要調整一下Cursor的設定,讓它更適合WordPress外掛的開發,因此要再按Ctrl+Shift+P打開指令面板,輸入「Open User Settings (JSON)」後,會打開一個叫settings.json的檔案。對於完全不懂程式碼的人第一次設定可能會有點小痛苦,在下這邊就提供自己的環境設定給各位參考。(settings.json)

以在下為例,因為XAMPP安裝在D槽,所以PHP會在D:\\xampp\\php\\php.exe,而WordPress就得放在D:\\xampp\\htdocs\\wordpress。Git安裝在E槽,路徑就是E:\\Git\\bin\\bash.exe。

務必注意路徑要寫「\\」不是「/」。

原則上你寫錯的話,錯誤的地方會出現紅色波浪底線,游標移過去後就會出現一個小視窗,選擇Fix in chat來問AI怎麼寫,或者直接選快速修復都可以,AI的問題靠AI來解決就好了,不是嗎(笑

三種AI模式:Agent、Ask、Plan

Cursor的AI在回答你提出的問題有三種模式可供選擇,理解這三種模式,可以讓你更有效率地跟AI協作。まあ、像在下這種不會寫程式碼的,基本上只會用到Agent跟Plan就是了。

Agent是Cursor的預設模式,也是最強大的模式。你只要告訴它「幫我加一個XXX功能」,它就會分析你的專案結構,找到需要修改的檔案並幫你寫好程式碼,甚至可以執行終端指令(如Git)。簡單而言就是「全自動代工」,你只要提出想法,它就會幫你寫出程式碼,完全實現Vibe Coding。

如果你只是想問問題,不想讓AI亂動你的程式碼,那就切換到Ask模式。適合用在「這段code在幹嘛?」、「為什麼會報這個錯?」這種探索性的問題。
Plan模式
至於Plan模式則是介於兩者之間的「謹慎模式」。當你要作一個比較大的改動,又不太確定AI會怎麼處理時,可以先用Plan模式。AI會先分析任務,列出它打算作的步驟,通常會生成一個.md檔讓你確認。沒問題後,再讓它開始執行。這樣可以避免AI「好心辦壞事」,把程式碼改得亂七八糟。

救命功能:程式碼被改爛了怎麼辦?

當然,使用Cursor的Agent模式,難免會遇到AI很有自信地幫你改程式碼,結果把程式改到跑不動的情況。其實Cursor內建了好幾種「時光倒流」功能,可以讓你優雅地回到AI改之前的狀態。

最簡單的就是找到之前的你發號施令的對話節點,按下右下角Restore Checkpoint符號「↵」後,整個專案就會瞬間回到那個時間點的狀態。這個功能超級強大,就算AI連續改了好幾輪,改了一大堆檔案,你都可以一鍵回到任何一個對話節點。對以往用網頁AI問答模式常改到天昏地暗,程式碼炸的亂七八糟的在下而言,這個功能根本就是神(泣

話說了這麼多,就來看看在下最近用Cursor AI作出了哪些東西吧。
Moelog AI Q&A Links
「Moelog AI Q&A Links」,這是之前的文章曾提到的,在下藉由AI從零開始寫的第一個WordPress外掛。它會自動在文章結尾加入一個Q&A問題清單,當訪客點擊問題後,就會開啟分頁顯示AI生成的答案。在Cursor強大能力的驅使之下,版本已經來到了1.10.2,主要功能如下:

・支援 OpenAI、Google Gemini、Anthropic Claude 三大 AI 供應商
・智慧語言偵測(繁中/日文/英文)
・雙層快取系統,大幅提升載入速度
・完整的後台管理介面,支援拖曳排序
・嚴格的安全性設計(API Key加密、CSP保護)

MP Ukagaka
「MP Ukagaka」,這是一個經典的WordPress外掛,可以在網站上顯示互動式的偽春菜(伺か),就如各位在右下角看所到的RO風格芙莉蓮。由於作者已經很久沒更新了,所以在下便把它的代碼重新整理了一遍,並加入了現代化的功能,主要更新內容如下:

・完整的模組化架構重構
・新增AI Context Awareness功能,角色會根據人格設定對文章發表意見
・支援 Gemini、OpenAI、Claude 多種 AI 供應商
・API Key加密儲存
・首次訪客打招呼功能

其它更詳細的使用說明可以參考GitHub上的README.md與USER_GUIDE.md,這邊就不再贅述。
附帶一提,在下目前是希望有朝一日能導入Live2D,讓芙莉蓮真的可以動起來XD

AI 時代,時間永遠不夠用

說實在的,用了Cursor AI之後,在下再次深深感受到能夠活在這個AI時代真的是太好了。以前總覺得寫程式碼是一件很遙遠的事,需要花好幾年學習才能入門。

コード書けたらいいな。 若い頃からそう思ってた。だけどそれは口先だけの約束みたいなもので、本当に実現させようなんて思ったことは一度もなかった。 だって、頭が悪くて、どうせ見てもわからないものを学ぶのは時間の無駄使いって思ってたから。だけど、行動しないと叶わない。AIの時代なら、絶対にいける。(『響け!ユーフォニアム』黄前久美子より)

但現在有了AI,就算不是專業工程師,只要有心,就可以把腦中的想法實現出來。雖然還是需要一點基礎知識,不過門檻已經大幅降低了,而且隨時都能問AI。如果20年前在部落格風行的年代就有這玩意兒的話…まあ、唯一的問題就是時間真的不夠用。想玩的東西實在太多,但一天就只有24小時。

這種「沉迷」的感覺,正可謂Vibe Coding, Also The Game.

ではでは。

«文章到此為止 1 2