Claude Code 課程：IntelliJ IDEA 中的 CodeGym 外掛

1. 同一門課，兩個地方都能上

用瀏覽器起步很方便：打開頁面、讀完課程單元、完成第一份作業。瀏覽器裡也有代理 - Claude Code 直接內建在瀏覽器的面板中，所以從第一天起，您就能和它一起解題。限制有兩個：所有東西都留在瀏覽器裡，而且每份作業都會各自建立一個獨立的專案。

IDEA 是專業工具，所有東西一開始就在手邊：程式碼、作業說明、終端機和代理都在同一個視窗裡，專案則存放在您自己的磁碟上。一開始可能會覺得有點殺雞用牛刀。做過幾份作業之後，您會發現少了 IDE 反而不順手。換作是我，會馬上搬過去：趁作業還簡單的時候熟悉正式的工作工具，代價最低。

如果沒有使用安裝程式：請手動安裝外掛

第 1 級的安裝程式已經加好了 CodeGym 和 Claude Code 兩個外掛，也設定好了帳號登入。如果您執行過安裝程式，這一節可以跳過。不記得有沒有執行過？打開外掛清單看看：如果 CodeGym 和 Claude Code 都已經在裡面，那就沒問題，直接往下看。

1. 安裝 CodeGym 外掛。在 Windows 和 Linux 上開啟 File → Settings → Plugins，在 macOS 上開啟 IntelliJ IDEA → Preferences → Plugins。在 Marketplace 分頁的搜尋框輸入 CodeGym，然後按 Install。先不要重新啟動 IDEA：請先裝好第二個外掛。
2. 安裝官方的 Claude Code 外掛。不用關掉 Marketplace，在搜尋框輸入 Claude Code，選擇 Claude Code [Beta]，然後按 Install。兩個外掛都裝好之後，重新啟動 IDEA。
3. 安裝完成後，按一下外掛頂端面板上的Sign in。在 CodeGym 網站上開啟 設定 → 安全性與登入，複製祕密金鑰，貼到 IDEA 的登入視窗中。

登入後，CodeGym 外掛會下載課程專案，接著就能直接在 IDEA 裡開啟作業。

2. 作業清單在哪裡

在 IDEA 左側的垂直工具列上按 Tasks，就會打開可做的作業清單。

找到需要的作業卡片並點一下。在跳出的視窗中選擇 Open。

網站上的所有作業，在外掛裡都找得到。如果您已經在網站上解過某份作業，而且順利通過了檢查，您的程式碼會載入到 IDEA 的專案中。

作業視窗一開始看起來東西很多。剛起步時，您只需要兩樣東西：

• Condition - 作業說明：要做什麼、要符合哪些要求；
• 左側的專案樹 - 您要處理的作業檔案。這些檔案可能是不同類型，名稱也各不相同：例如 index.html、Main.java 或其他名稱 - 要找的是作業說明指定的那個檔案，而不是看起來眼熟的檔名。

邏輯很簡單：先讀 Condition，再到專案樹裡找到需要的檔案，然後開始解題。

3. 代理看得到檔案，卻看不到作業說明

您開啟作業時，外掛會把作業的檔案下載到磁碟上。Claude Code 處理的是檔案，所以資料夾結構、程式碼和作業的其他檔案它都看得到 - 前提是它在正確的資料夾裡啟動（下一節會談到這一點）。

但作業說明和要求放在 Condition 面板裡，代理不會自動看到這個面板。弄懂作業的意思、整理出要求，這是您學習的一部分，自己走過這一步很重要。

這種誘惑很好理解：把作業說明貼進聊天視窗，讓代理自己去搞懂題目要什麼。請不要把作業說明整份貼上。這樣您會跳過最重要的一步 - 閱讀作業說明、抓出重點、理解要求。

先把作業說明完整讀過並弄懂。之後，可以只把重要的片段貼到和代理的聊天中。更好的做法是用自己的話描述目標和要求。這樣您才是真的弄懂了作業，而 Claude Code 仍然是助手，不會取代您的學習。

4. 每份作業都是一個獨立的專案

先講最重要的，讓您可以放心往下讀：您不必獨自盯著資料夾。代理會發現自己處理的作業不對，會告訴您，並提議切換到正確的資料夾 - 如果您允許，它會自己切換過去。

