Bỏ qua tới nội dung
Agent Skill Hub
EN
Track 01 · Hướng dẫn

Hoàn thành tác vụ đầu tiên với agent trong VS Code

Dùng agent của GitHub Copilot trong VS Code để tạo một web app nhỏ, để agent tự kiểm thử, rồi tự rà soát và hoàn tác khi cần.

Cơ bản@shine19047 phút đọc

Bài này tóm tắt quickstart của VS Code: bạn nhờ một AI agent dựng web app nhỏ từ một prompt bằng ngôn ngữ tự nhiên, xem lại code nó sinh ra, để agent kiểm thử app bằng tool trình duyệt, rồi tự mình xác nhận kết quả.

Chuẩn bị

Quickstart dùng Copilot harness, phần nối model với các tool dùng để build và test app. Nếu muốn dùng Claude, OpenAI Codex hoặc model với API key riêng, bạn chọn và cấu hình harness khác.

1. Tạo thư mục dự án

Tạo một thư mục trống cho app:

bash
mkdir agent-quickstart

2. Dựng app

VS Code cho bạn làm việc với agent theo hai cách:

  • Chat view: làm việc với agent ngay cạnh code trong editor, tập trung vào dự án hiện tại.
  • Agents window: giao tác vụ (mức cao) cho agent và chuyển giữa các dự án mà không phải tải lại cửa sổ.

Dùng Chat view

  1. Chọn File > Open Folder và mở thư mục agent-quickstart. Nếu VS Code hỏi có tin cậy thư mục không, chọn Manage trong thông báo rồi chọn Trust.
  2. Mở Chat view (lệnh workbench.action.chat.open) và chọn + để bắt đầu chat mới. Chat cũ vẫn còn trong danh sách session.
  3. Cấu hình session như bảng dưới, các tuỳ chọn khác để mặc định.
  4. Nhập prompt bên dưới và nhấn Enter.
  5. Theo dõi tiến độ và xem kỹ từng yêu cầu phê duyệt (approval) trước khi chấp nhận. Agent tạo file index.html và lưu dần; yêu cầu phê duyệt chỉ hiện với hành động chưa nằm trong thiết lập phê duyệt của bạn.
  6. Nếu agent xin mở index.html trong trình duyệt tích hợp, chọn Allow in this Session. Bạn có thể thao tác với app ngay trong trình duyệt tích hợp của VS Code.
ControlGiá trịÝ nghĩa
Session TargetCopilotChạy session bằng Copilot agent harness với Copilot SDK trên máy bạn.
AgentAgentDùng tool để lập kế hoạch, sửa file, chạy lệnh và kiểm tra kết quả.
Language modelAutoTự chọn model theo độ phức tạp của tác vụ và tình trạng sẵn có.
PermissionsManual permissionsHỏi bạn trước khi chạy tool hoặc truy cập tài nguyên. Agent được sửa file trong thư mục dự án.
prompt
Create a task list web app in a single index.html file with embedded CSS and JavaScript. Let me add, complete, and delete tasks. Save the tasks in local storage so they persist after a page reload. Use no external libraries.

Dùng Agents window

Agents window là cửa sổ riêng để làm việc với agent trên nhiều dự án.

  1. Chọn Open in Agents trên thanh tiêu đề, hoặc chạy Chat: Open Agents window từ Command Palette.
  2. Chọn New ở đầu sidebar trái để mở session mới.
  3. Chọn thư mục agent-quickstart trong dropdown (cửa sổ này làm việc với nhiều dự án). Nếu được hỏi, chọn Trust.
  4. Cấu hình session giống bảng ở trên, nhập cùng prompt, rồi theo dõi và phê duyệt tương tự như với Chat view.

3. Rà soát và để agent kiểm tra kết quả

Bạn cần xem kỹ code được sinh ra và kết quả. Agent có thể đã tự mở trình duyệt tích hợp để kiểm tra app trong bước trước; giờ bạn yêu cầu nó kiểm tra rõ ràng các chức năng cơ bản.

  • Trong Chat view: chat hiển thị một file đã đổi kèm thống kê diff, chọn vào để xem code và diff.
  • Trong Agents window: mở panel Changes ở sidebar phải và chọn index.html. Nếu chưa hài lòng một đoạn nào, chọn đoạn đó trong diff và nhập góp ý để gửi cho agent.

Sau đó gửi prompt:

prompt
Open index.html in the integrated browser and validate the app.
Add a task, mark it complete, and delete it. Then add another task,
reload the page, and verify that the task persists. If any step fails,
fix the issue and repeat the complete flow.

Agent sẽ tự thao tác trên trình duyệt tích hợp và kiểm tra các kịch bản người dùng. Nếu cần truy cập diff bằng bàn phím hoặc trình đọc màn hình, dùng Accessible Diff Viewer.

4. Tự kiểm tra lại

Báo cáo của agent giúp tìm lỗi nhưng không thay được việc bạn tự kiểm tra. Trong trình duyệt tích hợp:

  1. Thêm một task và đánh dấu hoàn thành.
  2. Tải lại trang, xác nhận task và trạng thái hoàn thành vẫn còn.
  3. Xoá task, xác nhận nó không xuất hiện lại sau khi tải lại.

Nếu bước nào hỏng, mô tả điều bạn thấy trong chat và nhờ agent sửa rồi kiểm tra lại. Xem diff trước khi commit.

Dừng, chỉnh hoặc hoàn tác

  • Dừng hoặc đổi hướng yêu cầu đang chạy: dùng dropdown Send, chọn Steer with Message hoặc Stop and Send. Dừng lại không hoàn tác những hành động đã xong.
  • Chỉnh kết quả: gửi prompt tiếp theo. Trong diff, bạn có thể chọn code và góp ý cụ thể nếu giao diện hỗ trợ.
  • Hoàn tác thay đổi file của một yêu cầu: rê chuột lên yêu cầu trước đó và chọn Restore Checkpoint. Thao tác này khôi phục file trong workspace và lịch sử chat, nhưng không đảo ngược lệnh terminal, yêu cầu mạng, việc triển khai (deploy) hay thay đổi ở dịch vụ bên ngoài. Xem thêm rà soát và hoàn tác thay đổi của agent.

Nếu prompt tiếp theo vẫn không giải quyết được, xem Get an agent back on track.

Nếu màn hình của bạn khác

Chuyển giữa hai giao diện

Agents window và Chat view dùng chung session, nên bạn chuyển qua lại mà không mất hội thoại:

  • Từ Agents window, chọn Open in Editor trên thanh tiêu đề để mở dự án trong editor với session nằm ở Chat view.
  • Từ Chat view, chọn Open in Agents để mở Agents window với cùng session.

Dọn dẹp

Khi không cần app nữa, đóng thư mục agent-quickstart trong VS Code và xoá thư mục đó khỏi máy.

Bước tiếp theo

Nguồn

Viết thêm guide cho track này