Plugin CodeGym trong IntelliJ IDEA cho khóa học Claude Code

1. Một khóa học, hai nơi để học

Bắt đầu trên trình duyệt thì tiện: mở trang, đọc bài giảng, làm bài tập đầu tiên. Agent cũng có ở đó - Claude Code được tích hợp ngay trong bảng điều khiển trên trình duyệt, nên ngay từ ngày đầu bạn đã có thể cùng nó giải bài. Có hai hạn chế: mọi thứ chỉ nằm trong trình duyệt, và mỗi bài tập lại có một project riêng.

IDEA là công cụ chuyên nghiệp, ở đó mọi thứ đều nằm sẵn trong tầm tay: code, đề bài, terminal và agent trong cùng một cửa sổ, còn project thì nằm trên ổ đĩa của bạn. Lúc đầu có thể thấy như dùng dao mổ trâu để giết gà. Làm được vài bài rồi, bạn sẽ thấy thiếu IDE là bất tiện. Nếu là tôi thì tôi sẽ chuyển sang ngay: làm quen với công cụ làm việc thật sẽ đỡ tốn công hơn khi bài tập còn đơn giản.

Nếu chưa dùng trình cài đặt: hãy cài plugin thủ công

Trình cài đặt ở cấp độ 1 đã thêm sẵn plugin CodeGym và Claude Code, đồng thời thiết lập việc đăng nhập tài khoản. Nếu bạn đã chạy nó thì có thể bỏ qua phần này. Không nhớ mình đã chạy hay chưa? Hãy mở danh sách plugin: nếu CodeGym và Claude Code đã có ở đó thì mọi thứ ổn, cứ cuộn xuống tiếp.

1. Cài plugin CodeGym. Trên Windows và Linux, mở File → Settings → Plugins, trên macOS là IntelliJ IDEA → Preferences → Plugins. Ở tab Marketplace, gõ CodeGym vào ô tìm kiếm rồi nhấn Install. Đừng khởi động lại IDEA vội: hãy cài plugin thứ hai trước.
2. Cài plugin Claude Code chính thức. Vẫn ở tab Marketplace, gõ Claude Code vào ô tìm kiếm, chọn Claude Code [Beta] rồi nhấn Install. Khi cả hai plugin đã được cài, hãy khởi động lại IDEA.
3. Cài xong, nhấn Sign in trên thanh phía trên của plugin. Trên trang CodeGym, mở mục Cài đặt → Bảo mật và đăng nhập, sao chép khóa bí mật rồi dán vào cửa sổ đăng nhập trong IDEA.

Sau khi đăng nhập, plugin CodeGym sẽ tải project học tập về, và bạn có thể mở bài tập ngay trong IDEA.

2. Danh sách bài tập nằm ở đâu

Trên thanh dọc bên trái của IDEA, nhấn Tasks. Danh sách các bài tập hiện có sẽ mở ra.

Tìm thẻ bài tập bạn cần và nhấn vào nó. Trong cửa sổ hiện ra, chọn Open.

Trong plugin có đủ mọi bài tập trên trang web. Nếu bạn đã giải một bài trên trang web và bài đó đã qua kiểm tra, code của bạn sẽ được tải vào project trong IDEA.

Lúc đầu cửa sổ bài tập trông khá rối. Để bắt đầu, bạn chỉ cần đúng hai thứ:

• Condition - đề bài: cần làm gì và phải đáp ứng những yêu cầu nào;
• cây project bên trái - các file của bài tập mà bạn làm việc cùng. Chúng có thể thuộc nhiều loại và mang tên khác nhau: ví dụ index.html, Main.java hoặc tên khác - hãy tìm file mà đề bài yêu cầu, chứ đừng tìm theo cái tên quen thuộc.

Trình tự rất đơn giản: đọc Condition trước, sau đó tìm đúng file trong cây project và bắt tay vào giải bài.

3. Agent thấy file, nhưng không thấy đề bài

Khi bạn mở một bài tập, plugin tải các file của bài đó xuống ổ đĩa. Claude Code làm việc với file, nên nó thấy được cây thư mục, code và các file còn lại của bài - với điều kiện nó được khởi chạy trong đúng thư mục (phần tiếp theo sẽ nói về chuyện này).