接下來是手動的做法：怎麼用 IDEA 本身的功能做到同一件事。了解它，是為了弄懂背後到底發生了什麼，也不必依賴提示。

現在來看課程結構最關鍵的一點。這裡的每份作業都是一個獨立的專案。不是共用專案裡的一個檔案，而是自成一體的專案：有自己的資料夾、自己的檔案，以及放在 .claude 裡、專屬於這份作業的代理規則。課程有幾份作業，就有幾個專案。

外掛把它們全部放進同一棵樹 codegym-project，這樣您就不必為每份作業各開一個視窗。看起來大致是這樣：

codegym-project/
└── src/tw/codegym/claude/course/level01/     # 課程等級
    ├── task05/                # 一份作業 = 一個獨立專案
    │   ├── .claude/           # 這份作業的代理規則
    │   └── arkanoid.html      # 作業檔案
    └── task09/                # 另一份作業 = 另一個專案
        ├── .claude/           # 它有自己的規則
        ├── arkanoid.html      # 作業檔案，可能不只一個
        ├── clicker.html
        └── tictactoe.html

為什麼這很重要。一般來說，一棵專案樹就是一個專案：裡面的檔案彼此相關，讓代理看到全貌是有幫助的。您在根目錄啟動它，它讀取專案規則、看到旁邊的檔案 - 這一切都對您有利。

在這裡，這個習慣會出問題。樹只有一棵，裡面的專案卻和作業一樣多，而且彼此毫無關聯：task09 對 task05 一無所知，每份作業也都有自己的 .claude 規則。對代理來說，專案根目錄不是"您的專案"，而是一座堆滿互不相干專案的倉庫。旁邊的作業裡沒有有用的上下文，而目前這份作業的規則，它從根目錄只能讀到一部分，而且不是馬上：這份作業的指示和 skills 要等它打開作業的檔案時才會載入，作業的設定則完全不會載入。

由此可以得出一個最好馬上弄懂的結論：代理看到的範圍，取決於您從哪裡啟動它。在專案根目錄輸入 claude，整門課都會進入它的視野：別的作業、別的程式碼、別的規則。代理得在幾百個無關的檔案裡找它需要的那個，情況糟的話，還會改到隔壁作業的檔案。

所以規則很簡單：在您正在解的那份作業的資料夾裡啟動代理。

如何在作業資料夾裡啟動代理

1. 在左側的專案樹中找到作業的資料夾。
2. 在資料夾上按滑鼠右鍵，選擇 Open In - Terminal。這會開啟一個終端機分頁，而且已經位在這個資料夾裡。
3. 輸入 claude。

聽起來像是多了一個步驟。實際上只是按一下右鍵，而且每份作業只需要做一次。

這個右鍵背後沒有什麼魔法：IDEA 只是替您輸入了一個切換到所選資料夾的 cd 指令。在已經開著的終端機裡，您也可以手動做到同一件事：

cd src/tw/codegym/claude/course/level01/task09
claude

有個陷阱要注意：IDEA 的專案樹會把套件顯示成用點號連起來的一行 - tw.codegym.claude.course.level01 - 但在磁碟上，這其實是一層層的巢狀資料夾。照著畫面上的樣子輸入路徑沒有意義，因為實際路徑並不是這樣。直接複製比較簡單：在作業資料夾上按右鍵 - Copy Path/Reference。

這種合併顯示還有後續，而且這回就不是無傷大雅了。只要資料夾裡只有另一個資料夾、沒有其他內容，IDEA 就會把這一串資料夾合併成一行顯示。在目前只有 .claude 的作業裡，這個資料夾也會被併進同一行。它看起來像作業資料夾，但按右鍵時，作用對象其實是這一串中最深的那個資料夾。

最穩妥的做法是完全關閉合併顯示。點一下專案樹上方的三個點按鈕，開啟 Appearance，取消勾選 Compact Middle Packages。之後，樹中的每個資料夾都會各自佔一行，按右鍵也會落在您想點的位置。

如果終端機已經開啟，而且其中的路徑以 .claude 結尾，請先用 cd .. 回到上一層，再啟動代理。

換到下一份作業時

工作資料夾是在啟動時決定的，不會自己跟著您移動。不過您也不需要做什麼複雜的事：代理會發現作業換了，並提議切換到新作業的資料夾。

