# Dùng Claude Code trong VS Code từng bước, từ folder trống tới app hoàn chỉnh

[Mikey No Code](https://homus.dev/speakers/mikey-no-code) · [Mikey No Code](https://homus.dev/orgs/mikey-no-code)

> Cài VS Code và extension Claude Code, rồi xây app journal và to-do qua bốn prompt tập trung: scaffold, journal, to-do, thiết kế lại.

Topics: Coding Agents, Dev Tools, Workflow

Canonical: https://homus.dev/talks/how-to-use-claude-code-in-visual-studio-code-step-by-step

## 1. Khoảng trống giữa "AI viết code" và "code chạy trên máy tôi"

Mikey mở đầu bằng một nhận xét quen thuộc: Claude vốn đã viết được code rất đẹp. Nhưng ngay khi bạn phải tự chép đoạn code đó vào đúng file, dựng dự án, cài các dependency, rồi sửa bất cứ thứ gì hỏng sau đó, thì đó chính là chỗ phần lớn người mới bắt đầu bị kẹt. Khoảng trống giữa "AI đã viết xong" và "nó thật sự chạy trên máy của tôi" là thứ mà Claude Code lấp đầy.

Trong video này, anh hướng dẫn cách dùng Claude Code bên trong Visual Studio Code từng bước một, bắt đầu từ một folder hoàn toàn trống và kết thúc bằng một ứng dụng hoàn chỉnh, chạy được. Anh nói rõ lý do: phần lớn các tutorial về chủ đề này dừng lại ở câu "đây là cách cài extension". Được thôi, nhưng giờ bạn có một biểu tượng màu xanh ở thanh bên, rồi sao nữa? Video này không phải kiểu đó.

Ở đây, trợ lý AI, các file dự án, trình soạn thảo và terminal đều sống chung trong một workspace. Và thay vì ném một prompt khổng lồ vào Claude rồi cầu may, anh xây app theo từng prompt tập trung, mỗi lần một tính năng, trước khi kết thúc bằng một lượt làm lại thiết kế cho toàn bộ app. Cuối video, bạn sẽ thấy Claude Code tạo file dự án thật, cài package thật, chạy lệnh terminal thật và cập nhật một codebase đang có, mà bạn không phải tự tay sửa một dòng nào.

Anh nhấn mạnh đây không phải một bản demo bị nhốt trong một nền tảng AI nào đó. Bạn sẽ ra về với một ứng dụng journal và to-do hoàn chỉnh, có source code thật thuộc hoàn toàn về bạn, muốn sửa, deploy hay host ở đâu cũng được. Mikey cũng giới thiệu ngắn một khóa masterclass của anh về xây SaaS, website, AI agent và app bằng AI, mời người xem tham gia qua phần mô tả video.

Khoảng trống Mikey nói tới: với chat, đoạn giữa là việc của bạn; với Claude Code, agent làm luôn đoạn đó bên trong dự án.

## 2. Claude Code là gì, và khác gì Claude trong cửa sổ chat

Nếu bạn từng nhờ Claude xây một thứ gì đó, chép code vào một file, mở terminal, rồi kẹt lại không biết làm gì tiếp, thì Claude Code được thiết kế để bỏ hẳn toàn bộ quy trình đó. Claude Code là coding agent của Anthropic. Bạn mô tả thứ mình muốn xây bằng ngôn ngữ thường, và nó lo phần việc phát triển thật sự cho bạn.

Cụ thể, nó có thể tạo và sửa các file code thật, cài package, chạy lệnh terminal và quản lý toàn bộ cấu trúc dự án từ đầu tới cuối, mà không bắt bạn phải tự hoàn thành từng bước bằng tay.

![Mikey No Code nói trước camera, biểu tượng Claude Code hiện ở giữa khung hình](https://homus.dev/photos/bxSr8QAQt7c-0223.jpg)

Mikey giới thiệu Claude Code, biểu tượng của nó hiện ngay trước ngực anh trong phòng quay.

Dùng Claude trong một cửa sổ chat thì hạn chế hơn nhiều. Đúng là nó có thể sinh code và giải thích phải làm gì, nhưng bạn vẫn phải tự chép code, tạo đúng các file, sắp xếp dự án, cài mọi thứ, rồi tự chạy. Claude Code làm việc trực tiếp bên trong dự án, nên nó có thể hành động chứ không chỉ đưa ra hướng dẫn.

## 3. Ba cách dùng Claude Code và gói Pro, Max cần có

Có ba cách chính để dùng Claude Code: qua desktop app, qua giao diện dòng lệnh (CLI), hoặc qua extension cho VS Code. Video này dùng extension VS Code, chính vì nó giữ toàn bộ quy trình trong một môi trường quen thuộc. Panel Claude Code nằm ngay cạnh những file mà nó đang tạo, nên bạn có thể nhìn dự án thành hình mà không phải chuyển qua lại giữa các loại công cụ khác nhau hay quản lý những cửa sổ terminal riêng. Theo Mikey, đó là một trong những cách dễ nhất để người mới bắt đầu dùng Claude Code.

Bạn sẽ cần gói Claude Pro hoặc Max để dùng nó. Theo video đăng ngày 22/09/2026, Claude Pro giá 20 đô mỗi tháng, cho quyền truy cập đầy đủ với giới hạn sử dụng thấp hơn. Claude Max có mức 100 đô hoặc 200 đô mỗi tháng, cho nhiều dung lượng hơn hẳn để chạy những phiên dài và phức tạp hơn. Với ứng dụng xây trong video, gói Pro là quá đủ. Bạn có thể kiểm tra gói hiện có hoặc nâng cấp trong tài khoản Claude trước khi tiếp tục.

![Trang Pricing của Claude với ba cột Free, Pro, Max](https://homus.dev/photos/bxSr8QAQt7c-0347.jpg)

Trang Pricing của Claude như trong video (09/2026): Free 0 đô; Pro 17 đô mỗi tháng khi trả theo năm (200 đô trả trước), 20 đô nếu trả theo tháng, có ghi "Includes Claude Code"; Max "From $100" mỗi tháng, cho 5 lần hoặc 20 lần mức dùng của Pro. Giá có thể đã đổi sau ngày đăng video.

## 4. Bước 1: tải và cài Visual Studio Code

Thứ cần có trước tiên là Visual Studio Code, gọi tắt là VS Code. Nó hoàn toàn miễn phí và chạy trên Mac, Windows lẫn Linux, nên bạn làm theo được cùng một quy trình bất kể đang dùng máy nào.

Mở trình duyệt và vào `code.visualstudio.com`. Website sẽ tự hiển thị đúng bộ cài cho hệ điều hành của bạn, nhưng Mikey dặn hãy chắc chắn rằng bạn tải đúng bản khớp với máy mình. Tải xong thì mở bộ cài và làm theo các bước trên màn hình. Trình cài đặt lo mọi thứ tự động, nên ở giai đoạn này không cần cấu hình gì thêm.

![Trang chủ code.visualstudio.com với nút Download for Windows](https://homus.dev/photos/bxSr8QAQt7c-0432.jpg)

Trang chủ code.visualstudio.com như lúc quay video, tiêu đề "The open source AI code editor", tự gợi ý nút "Download for Windows" vì máy demo chạy Windows.

Cài xong, mở VS Code và kiểm tra rằng nó khởi động bình thường trước khi đi tiếp.

## 5. Làm quen giao diện VS Code: chỉ cần biết vài vùng

Nếu đây là lần đầu bạn dùng VS Code, giao diện có thể trông hơi lạ, nhưng cho tutorial này bạn chỉ cần biết vài vùng.

Thanh bên trái (sidebar) chứa file explorer, nơi các file dự án sẽ xuất hiện, cùng với panel Extensions mà ta sẽ dùng để cài Claude Code. Vùng lớn ở giữa là editor, nơi các file code được hiển thị và chỉnh sửa. Ở phía dưới là integrated terminal, nơi các lệnh chạy ngay bên trong VS Code.

Khi extension Claude Code đã được cài, panel của nó cũng sẽ xuất hiện ở sidebar. Nghĩa là file, terminal, editor và Claude Code đều có mặt trong cùng một workspace, và theo Mikey, chính điều đó làm cho cách setup này tiện cho người mới.

Các vùng Mikey chỉ ra trong VS Code. Khi có Claude Code, cả bốn phần nằm trong cùng một workspace.

## 6. Bước 2: cài extension Claude Code chính chủ và đăng nhập

Khi đã có VS Code, ta thêm Claude Code thẳng vào bên trong nó. Mở panel Extensions bằng cách bấm biểu tượng Extensions ở sidebar bên trái. Bạn cũng có thể dùng phím tắt:

```
Windows: Ctrl + Shift + X
Mac:     Command + Shift + X
```

Trong Extensions Marketplace, chỉ cần tìm "Claude Code". Mikey dặn hãy chọn đúng extension chính thức do Anthropic phát hành, vì đó là bản kết nối trực tiếp với tài khoản Claude của bạn. Bấm Install và chờ cài xong.

![Trang extension Claude Code for VS Code trong Extensions Marketplace của VS Code](https://homus.dev/photos/bxSr8QAQt7c-0623.jpg)

Kết quả tìm "claude code" trong Marketplace. Bản chính chủ là "Claude Code for VS Code" của Anthropic, có dấu xác minh anthropic.com; cột bên trái còn nhiều extension không chính thức có tên gần giống. Theo video đăng ngày 22/09/2026, trang ghi phiên bản 2.1.218, hơn 21 triệu lượt cài và yêu cầu VS Code 1.98.0 trở lên.

Trên trang extension còn có một mục "Prefer the Terminal-based extension?": nếu bạn thích trải nghiệm kiểu terminal của bản extension cũ, trang hướng dẫn dùng setting `Claude Code: Use Terminal` để chuyển lại.

Cài xong, bạn sẽ được nhắc đăng nhập. Hãy dùng đúng thông tin đăng nhập bạn vẫn dùng ở Claude.ai. Bước này nối extension với tài khoản Claude của bạn, bao gồm cả gói đang dùng và giới hạn sử dụng. Claude Code yêu cầu gói Pro hoặc Max; nếu chưa có, bạn có thể đăng ký hoặc nâng cấp trong tài khoản Claude trước khi tiếp tục.

Sau khi đăng nhập, panel Claude Code sẽ xuất hiện ở sidebar của VS Code. Mở nó ra và kiểm tra rằng nó đang hoạt động, sẵn sàng nhận prompt. Không cần setup thêm gì: khi đã thấy panel, bạn có thể chuyển sang folder dự án và bắt đầu build.

## 7. Bước 3: folder dự án trống và integrated terminal

Trước khi gửi prompt cho Claude Code, ta cần cho nó một chỗ rõ ràng để xây ứng dụng. Hãy tạo một folder trống mới trên máy cho app journal và to-do. Bạn có thể đặt nó ở desktop hoặc trong một folder projects, miễn là dễ tìm.

Mở VS Code, bấm `File`, chọn `Open Folder`, chọn folder vừa tạo rồi mở nó. Folder này sẽ trở thành working directory mà Claude Code dùng cho mọi file nó tạo và mọi lệnh nó chạy trong suốt quá trình build. Trong video, folder mới được tạo ngay trên Desktop và đặt tên ClaudeProject.

Tiếp theo, mở integrated terminal từ menu `Terminal`. Phím tắt:

```
Windows: Ctrl + ` (phím backtick)
Mac:     Command + ` (phím backtick)
```

Terminal sẽ tự mở bên trong folder dự án, nhưng Mikey dặn hãy dành một chút để kiểm tra rằng đường dẫn folder hiện ở đó đúng là folder ta vừa mở. Bước kiểm tra này quan trọng vì mọi lệnh Claude Code chạy đều dùng vị trí đó. Xác nhận đúng đường dẫn ngay từ bây giờ giúp tránh chuyện file bị tạo sai chỗ hoặc lệnh bị lỗi về sau.

Khi folder và terminal đã sẵn sàng, mở panel Claude Code từ sidebar của VS Code. Nếu panel đang hoạt động và sẵn sàng nhận việc, phần setup dự án coi như xong, và ta chuyển sang prompt thứ nhất.

## 8. Bản thiết kế app và Prompt 1: dựng khung dự án

Dự án trong video là một ứng dụng hoàn chỉnh gộp hai công cụ thường ngày vào một chỗ: một cuốn nhật ký cá nhân (journal) và một danh sách việc cần làm (to-do list). Phần journal cho người dùng thêm và xóa các mục nhật ký; phần to-do cho họ tạo task, đánh dấu đã xong, và tất nhiên là xóa. Toàn bộ được xây qua bốn prompt tập trung: bắt đầu với cấu trúc cơ bản, rồi thêm từng tính năng một, và kết thúc bằng thiết kế tổng thể cùng khả năng responsive trên điện thoại.

Trước khi có thể thêm mục nhật ký hay task, ứng dụng cần một nền móng chắc. Thay vì tự setup dự án và tự quyết định cách tổ chức từng file, ta chỉ cần mô tả cấu trúc mình cần và để Claude Code lo toàn bộ điểm khởi đầu. Mở panel Claude Code trong VS Code và nhập đúng prompt sau, như hiện trên màn hình:

```
Scaffold a journal and todo list web app. Set up the project structure, install dependencies, and get a basic app running in the browser with a clean minimal design and a navigation system that switches between a Journal section and a Todo section.
```

Gửi prompt xong, Claude Code bắt đầu tạo các file dự án, cài các dependency cần thiết qua integrated terminal, và sắp xếp toàn bộ cấu trúc ứng dụng. Bạn có thể theo dõi quá trình qua output trong terminal và trong file explorer khi các file, folder lần lượt xuất hiện. Ở phần này bạn không phải tự tạo hay tự chạy gì cả, vì Claude Code tự lo code, quản lý file, các lệnh cài đặt và phần setup ban đầu, hoàn toàn dựa trên chỉ dẫn trong prompt vừa gửi.

![Panel Claude Code trong VS Code đang chạy các lệnh Bash sau prompt dựng khung](https://homus.dev/photos/bxSr8QAQt7c-1003.jpg)

Panel Claude Code sau Prompt 1, tiêu đề phiên "Build journal and todo list web app". Nó liệt kê folder (đang trống), quyết định dựng một app Vite + React có thanh điều hướng Journal/Todo, thử chạy `npm create vite@latest` thì gặp lỗi `npm: command not found`, rồi tự kiểm tra node và npm có trên máy hay không.

Trên màn hình, khi bản đầu hoàn tất, Claude Code tóm tắt rằng nó đã dựng một dự án React + Vite (phải cài Node.js trước vì máy chưa có), gồm thanh điều hướng chuyển giữa Journal và Todo, phần Journal với ô soạn và các mục có thời gian, phần Todo thêm, đánh dấu, xóa task, cả hai lưu vào `localStorage`, và một theme tối giản hỗ trợ chế độ sáng, tối.

## 9. Kiểm tra bản build đầu trong trình duyệt

Sau khi Claude Code làm xong, mở ứng dụng trong trình duyệt và xem kết quả lần đầu. Bạn sẽ thấy một app cơ bản chạy được, bố cục gọn gàng, có thanh điều hướng cho phép chuyển qua lại giữa phần journal và phần to-do. Trong video, app chạy ở `localhost:5173` và được Claude Code đặt tên Daybook, với hai tab Journal và Todo, một ô "Write today's entry..." và nút "Add entry".

Lúc này cả hai phần vẫn gần như trống, và đó đúng là điều ta muốn. Mục đích của prompt thứ nhất là xác nhận dự án chạy đúng và cấu trúc cốt lõi đã có, trước khi bắt đầu thêm chức năng cho journal.

## 10. Prompt 2: tính năng journal, mood và lưu dữ liệu

Khi app cơ bản đã chạy, ta bắt đầu biến phần journal trống thành thứ người dùng thật sự dùng được. Đây là lần đầu Claude Code thêm một tính năng hoàn chỉnh vào dự án đang có, nên nó cũng cho thấy Claude Code xây chồng lên phần việc chính nó đã tạo tốt tới đâu, mà không làm xáo trộn thanh điều hướng hay cấu trúc tổng thể.

Quay lại panel Claude Code và nhập prompt này:

```
Expand the journal feature. Improve the overall UX, design, and feel of the application. Allow users to be able to log entries, draft a mood, and other related info.
```

Gửi đi rồi, Claude Code bắt đầu cập nhật dự án hiện có. Nó tạo form để viết mục nhật ký, thêm thông tin mood đi kèm, và xây một danh sách cuộn được để xem lại các mục cũ. Nó cũng thêm tùy chọn xóa một mục, và thiết lập lưu dữ liệu (persistence) để các mục đã lưu vẫn còn giữa các phiên làm việc khác nhau.

Trên màn hình, bản tóm tắt của Claude Code sau prompt này liệt kê: theo dõi mood với 5 mức, hiện thành badge màu trên mỗi thẻ và lọc được bằng chip; tiêu đề và tag (tag ngăn cách bằng dấu phẩy); tìm kiếm trực tiếp theo tiêu đề, nội dung, tag; sửa một mục bằng cách nạp lại vào ô soạn; nhóm các mục theo ngày ("Today", "Yesterday"...); bộ đếm số từ; và các mục cũ trong `localStorage` vẫn tải bình thường.

Làm xong, mở lại app trong trình duyệt để thử tính năng. Viết mục nhật ký đầu, thêm thông tin liên quan rồi gửi. Mục mới sẽ hiện ngay trong danh sách bên dưới form. Hãy dành chút thời gian kiểm tra rằng mục đó hiển thị đúng, và xóa được nó mà không ảnh hưởng phần còn lại của ứng dụng. Nếu được như vậy, tính năng journal đã chạy đúng và ta chuyển sang phần to-do.

![App Daybook phần Journal với ô tiêu đề, ô nội dung, chọn mood, tag và mục nhật ký đầu tiên](https://homus.dev/photos/bxSr8QAQt7c-1223.jpg)

Phần Journal sau Prompt 2: ô "Title (optional)", ô "What's on your mind today?", năm biểu tượng mood, ô tag, bộ đếm từ, ô tìm kiếm và bộ lọc mood. Mục thử nghiệm "My first entry!" hiện dưới nhóm "TODAY" với tag #gratitude và #work.

## 11. Prompt 3: to-do list, bộ lọc và giao diện task đã xong

Một app hữu ích thường cần nhiều hơn một tính năng chạy cùng lúc, và bước tiếp theo là để kiểm chứng điều đó. Phần journal đã xong. Giờ Claude Code cần thêm phần to-do mà không đụng tới bất cứ thứ gì đã lưu hoặc đang chạy. Quay lại panel Claude Code và nhập prompt sau:

```
Expand the todo list further as well. Add appropriate filters, make completed tasks have a distinct look compared to active ones, and improve the design overall.
```

Gửi xong, Claude Code cập nhật dự án bằng cách xây phần to-do: hỗ trợ tạo task, thêm bộ lọc để danh sách dễ quản lý hơn, cho task đã hoàn thành một vẻ ngoài khác với task đang làm, và áp thêm một số cải thiện thiết kế cho tính năng này.

Trên màn hình, Claude Code liệt kê các tính năng mới của phần Todo: mức ưu tiên Low/Medium/High hiện thành tag màu; ngày hết hạn, task quá hạn có viền đỏ và tag "Overdue"; bộ lọc trạng thái Active / Completed / All (mặc định Active); tìm kiếm task; thanh tiến độ "X of Y done"; nút xóa nhanh các task đã xong; và sắp xếp thông minh. Task đã xong có nền mờ, chữ gạch ngang và ô checkbox được tô đầy. Có một chi tiết đáng chú ý trong panel: Claude Code tự ghi chú rằng lúc dọn phiên chụp màn hình headless, nó đã chạy một lệnh kill process theo tiêu đề cửa sổ rộng hơn dự định, có thể ảnh hưởng các cửa sổ Chrome khác, và cho biết sẽ tránh cách đó về sau.

![App Daybook phần Todo với ô thêm task, chọn mức ưu tiên, thanh tiến độ và bộ lọc](https://homus.dev/photos/bxSr8QAQt7c-1343.jpg)

Phần Todo sau Prompt 3: ô "Add a task...", nút ưu tiên Low/Medium/High, chọn ngày, thanh tiến độ "1 of 1 done", bộ lọc Active/Completed/All, lọc theo ưu tiên và nút "Clear completed".

Khi cập nhật xong, mở lại app trong trình duyệt và thử lại mọi thứ. Thêm một task mới, đánh dấu hoàn thành, rồi xóa nó để chắc chắn từng thao tác chạy như mong đợi.

Trước khi đi tiếp, hãy chuyển lại sang phần journal và kiểm tra rằng các mục đã tạo ở bước trước vẫn còn và vẫn chạy bình thường. Prompt to-do chỉ tập trung thêm tính năng mới, nên nó không được ảnh hưởng chức năng journal đang có. Nếu cả hai phần chạy đúng và độc lập với nhau, chức năng cốt lõi của ứng dụng đã hoàn tất, và chỉ còn lượt hoàn thiện cuối cùng: cải thiện vẻ ngoài tổng thể, độ nhất quán và khả năng responsive của cả app.

## 12. Prompt 4: làm lại toàn bộ thiết kế theo kiểu Evernote

Ở giai đoạn này app đã chạy được, nhưng tất nhiên chỉ có chức năng thôi thì chưa đủ. Bước cuối là làm cho phần journal và phần to-do trông nhất quán, dùng thoải mái trên nhiều kích thước màn hình, và sẵn sàng để trình bày như một ứng dụng hoàn chỉnh.

Quay lại panel Claude Code và nhập đúng prompt sau:

```
Redo the entire design of the application. Give it a similar look and feel to Evernote, with a togglable dark and light theme. Give it a more modern look and improve the typography, spacing, and visual consistency throughout the application. Make sure the app is fully responsive.
```

Gửi prompt này đi, Claude Code áp các cải thiện giao diện lên toàn bộ app: cập nhật typography, khoảng cách, độ nhất quán màu sắc và bố cục tổng thể, đồng thời thêm nút chuyển giữa theme sáng và tối như prompt yêu cầu.

Mikey giải thích vì sao làm thiết kế trong một lượt riêng: cách này hiệu quả hơn nhiều so với đổi giao diện sau mỗi tính năng. Vì lúc này cả hai phần đều đã chạy, Claude Code chỉ cần tập trung làm đẹp toàn bộ app, không phải trộn hai loại thay đổi vào phần chức năng đã làm trước đó.

![App Daybook sau khi làm lại thiết kế, sidebar trái và nền sáng](https://homus.dev/photos/bxSr8QAQt7c-1548.jpg)

Daybook sau Prompt 4 trên màn hình desktop: bố cục kiểu Evernote với sidebar Journal/Todo bên trái, nền sáng, thẻ bo góc, và công tắc "Light mode" ở góc dưới sidebar.

Cập nhật xong, mở app trong trình duyệt lần nữa và đi qua cả phần journal lẫn phần to-do trên màn hình desktop. Kiểm tra rằng thiết kế giữ nhất quán khi chuyển qua lại giữa hai phần, và các tính năng cũ vẫn chạy đúng.

Tiếp theo, thu nhỏ trình duyệt về kích thước màn hình điện thoại và thử lại cả hai phần. Một app journal và to-do thường được dùng trên điện thoại, nên bố cục cần rõ ràng, dễ dùng, không có gì bị tràn, chồng lên nhau hay vỡ. Khi app trông gọn trên cả desktop lẫn mobile và mọi tính năng vẫn chạy đúng, bản build đã sẵn sàng cho phần trình diễn cuối.

![App Daybook ở chế độ responsive kích thước điện thoại trong DevTools của Chrome](https://homus.dev/photos/bxSr8QAQt7c-1603.jpg)

Kiểm tra bố cục mobile bằng chế độ Responsive trong DevTools của Chrome (khung 400 x 876): thanh trên có nút menu và nút đổi theme, form và danh sách nhật ký xếp gọn trong một cột.

## 13. Chạy thử toàn bộ app từ đầu tới cuối

Sau bốn prompt tập trung, app không còn là một dự án cơ bản nằm trong VS Code nữa. Nó là một ứng dụng journal và to-do hoàn chỉnh, có thể thử từ đầu tới cuối để xác nhận mọi phần hoạt động ăn khớp với nhau.

Mở app hoàn chỉnh trong trình duyệt thêm một lần, bắt đầu với phần journal: viết một mục mới, gửi đi và kiểm tra nó hiện trong danh sách. Sau đó xóa mục đó để chắc chắn toàn bộ luồng journal chạy đúng.

Tiếp theo, chuyển sang phần to-do và thêm một task mới, đánh dấu hoàn thành để thấy sự khác biệt về giao diện giữa task đang làm và task đã xong, rồi xóa nó khỏi danh sách. Cả hai phần vẫn phải chạy độc lập, và dữ liệu vẫn phải được lưu giữa các phiên.

![Sơ đồ bốn prompt dẫn tới VS Code và app Daybook hoàn chỉnh](https://homus.dev/photos/bxSr8QAQt7c-1643.jpg)

Bốn prompt của video đặt cạnh nhau phía trên, dẫn xuống phiên Claude Code trong VS Code bên trái và app Daybook hoàn chỉnh trong trình duyệt bên phải.

Cuối cùng, đi qua app trên cả kích thước desktop và mobile. Thiết kế phải giữ nhất quán giữa phần journal và to-do, và bố cục vẫn rõ ràng, dễ dùng trên màn hình nhỏ.

## 14. Code là của bạn: file thật trên máy, không khóa trong nền tảng no-code

Giờ quay lại VS Code và mở dự án trong file explorer thêm một lần. Những file hiện ở đây là các file code thật mà Claude Code đã tạo qua bốn prompt. Không có gì bị khóa trong một nền tảng no-code, và dự án không bị giới hạn vào một dịch vụ duy nhất.

![File Explorer của Windows mở folder ClaudeProject với các file dự án](https://homus.dev/photos/bxSr8QAQt7c-1743.jpg)

Folder ClaudeProject trên Desktop: node_modules, public, src, .gitignore, .oxlintrc, các file log dev, index, package, package-lock, README và vite.config, đều là file thường trên máy.

Theo Mikey, bạn sở hữu hoàn toàn code này. Nó có thể được host trên bất kỳ server nào, được một lập trình viên khác chỉnh sửa, hoặc chuyển sang một setup khác, mà không phụ thuộc vào Claude hay một gói thuê bao nền tảng nào. Anh coi tính di động (portability) đó là một trong những khác biệt lớn nhất giữa việc xây app bằng Claude Code và tạo app trong một công cụ no-code truyền thống. Trên màn hình lúc này lướt qua một trình dựng website no-code để so sánh.

Kết quả cuối là một ứng dụng hoàn chỉnh, chạy được, xây mà không phải tự tay viết một dòng code nào. Phần journal và to-do đều hoạt động, dữ liệu được lưu lại, thiết kế nhất quán, và app responsive trên cả desktop lẫn mobile.

## 15. Vì sao chọn extension VS Code, và công thức bốn prompt dùng lại được

Extension Claude Code đưa coding agent của Anthropic vào thẳng VS Code, giúp toàn bộ quá trình xây dựng dễ theo dõi hơn nhiều. Claude Code cũng có trên desktop app và CLI, nhưng extension VS Code giữ agent ngay cạnh file, terminal và editor mà nó đang làm việc cùng. Mọi thứ diễn ra trong một môi trường, không phải chuyển qua lại giữa các công cụ hay tự quản lý dự án. Vì vậy, theo Mikey, VS Code là lựa chọn thực tế cho người mới và cho bất kỳ ai muốn Claude Code trở thành một phần của workflow phát triển thường ngày.

![Màn hình chọn cách đăng nhập của Claude Code trong terminal](https://homus.dev/photos/bxSr8QAQt7c-1907.jpg)

Claude Code bản CLI trong terminal, màn hình "Select login method": dùng tài khoản Claude có gói thuê bao (theo video đăng ngày 22/09/2026, màn hình ghi "Starting at $20/mo for Pro, $100/mo for Max") hoặc tài khoản Anthropic Console tính phí theo mức dùng API.

Extension này có thể tạo file, viết và sửa code, cài dependency, chạy lệnh terminal và quản lý cấu trúc dự án, trong khi bạn chỉ ngồi xem ứng dụng thành hình ngay trong editor.

Cấu trúc prompt cốt lõi trong video cũng là thứ bạn dùng lại được cho các dự án sau. Prompt thứ nhất tạo khung và cấu trúc cốt lõi. Prompt thứ hai thêm tính năng journal. Prompt thứ ba xây phần to-do bên cạnh nó. Và prompt cuối tập trung vào thiết kế, độ nhất quán giao diện, theme sáng và tối, cùng khả năng responsive trên mobile, sau khi chức năng đã chạy xong.

Mỗi tầng xây trên một nền đã được kiểm tra: một prompt cho một việc rõ ràng, và phần thiết kế để sau cùng khi chức năng đã chạy.

Giữ mỗi prompt tập trung vào một việc rõ ràng làm cho quá trình dễ quản lý hơn nhiều. Mỗi giai đoạn được xây trên một nền móng đã được kiểm tra, nhờ đó giảm khả năng một prompt lớn gây ra vấn đề trên toàn bộ ứng dụng.

Kết quả cuối cũng quan trọng vì Claude Code tạo ra các file code thật trên máy. Dự án thuộc hoàn toàn về bạn: host trên server nào cũng được, người khác sửa được, chuyển sang workflow khác được. Nó không gắn vào một nền tảng no-code, cũng không phụ thuộc một gói thuê bao chỉ để giữ cho app còn chạy.

## 16. Đến lượt bạn

Từ đây, bạn có thể dùng đúng quy trình này để xây một ứng dụng nhỏ hoặc vừa khác, dù là một công cụ cá nhân, một tiện ích nhiều tính năng, hay một dự án nhiều trang phức tạp hơn. Mikey tóm lại các bước:

- Chọn một ý tưởng đơn giản.

- Tạo một folder dự án trống mới.

- Cài extension Claude Code chính thức từ Extensions Marketplace trong VS Code.

- Mở panel Claude Code, mô tả nền móng của app trong một scaffold prompt rõ ràng.

- Khi bản đầu đã chạy: thêm từng tính năng một, test mỗi giai đoạn.

- Để phần thiết kế cuối cùng, sau khi chức năng đã hoàn tất.

Mọi thứ xây trong video đều đến từ bốn prompt tập trung thay vì một yêu cầu khổng lồ. Đó là workflow anh khuyến khích mọi người tiếp tục dùng: xây nền móng trước, rồi thêm từng tính năng, test mỗi giai đoạn, và chỉ làm đẹp thiết kế khi mọi thứ đã chạy.

Giờ đến lượt bạn: chọn một dự án đơn giản, mở một folder mới trong VS Code và bắt đầu build. Mikey mời người xem kể lại họ đã tạo được gì, và hẹn gặp ở bản build tiếp theo.

## Nguồn và liên kết

- Tên gốc: How To Use Claude Code In Visual Studio Code - Step by Step
- Sự kiện: [YouTube](https://homus.dev/events/youtube)
- Video gốc: [https://www.youtube.com/watch?v=bxSr8QAQt7c](https://www.youtube.com/watch?v=bxSr8QAQt7c)

- Kênh YouTube Mikey No Code (Mikey No Code): [youtube.com/channel/UCde0vB0fTwC8AT3sJofFV0w](https://www.youtube.com/channel/UCde0vB0fTwC8AT3sJofFV0w)

- Visual Studio Code, trang tải bản cài cho Mac, Windows và Linux: [code.visualstudio.com](https://code.visualstudio.com/)

- Extension Claude Code for VS Code của Anthropic trên Visual Studio Marketplace: [marketplace.visualstudio.com/items?itemName=anthropic.claude-code](https://marketplace.visualstudio.com/items?itemName=anthropic.claude-code)

- Tài liệu chính thức "Use Claude Code in VS Code" (cài và cấu hình extension): [code.claude.com/docs/en/vs-code](https://code.claude.com/docs/en/vs-code)

- Trang giới thiệu Claude Code của Anthropic: [claude.com/product/claude-code](https://claude.com/product/claude-code)

- Bảng giá các gói Claude (Free, Pro, Max), giá có thể khác so với video: [claude.com/pricing](https://claude.com/pricing)

Nguồn: https://homus.dev/talks/how-to-use-claude-code-in-visual-studio-code-step-by-step · cập nhật 2026-10-19