Nhưng đề bài và các yêu cầu lại nằm trong bảng Condition. Agent không tự động thấy bảng này. Hiểu ý nghĩa của bài tập và xác định các yêu cầu là một phần việc học của bạn, và điều quan trọng là bạn tự mình làm phần đó.

Cám dỗ thì dễ hiểu: dán đề bài vào khung chat, rồi để agent tự tìm hiểu xem người ta muốn gì ở bạn. Đừng dán nguyên cả đề bài. Làm vậy bạn sẽ bỏ qua bước quan trọng nhất - đọc đề, tìm ra điểm chính và hiểu các yêu cầu.

Trước hết hãy đọc hết đề bài và hiểu nó. Sau đó bạn có thể dán vào khung chat với agent những đoạn quan trọng thôi. Tốt hơn nữa là tự mô tả mục tiêu và yêu cầu bằng lời của mình. Như vậy bạn mới thật sự hiểu bài, còn Claude Code vẫn là người trợ giúp chứ không thay bạn học.

4. Mỗi bài tập là một project riêng

Nói luôn điều quan trọng nhất trước, để bạn yên tâm đọc tiếp: bạn sẽ không phải một mình theo dõi các thư mục. Agent tự nhận ra khi nó đang làm nhầm bài tập, báo cho bạn biết và đề nghị chuyển sang đúng thư mục - còn nếu bạn cho phép, nó sẽ tự chuyển.

Tiếp theo là cách làm thủ công: làm điều tương tự bằng các công cụ của IDEA. Bạn cần nó để hiểu chuyện gì đang thực sự diễn ra và không phụ thuộc vào lời nhắc.

Giờ đến sự thật quan trọng nhất về cách khóa học được tổ chức. Mỗi bài tập ở đây là một project riêng. Không phải một file bên trong một project chung, mà là một project độc lập: thư mục riêng, file riêng, quy tắc riêng cho agent trong .claude. Khóa học có bao nhiêu bài tập thì có bấy nhiêu project.

Plugin gom tất cả vào một cây codegym-project, để bạn không phải mở mỗi bài tập trong một cửa sổ riêng. Trông đại khái như thế này:

codegym-project/
└── src/vi/codegym/claude/course/level01/     # cấp độ của khóa học
    ├── task05/                # bài tập = một project riêng
    │   ├── .claude/           # quy tắc của agent cho bài tập này
    │   └── arkanoid.html      # file của bài tập
    └── task09/                # bài tập khác = project khác
        ├── .claude/           # có quy tắc riêng của nó
        ├── arkanoid.html      # file của bài tập, có thể có nhiều file
        ├── clicker.html
        └── tictactoe.html

Vì sao điều này quan trọng. Thông thường, một cây project chính là một project: các file trong đó liên quan với nhau, và agent thấy được toàn bộ chúng thì càng tốt. Bạn khởi chạy agent ở thư mục gốc, nó đọc quy tắc của project, thấy các file bên cạnh - và tất cả những điều đó đều có lợi cho bạn.

Ở đây thói quen đó lại phản tác dụng. Cây thì chỉ có một, nhưng trong đó có bao nhiêu bài tập thì có bấy nhiêu project, và chúng hoàn toàn không liên quan gì đến nhau: task09 chẳng biết gì về task05, và mỗi bài tập có quy tắc .claude của riêng mình. Với agent, thư mục gốc của project không phải là "project của bạn", mà là một cái kho chứa những project xa lạ với nhau. Các bài tập bên cạnh không có ngữ cảnh gì hữu ích, còn quy tắc của bài tập bạn cần thì từ đó nó chỉ lấy được một phần và không ngay lập tức: hướng dẫn và skills của bài tập chỉ được nạp khi agent mở file của bài tập đó, còn cài đặt của bài tập thì hoàn toàn không được nạp.

Từ đây có một hệ quả nên hiểu ngay: agent thấy những gì ở nơi nó được khởi chạy. Gõ claude ở thư mục gốc của project - và cả khóa học sẽ lọt vào tầm nhìn: bài tập khác, code khác, quy tắc khác. Agent sẽ phải tìm file cần thiết giữa hàng trăm file không liên quan, còn trong trường hợp xấu thì nó sửa nhầm file của bài tập bên cạnh.