想自己來的話，就切換到新作業的資料夾，在那裡啟動 claude：一樣用右鍵，或用 cd 指令。也可以為新作業另外開一個終端機分頁，這樣兩個分頁都在手邊。

代理會自己告訴您它在哪裡

這件事不需要您手動盯著。在聊天視窗下方的狀態列中，Claude Code 的課程設定檔會顯示它正在處理哪份作業：JR · claude.course · task02。

如果您在 IDE 裡開的是另一份作業，同一個位置會出現黃色警告，提示 IDE 目前開啟的是 task01。這表示您看的是一個檔案，代理卻在另一個資料夾裡工作。看到這種情況，請先停下來，弄清楚到底是哪裡對不上：要嘛是代理在錯的資料夾裡啟動，要嘛是您開到了別份作業的檔案。

學習過程的工作紀錄

還有一個理由，讓您一定要在作業資料夾裡啟動代理，這一點必須直接說清楚。

Claude Code 的課程設定檔會記錄工作過程。在您解題的同時，作業資料夾裡會出現 .codegym，工作過程會記錄在裡面：您對代理提出的請求、它每則回應的開頭、它改了哪些檔案、執行了哪些指令。

在某份作業的資料夾裡工作過之後，資料夾看起來是這樣：

task09/
├── .claude/                  # 這份作業的代理規則
├── .codegym/
│   ├── cc-transcript.txt     # 工作紀錄，純文字
│   └── cc-transcript.json
├── arkanoid.html             # 作業本身的檔案
├── clicker.html
└── tictactoe.html

為什麼需要它：平台會根據這份紀錄來檢查您的解答。這是您的"解題筆記本" - 從中不只看得到結果，也看得到您是怎麼一步步做出來的。聽起來讓人有點不安，我懂。但少了這份紀錄，平台只能看到最後做出來的東西。

紀錄會留在您的磁碟上，就在作業旁邊：您可以打開檔案來讀。而且它會出現在代理啟動的位置。如果從專案根目錄啟動，紀錄就會出現在根目錄，作業資料夾裡則不會有。這也是不要省略 cd 的另一個理由。

5. 如何送出解答進行檢查

解答完成後，在作業視窗中按 Verify 按鈕。外掛會把目前版本的解答送到 CodeGym 的伺服器。

檢查完成後，結果會顯示在同一個地方，也就是作業的介面裡。接下來有兩種可能：

• 解答通過 - 要求都已符合，作業算完成；
• 解答未通過 - 外掛會顯示檢查訊息，看完之後可以回到作業說明，修正您的解答。

沒通過不代表專案壞掉了。這只是一般的回饋。讀一下訊息，重新打開 Condition，拿它和您的解答比對，然後修正一個明確的地方。一次只改一個，不要全部一起改：這樣才看得出到底是哪一處改動有用。

解答想送出幾次都可以。檢查本來就是為此而設的：嘗試一次、拿到結果、修正、再送出。

6. 值得了解的外掛設定

作業同步：網站與外掛

外掛顯示的是目前啟用的課程中的作業 - 也就是您在網站上選定的那門課。您在網站上可能有好幾門課，但同一時間只會有一門是啟用中的。

作業清單和作業狀態會自動更新：大約每五分鐘一次，以及每次成功送出解答之後。在網站上解完的作業，在外掛裡也會顯示為已解決。

想立刻更新的話，按右上角的頭像，選擇 Sync tasks。切換啟用的課程之後，這一步一定要做：在您同步或重新啟動 IDEA 之前，外掛會繼續顯示先前那門課的作業。

如何隱藏外掛的導覽列

聽起來有點奇怪，但順序是這樣的：得先讓導覽列顯示出來。只有在關閉 Beginner Mode 之後，它才會出現 - 這個模式是外掛的簡化檢視，部分功能會被隱藏。而用來隱藏導覽列的核取方塊，就在導覽列本身的齒輪圖示底下。

1. 按右上角的頭像，選擇 Settings - Beginner Mode，把它關閉。
2. 外掛上方會出現導覽列。按導覽列上的 Settings (⚙️)，取消勾選 "Show plugin navigation bar"。

我自己是一開始就把它關掉：螢幕空間比那幾個按鈕更寶貴。