​
VS Code là gì?

Visual Studio Code (VS Code) là nơi bạn mở dự án và trò chuyện với Claude Code. Bạn không cần tự viết hay sửa code - Claude Code làm phần đó. Vai trò của bạn trong VS Code chỉ là:
  • Mở dự án (thư mục chứa app của bạn)
  • Xem lại code Claude Code vừa tạo ra, để hình dung app đang có những gì
  • Bấm chạy thử app và quan sát kết quả
Nếu bạn chưa từng lập trình, đừng lo về việc phải “học” VS Code. Bạn sẽ dùng chưa tới 5 phím tắt trong suốt khóa học - phần còn lại đều bấm được qua menu bằng chuột.

​
Cài đặt VS Code

1
Mở trình duyệt (Chrome, Edge, Firefox…) và truy cập https://code.visualstudio.com/
2
Nhấn nút Download for Windows (hoặc macOS/Linux tùy theo máy bạn)
3
Mở file vừa tải xuống và nhấn Next nhiều lần để cài đặt
Tip: File tải về thường nằm trong thư mục Downloads, có tên như VSCodeSetup.exe.

​
Cài extension Claude Code

Đây là extension quan trọng nhất - nơi bạn trò chuyện với Claude Code ngay trong VS Code, không cần mở terminal riêng.
1

Mở Extensions

Nhấn Ctrl + Shift + X (Windows/Linux) hoặc Cmd + Shift + X (macOS)
2

Tìm extension Claude Code

Gõ Claude Code vào ô tìm kiếm, chọn extension của Anthropic và nhấn Install
3

Mở panel Claude Code

Sau khi cài xong, icon Claude sẽ xuất hiện trên thanh Activity Bar bên trái. Nhấn vào đó để mở panel chat.
Xem hướng dẫn cài đặt đầy đủ (bao gồm CLI và đăng nhập tài khoản) tại Claude Code trên VS Code.

​
Cài extension cho dự án bạn đang học

VS Code cần một extension phù hợp với loại dự án bạn đang làm để hiển thị màu sắc, cảnh báo lỗi và các nút hỗ trợ chạy app. Extension cụ thể tùy vào khóa học bạn đang theo (ví dụ khóa Flutter cần extension khác khóa Node.js).
1

Mở Extensions

Nhấn Ctrl + Shift + X (Windows/Linux) hoặc Cmd + Shift + X (macOS)
2

Tìm đúng extension

Gõ tên extension được hướng dẫn trong tài liệu khóa học của bạn vào ô tìm kiếm, rồi nhấn Install.
3

Kiểm tra

Mở lại dự án. Nếu VS Code hiện thêm thông tin (phiên bản, cảnh báo lỗi…) ở góc dưới bên phải màn hình, extension đã hoạt động.
Không chắc mình cần cài extension nào hoặc đã cài đúng chưa? Cứ hỏi Claude Code: “Kiểm tra giúp tôi VS Code đã cài đủ extension cho dự án này chưa.”

​
Trang trí VS Code (Themes & Icons)

Phần này hoàn toàn tùy chọn - không ảnh hưởng đến việc app của bạn chạy đúng hay sai, chỉ giúp làm việc dễ nhìn hơn.

​
1. Themes - Thay đổi giao diện

Theme giúp VS Code đẹp hơn với màu sắc và phong cách khác nhau.
1
Nhấn Ctrl + K Ctrl + T (Windows/Linux) hoặc Cmd + K Cmd + T (macOS) - hoặc vào menu File > Preferences > Theme > Color Theme
2
Chọn theme có sẵn hoặc nhấn Browse Additional Themes
3
Chọn theme bạn thích và nhấn Enter

​
Themes phổ biến được khuyến nghị

​
2. File Icons - Biểu tượng cho file

Icon giúp phân biệt các loại file nhanh hơn trong cây thư mục.
1
Nhấn Ctrl + Shift + X (Windows/Linux) hoặc Cmd + Shift + X (macOS) để mở Extensions
2
Gõ Material Icon Theme vào ô tìm kiếm
3
Nhấn Install - icon sẽ tự áp dụng ngay sau khi cài
Material Icon Theme là icon set phổ biến nhất: biểu tượng vuông, nhiều màu, giúp phân biệt nhanh các loại file và thư mục trong dự án của bạn.

​
3. Live Server - Xem trước trang web trực tiếp

Nếu dự án của bạn có file HTML (trang web), Live Server giúp mở file đó lên trình duyệt và tự làm mới mỗi khi có thay đổi - không cần dùng cho app di động (Flutter, v.v).
1
Nhấn Ctrl + Shift + X (Windows/Linux) hoặc Cmd + Shift + X (macOS) để mở Extensions
2
Gõ Live Server vào ô tìm kiếm, chọn extension của Ritwick Dey và nhấn Install
3
Mở file .html, bấm chuột phải và chọn Open with Live Server