Vì vậy quy tắc rất đơn giản: hãy khởi chạy agent trong thư mục của bài tập bạn đang giải.

Cách khởi chạy agent trong thư mục bài tập

1. Tìm thư mục của bài tập trong cây project bên trái.
2. Nhấp chuột phải vào thư mục đó và chọn Open In - Terminal. Một tab terminal sẽ mở ra, đã đứng sẵn trong thư mục này.
3. Gõ claude.

Nghe như thêm một bước thừa. Thực tế chỉ là một cú nhấp chuột phải, và mỗi bài tập chỉ phải làm một lần.

Đằng sau cú nhấp đó chẳng có phép màu nào: IDEA chỉ gõ giúp bạn lệnh cd tới thư mục đã chọn. Bạn cũng có thể tự làm điều tương tự trong một terminal đang mở:

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

Có một cái bẫy: trong cây project, IDEA hiển thị package thành một dòng nối bằng dấu chấm - vi.codegym.claude.course.level01 - trong khi trên ổ đĩa đó là các thư mục lồng nhau. Gõ lại đường dẫn theo những gì thấy trên màn hình là vô ích: đường dẫn thật trên ổ đĩa không giống như vậy. Sao chép thì dễ hơn: nhấp chuột phải vào thư mục bài tập - Copy Path/Reference.

Kiểu gộp này còn có hệ quả tiếp theo, và lần này không còn vô hại. IDEA gộp thành một dòng mọi chuỗi thư mục mà bên trong mỗi thư mục chỉ có đúng một thư mục khác và không có gì thêm. Ở bài tập mà hiện chỉ có mỗi .claude, thư mục này cũng bị gộp vào cùng dòng đó. Nhìn thì giống thư mục bài tập, nhưng cú nhấp chuột phải lại áp dụng cho thư mục sâu nhất trong chuỗi.

Cách chắc chắn nhất là tắt hẳn kiểu gộp này. Phía trên cây project, nhấp vào nút ba chấm, mở Appearance và bỏ chọn Compact Middle Packages. Sau đó mỗi thư mục nằm trên một dòng riêng trong cây, và cú nhấp chuột phải sẽ rơi đúng chỗ bạn nhắm tới.

Nếu terminal đã mở sẵn và đường dẫn trong đó kết thúc bằng .claude, hãy lên một cấp bằng lệnh cd .. rồi mới chạy agent.

Chuyển sang bài tập tiếp theo

Thư mục làm việc được xác định lúc khởi chạy và không tự đi theo bạn. Nhưng bạn cũng chẳng cần làm gì phức tạp: agent sẽ nhận ra bài tập đã đổi và đề nghị chuyển sang thư mục của bài mới.

Muốn tự làm thì cứ chuyển sang thư mục của bài tập mới và chạy claude ở đó: bằng cú nhấp chuột phải như trên hoặc bằng lệnh cd. Bạn cũng có thể mở một tab terminal riêng cho bài tập mới, như vậy cả hai đều nằm sẵn trong tầm tay.

Agent tự cho biết nó đang ở đâu

Bạn không cần tự mình theo dõi chuyện này. Trên thanh trạng thái bên dưới khung chat, profile học tập của Claude Code ghi rõ agent đang làm việc với bài tập nào: JR · claude.course · task02.

Còn nếu trong IDE bạn đang mở một bài tập khác, cũng ở chỗ đó sẽ hiện một cảnh báo màu vàng, cho biết trong IDE đang mở task01. Nghĩa là bạn đang nhìn vào một file, còn agent lại làm việc trong một thư mục khác. Thấy cảnh báo như vậy thì hãy dừng lại và tìm hiểu xem chính xác cái gì bị lệch: hoặc agent được khởi chạy nhầm thư mục, hoặc bạn đã mở file của nhầm bài tập.

Nhật ký các phiên học

Còn một lý do nữa để khởi chạy agent đúng trong thư mục bài tập, và cần nói thẳng về nó.

Profile học tập của Claude Code được thiết lập để ghi nhật ký làm việc. Trong lúc bạn giải bài, trong thư mục của bài đó sẽ xuất hiện .codegym, nơi ghi lại quá trình làm việc: các yêu cầu bạn gửi cho agent, phần đầu các câu trả lời của nó, những file nó đã sửa, những lệnh nó đã chạy.

