Hôm nay mình sẽ hướng dẫn anh em cách dùng Claude Code trên VS Code để sửa lời mời đăng ký trên trang web. Anh em sẽ gửi yêu cầu rồi kiểm tra trước khi chấp nhận.
Hướng dẫn này dựa trên tài liệu chính thức, còn việc sửa lời mời đăng ký là ví dụ để anh em hình dung; mình chưa tự chạy thử.
Bước một: Cách dùng Claude Code trên VS Code
Anh em cần cài extension Claude Code vào VS Code, nơi mình mở các file của trang web. Extension là phần cài thêm vào VS Code để anh em dùng Claude ngay trong đó. Tài liệu yêu cầu VS Code 1.94.0 trở lên, nên anh em kiểm tra phiên bản trước khi cài.
Anh em cần tài khoản Anthropic có gói Claude trả phí (Pro, Max, Team hoặc Enterprise) hoặc tài khoản Claude Console để đăng nhập. Tài liệu ghi anh em không cần API key, tức mã riêng dùng để phần mềm kết nối với dịch vụ.
Anh em mở mục Extensions bằng Ctrl+Shift+X trên Windows hoặc Cmd+Shift+X trên Mac, rồi gõ Claude Code vào ô tìm kiếm. Anh em bấm Install tại kết quả vừa tìm được để cài extension.
Sau khi cài, anh em mở lại mục Extensions, bấm vào Claude Code và nhìn số phiên bản. Số này cũng là phiên bản Claude Code đi kèm, mà nút duyệt từng thay đổi cần từ v2.1.275 trở lên.
Bước hai: Mở file và đăng nhập
Anh em mở một file của trang web trước, rồi tìm biểu tượng Spark ở góc trên bên phải vùng soạn thảo. Biểu tượng này chỉ hiện khi anh em đang mở một file. Anh em bấm biểu tượng đó để mở panel Claude Code, tức khung chat của Claude ngay trong VS Code.
Lần đầu mở panel, anh em bấm Sign in rồi hoàn tất việc cho phép đăng nhập trong trình duyệt.
Nếu chưa mở file nào, anh em bấm ✻ Claude Code ở góc dưới bên phải cửa sổ để mở panel Claude Code.
Bước ba: Chọn quyền duyệt thủ công
Trước khi giao việc, anh em xem Claude đang ở chế độ nào đã. Anh em bấm vào chỗ hiển thị chế độ ở dưới cùng ô nhập prompt để đổi chế độ, rồi chọn chế độ Manual trong danh sách hiện ra. Theo tài liệu, ở chế độ này Claude hỏi trước khi sửa file và chạy hầu hết lệnh shell.
Theo tài liệu, ở chế độ Edit automatically, Claude sửa phần lớn file trong workspace mà không hỏi. Chế độ Auto thì có một bộ phân loại (classifier) xem xét phần lớn thao tác thay vì hỏi anh em. Workspace là thư mục anh em đang mở để làm việc với file.
Ở chế độ Plan, Claude chờ anh em duyệt kế hoạch trước khi sửa. Mình khuyên anh em chọn Manual trước khi gửi yêu cầu sửa nội dung, để có thể đặt bản gốc cạnh bản đề xuất và đọc từng thay đổi trước khi chấp nhận cả file.
Khi Claude muốn sửa file, anh em sẽ thấy bản gốc nằm cạnh bản đề xuất trong màn hình diff, tức màn hình so sánh để đọc nội dung cũ và nội dung mới cùng lúc.
Bước bốn: Yêu cầu sửa đúng đoạn nội dung
Anh em mở file chứa đoạn cần sửa, rồi select (bôi đen) đúng phần đó. Theo tài liệu, Claude tự thấy đoạn đang được chọn. Prompt là yêu cầu anh em gửi cho công cụ để giao việc.
Mình gợi ý prompt này. Với ví dụ lời mời đăng ký, anh em viết rõ trong yêu cầu gửi cho Claude phần nội dung nào cần sửa, đồng thời nhắc nó giữ nguyên toàn bộ những phần còn lại.
Hãy sửa đoạn mình đã chọn thành lời mời đăng ký tư vấn, với câu chữ dễ hiểu hơn cho người mới. Hãy giữ nguyên link và phần hiển thị, rồi hỏi mình trước khi sửa thêm file khác.
Đây là prompt minh họa, chưa phải yêu cầu mình đã chạy thử. Anh em thay lời mời đăng ký bằng việc thật của trang mình, ví dụ mời người đọc liên hệ tư vấn, để yêu cầu gửi đi đúng với nội dung anh em cần sửa. Nhớ chỉ bôi đen đoạn cần sửa để đọc đề xuất cho dễ.
Bước năm: Kiểm tra từng thay đổi trước khi nhận
Khi màn hình diff hiện ra, anh em đọc nội dung đề xuất cùng đoạn ban đầu để kiểm tra nghĩa có bị lệch không, nhất là lời mời đăng ký và link cần giữ. Anh em khoan duyệt. Đọc cả câu rồi so với đoạn gốc, xem lời mời đăng ký có còn đúng ý mình không.
Dưới mỗi thay đổi, anh em sẽ thấy các nút để duyệt riêng. Nút Accept this change chỉ để đánh dấu mình đã đọc đoạn đó, còn Reject this change thì bỏ đoạn đó khỏi đề xuất. Đọc hết rồi, anh em vẫn phải chấp nhận hoặc từ chối cả file thì việc duyệt mới xong.
Bấm Reject this change thì riêng đoạn đó quay về như cũ trong bản đề xuất, các đoạn khác không bị ảnh hưởng.
Anh em cũng sửa được nội dung đề xuất ngay trong diff. Ở chế độ Manual, nếu anh em sửa ngay trong diff rồi mới chấp nhận, Claude sẽ được báo là anh em đã sửa, nên nó không nghĩ file vẫn giống đề xuất ban đầu của nó.
Nếu diff có hơn 100 thay đổi thì mấy nút duyệt riêng không hiện ra, lúc đó anh em phải đọc và duyệt cả file. Gặp diff dài như vậy, mình gợi ý anh em từ chối rồi nhắn lại yêu cầu hẹp hơn, chẳng hạn chỉ sửa một đoạn.
Lỗi hay gặp
Nếu extension chưa xuất hiện sau khi cài, anh em khởi động lại VS Code hoặc mở Command Palette (bảng gõ tên lệnh để chạy). Anh em bấm Ctrl+Shift+P (Mac là Cmd+Shift+P) để mở Command Palette, rồi gõ Developer: Reload Window và chọn lệnh đó.
Nếu panel báo Not logged in · Please run /login, extension sẽ tự mở lại màn hình đăng nhập. Nếu màn hình đó không hiện, anh em chạy Developer: Reload Window rồi đăng nhập lại.
Nếu anh em đã đặt API key mà vẫn thấy màn hình đăng nhập, có thể VS Code chưa nhận thiết lập đó. Anh em mở VS Code từ terminal, tức cửa sổ gõ lệnh, bằng lệnh code . bên dưới. Như vậy, VS Code sẽ nhận được biến môi trường chứa API key của anh em.
code .Anh em cũng có thể đăng nhập bằng tài khoản Claude để tiếp tục, như cách còn lại mà tài liệu hướng dẫn.
Nếu file bị sửa ngay mà không hỏi, anh em kiểm tra xem có đang ở Auto hoặc Edit automatically hay không. Theo tài liệu, từ Claude Code v2.1.283 trở lên, Auto là chế độ khởi đầu có sẵn của extension. Với bản cũ hơn thì chỉ các gói Pro, Max và Team mới có Auto làm chế độ khởi đầu.
Anh em chuyển về Manual trước khi giao việc tiếp, để Claude hỏi trước khi sửa và mình tự quyết có nhận thay đổi hay không.
Mình chỉ chấp nhận file khi đã chắc mọi đoạn trong đó đều đúng ý mình muốn đăng lên trang.