Đây là thư mục của một bài tập sau khi bạn đã làm việc trong đó:

task09/
├── .claude/                  # quy tắc của agent cho bài tập này
├── .codegym/
│   ├── cc-transcript.txt     # nhật ký làm việc, văn bản thường
│   └── cc-transcript.json
├── arkanoid.html             # các file của chính bài tập
├── clicker.html
└── tictactoe.html

Nó dùng để làm gì: nền tảng dựa vào nhật ký này để kiểm tra lời giải của bài tập. Đây là "cuốn vở bài làm" của bạn - qua nó thấy được không chỉ kết quả mà cả cách bạn đi đến kết quả đó. Nghe có vẻ đáng lo, tôi hiểu. Nhưng nếu không có nhật ký, nền tảng chỉ thấy được cái cuối cùng bạn làm ra.

Nhật ký vẫn nằm trên ổ đĩa của bạn, cạnh bài tập: bạn có thể mở file ra và đọc. Và nó xuất hiện ở nơi agent được khởi chạy. Khởi chạy từ thư mục gốc của project - nhật ký sẽ nằm ở thư mục gốc, còn trong thư mục bài tập thì không có. Thêm một lý do để đừng bỏ qua cd.

5. Cách gửi lời giải đi kiểm tra

Khi lời giải đã xong, hãy nhấn nút Verify trong cửa sổ bài tập. Plugin sẽ gửi phiên bản hiện tại của lời giải lên máy chủ CodeGym.

Sau khi kiểm tra, kết quả sẽ hiện ngay tại đó, trong giao diện bài tập. Tiếp theo sẽ là một trong hai khả năng:

• lời giải được chấp nhận - các yêu cầu đã được đáp ứng, bài tập được tính là hoàn thành;
• lời giải không được chấp nhận - plugin sẽ hiện thông báo kiểm tra, sau đó bạn có thể quay lại đề bài và sửa lời giải.

Một lần không được chấp nhận không có nghĩa là project bị hỏng. Đó chỉ là phản hồi bình thường. Hãy đọc thông báo, mở lại Condition, so sánh với lời giải và sửa một điểm rõ ràng. Một điểm thôi, không phải tất cả cùng lúc: như vậy mới thấy được chính xác cái gì đã giúp.

Bạn có thể gửi lời giải bao nhiêu lần tùy thích. Kiểm tra sinh ra là để như vậy: thử một lần, nhận kết quả, sửa lại, gửi tiếp.

6. Những cài đặt plugin nên biết

Đồng bộ bài tập: trang web và plugin

Plugin hiển thị các bài tập của khóa học đang hoạt động - khóa học bạn đã chọn trên trang web. Ở đó bạn có thể có nhiều khóa học, nhưng khóa đang hoạt động thì luôn chỉ có một.

Danh sách bài tập và trạng thái của chúng tự cập nhật: khoảng năm phút một lần và sau mỗi lần gửi kiểm tra thành công. Bài tập đã giải trên trang web sẽ hiện trong plugin ở trạng thái đã giải.

Muốn cập nhật ngay bây giờ thì nhấn vào avatar ở góc trên bên phải và chọn Sync tasks. Sau khi đổi khóa học đang hoạt động, đây là bước bắt buộc: chừng nào bạn chưa đồng bộ hoặc chưa khởi động lại IDEA, plugin vẫn sẽ hiển thị bài tập của khóa học trước.

Cách ẩn thanh điều hướng của plugin

Nghe thì lạ, nhưng thứ tự là thế này: trước hết phải làm cho thanh này hiện ra đã. Nó chỉ xuất hiện khi Beginner Mode được tắt - đó là chế độ hiển thị rút gọn của plugin, trong đó một phần tính năng bị ẩn đi. Còn ô đánh dấu để ẩn thanh thì lại nằm ngay trên chính thanh đó, dưới biểu tượng bánh răng.

1. Nhấn vào avatar ở góc trên bên phải và chọn Settings - Beginner Mode để tắt chế độ này.
2. Ở phần trên cùng của plugin sẽ xuất hiện thanh điều hướng. Trên thanh đó, nhấn Settings (⚙️) và bỏ chọn ô "Show plugin navigation bar".

Riêng tôi thì ẩn nó đi ngay: chỗ trên màn hình quý hơn vài cái nút.