Claude Code trong VS Code: Hướng Dẫn Setup Từng Bước (2026)

Mình dùng Claude Code qua terminal được vài tháng trước khi thử extension. Thành thật mà nói, mình không kỳ vọng nhiều lắm, chỉ nghĩ extension là giao diện bọc lại. Sau một buổi chiều dùng thực tế, mình nhận ra mình đã sai. Extension giải quyết đúng điểm đau lớn nhất: không phải switch qua lại giữa terminal và editor liên tục khi đang viết code. Nếu bạn chưa rõ Claude Code là công cụ gì, đọc bài Claude Code là gì trước để có nền tảng.

Terminal vs VS Code: Hai Cách Dùng Claude Code Có Gì Khác Nhau?

Claude Code có hai môi trường chạy chính. Terminal CLI phù hợp với automation và scripting; VS Code extension phù hợp với interactive coding flow. Theo Anthropic docs (2025), extension cung cấp thêm ba tính năng native không có trong terminal: Inline Diff trực tiếp trên editor buffer, @-mentions file từ file tree với autocomplete, và active file context tự động theo tab đang mở.

Điều nhiều người bỏ qua: hai chế độ này có thể chạy song song trên cùng một project mà không xung đột. Extension và terminal dùng chung file CLAUDE.md và thư mục .claude/, nhưng mỗi session có conversation history riêng. Mình đã thử workflow dùng terminal để chạy test automation trong khi extension xử lý code review. Hoạt động hoàn toàn ổn.

Cài Claude Code Extension Trong VS Code Như Thế Nào?

Cài Claude Code extension mất khoảng 3 phút. Mở VS Code, vào Extensions panel (Ctrl+Shift+X), tìm “Claude Code”, publisher là Anthropic. Bấm Install. Sau khi cài xong, extension hiện icon mới trong Activity Bar bên trái. Lần đầu mở, VS Code sẽ hỏi API key. Đây là bước quan trọng nhất.

Lấy API Key Từ Anthropic Console

Truy cập console.anthropic.com/settings/keys, đăng nhập tài khoản Anthropic, tạo API key mới. Copy key ngay vì nó chỉ hiện một lần. Nếu dùng Claude Pro/Max subscription, extension hỗ trợ OAuth login thay vì API key. Chọn “Sign in with Anthropic” trong extension setup wizard.

Cấu Hình settings.json

Sau khi nhập key, có một số cài đặt hữu ích trong settings.json. Mở Command Palette (Ctrl+Shift+P), gõ “Open User Settings (JSON)”, thêm block sau:

{
  "claude-code.enableInlineSuggestions": true,
  "claude-code.autoAddActiveFile": true,
  "claude-code.model": "claude-sonnet-4-5",
  "claude-code.maxTokens": 8192
}

Setting autoAddActiveFile là mình bật ngay từ đầu. Extension tự động thêm file đang mở vào context của mỗi prompt, giảm đáng kể số lần phải @-mention thủ công.

6 Tính Năng Claude Code Trong VS Code Mình Dùng Mỗi Ngày

Sau vài tháng dùng extension hàng ngày, mình đã lọc ra 6 tính năng thực sự tạo ra sự khác biệt trong workflow. Không phải tất cả tính năng đều xứng đáng thời gian học. Đây là những cái mình dùng nhiều nhất.

1. Inline Edit: Sửa Code Không Rời Vị Trí Con Trỏ

Chọn một đoạn code, nhấn Ctrl+I (hoặc Cmd+I trên Mac), gõ yêu cầu. Claude Code chỉnh sửa ngay trong editor, hiển thị diff với màu xanh/đỏ để bạn so sánh. Accept hoặc reject từng thay đổi bằng một click. Mình dùng tính năng này nhiều nhất, khoảng 40-50 lần mỗi ngày làm việc.

// Ví dụ: chọn function này, nhấn Ctrl+I
function calculateTotal(items) {
  let total = 0;
  for (let i = 0; i < items.length; i++) {
    total += items[i].price;
  }
  return total;
}
// Prompt: "refactor dùng reduce, thêm tax parameter"

2. Sidebar Chat: Hỏi Về Cả Codebase

Sidebar Chat khác với Inline Edit ở chỗ: nó cho phép hỏi về cả project, không chỉ đoạn code đang chọn. Mở bằng Ctrl+Shift+C. Bạn có thể @-mention nhiều file cùng lúc, hỏi về architecture, hoặc nhờ Claude giải thích logic phức tạp mà không cần copy-paste vào chat ngoài. Mình dùng tính năng này cho code review và onboarding codebase mới.

3. Diff View: Xem Thay Đổi Trước Khi Accept

Mọi thay đổi Claude đề xuất đều hiển thị qua diff view tích hợp của VS Code: màu xanh cho dòng thêm, màu đỏ cho dòng xóa. Bạn có thể accept từng hunk riêng lẻ, không phải accept toàn bộ. Với mình, đây là tính năng an toàn nhất của extension: không có gì thay đổi code của bạn mà bạn không nhìn thấy trước.

4. Terminal Integration: Chạy Lệnh Từ Chat

Khi Claude đề xuất một lệnh terminal (ví dụ: npm install, git commit), bạn có thể chạy trực tiếp từ chat panel bằng một click mà không cần mở terminal riêng. Extension dùng VS Code integrated terminal, nên output hiện ngay trong editor. Mình thấy tính năng này đặc biệt hữu ích khi làm việc với Docker commands hoặc database migrations.

5. Multi-file Context: Làm Việc Với Nhiều File Cùng Lúc

Dùng @-mention để thêm nhiều file vào context của một prompt. Ví dụ: @src/api/users.ts @src/types/user.ts refactor interface. Extension autocomplete đường dẫn từ file tree, không cần gõ tay. Giới hạn thực tế mình tìm ra: khoảng 5-7 file lớn là ngưỡng hợp lý trước khi token cost tăng đáng kể. Đọc thêm về cách tiết kiệm token Claude Code để tối ưu chi phí.

6. Context Menu: Claude Code Ngay Từ Chuột Phải

Click chuột phải trên bất kỳ đoạn code nào, menu context hiện tùy chọn “Ask Claude” và “Edit with Claude”. Đây là cách nhanh nhất để gọi extension mà không cần nhớ shortcut. Mình hay dùng cách này để giải thích code nhanh khi đọc codebase người khác viết.

Keyboard Shortcuts Cần Nhớ Khi Dùng Claude Code Trong VS Code

Nhớ shortcuts giúp tăng tốc đáng kể. Theo mình quan sát, người dùng mới thường mất 2-3 tuần để shortcuts thành phản xạ tự nhiên. Dưới đây là danh sách đầy đủ mình dùng hàng ngày, kèm ghi chú về trường hợp dùng thực tế.

Bạn có thể tùy chỉnh shortcuts trong VS Code Keyboard Shortcuts editor (Ctrl+K Ctrl+S). Tìm “Claude Code” để thấy tất cả keybindings có thể override.

CLAUDE.md và Skills Hoạt Động Thế Nào Trong VS Code Extension?

CLAUDE.md là file hướng dẫn project-level cho Claude. Khi bạn mở folder trong VS Code, extension tự động đọc file CLAUDE.md ở root của workspace, không cần cấu hình thêm. Đây là cách bạn truyền context về tech stack, coding conventions, và các quy tắc dự án cho Claude một lần, áp dụng cho mọi session.

# CLAUDE.md ví dụ cho project Node.js

## Tech Stack
- Node.js 20, TypeScript 5.x
- Express 4, PostgreSQL với Prisma ORM
- Jest cho unit tests

## Coding Conventions
- Dùng async/await, không dùng callbacks
- Error handling: throw AppError với HTTP status code
- Tên file: kebab-case, tên function: camelCase

## Commands
- `npm run dev`, start development server
- `npm test`, chạy toàn bộ test suite

File CLAUDE.md tốt sẽ giảm đáng kể số lần bạn phải giải thích lại context cho Claude mỗi session. Đọc chi tiết tại bài CLAUDE.md là gì và cách viết hiệu quả để nắm đầy đủ syntax và best practices.

Skills Tích Hợp Workspace

Skills là các module hành vi đặc biệt bạn có thể gắn vào Claude Code. Trong VS Code extension, Skills hoạt động tương tự như trong terminal. Đặt file skill vào thư mục .claude/skills/ ở root project, extension tự nhận diện khi khởi động session mới.

# Cấu trúc thư mục với Skills
your-project/
├── .claude/
│   └── skills/
│       ├── blog-writing.md    # Skill viết blog
│       └── code-review.md     # Skill review code
├── CLAUDE.md
└── src/

Mình đang dùng Skills cùng với Hooks để tự động hóa nhiều tác vụ lặp đi lặp lại. Nếu bạn muốn xây dựng workflow tự động với Hooks, bài Claude Code hooks giải thích cơ chế chi tiết. Còn để hiểu cách dùng Skills hiệu quả, đọc hướng dẫn Claude Code skills.

Slash Commands Trong VS Code Extension Có Gì?

Slash commands hoạt động trong Sidebar Chat của extension, cho phép điều khiển nhanh session và context. Gõ / trong chat input để xem danh sách đầy đủ. Một số commands quan trọng nhất mình dùng hàng ngày được liệt kê dưới đây.

Danh sách đầy đủ và cách kết hợp slash commands hiệu quả có trong bài Claude Code slash commands. Mình đã ghi lại 13 commands kèm ví dụ thực tế.

Lỗi Thường Gặp Khi Dùng Claude Code Trong VS Code Và Cách Fix

Sau thời gian dùng thực tế, mình đã gặp phải khoảng 5-6 lỗi hay xuất hiện. Phần lớn có nguyên nhân đơn giản và fix được trong vài phút. Mình tổng hợp lại ở đây để bạn không mất thời gian đi tìm StackOverflow.

Lỗi “API Key Invalid” Sau Khi Cài Extension

Nguyên nhân hay nhất: copy API key bị dư khoảng trắng ở đầu hoặc cuối. Vào VS Code Settings, tìm “Claude Code: Api Key”, xóa key hiện tại, paste lại cẩn thận. Nếu vẫn lỗi, kiểm tra key còn hiệu lực trên Anthropic Console. Key mới tạo có thể mất 1-2 phút để activate.

Extension Không Nhận Diện CLAUDE.md

Extension chỉ đọc CLAUDE.md ở root của workspace folder hiện tại. Nếu bạn mở VS Code với một file đơn lẻ thay vì một folder, extension không biết workspace root là đâu. Fix: dùng File > Open Folder thay vì File > Open File, hoặc thêm folder vào workspace với File > Add Folder to Workspace.

Inline Edit Không Hiện Diff, Chỉ Thay Thế Luôn

Đây là setting mặc định của một số version cũ. Vào settings.json, thêm "claude-code.showDiffBeforeApply": true. Sau đó reload VS Code window bằng Ctrl+Shift+P > “Developer: Reload Window”. Diff view sẽ xuất hiện từ lần inline edit tiếp theo.

Extension Chậm, Phản Hồi Mất 10-15 Giây

Nguyên nhân thường là context quá lớn. Khi conversation history dài, mỗi request phải gửi lại toàn bộ history lên API. Dùng /compact để nén context, hoặc /clear để bắt đầu session mới. Nếu vẫn chậm, kiểm tra kết nối mạng đến api.anthropic.com. Đây là endpoint Anthropic, đôi khi bị block bởi một số firewall công ty.

Conflict Với Copilot Hoặc Extensions AI Khác

Nhiều extensions AI cùng chạy có thể tranh giành inline suggestion. Tắt inline suggestions của extension khác khi dùng Claude Code. Hoặc đơn giản hơn: disable hẳn extension AI không cần thiết cho workspace hiện tại thay vì globally.

Setup Nhanh Bằng Script Tự Động?

Nếu bạn muốn cài VS Code + Claude Code + 26 extensions chỉ bằng 1 lệnh, repo claude-code-essentials-vs-code trên GitHub tự động hóa toàn bộ. Script hỗ trợ cả 3 OS.

git clone https://github.com/AgriciDaniel/claude-code-essentials-vs-code.git
cd claude-code-essentials-vs-code
chmod +x setup.sh
./setup.sh

git clone https://github.com/AgriciDaniel/claude-code-essentials-vs-code.git
cd claude-code-essentials-vs-code
.setup.ps1

Script cài đặt:

• 26 VS Code extensions (Python, ESLint, Prettier, GitLens, Tailwind, Claude Code Official, Copilot…)
• Claude Code CLI (binary installer, auto-update)
• Template CLAUDE.md + cấu trúc thư mục .claude/ sẵn sàng dùng

Câu Hỏi Thường Gặp

Claude Code VS Code extension có miễn phí không?

Extension cài từ Marketplace miễn phí. Nhưng để sử dụng, bạn cần API key từ Anthropic Console hoặc subscription Claude Pro/Max. Với API key, bạn trả theo lượng token dùng thực tế. Với Claude Pro ($20/tháng), bạn dùng qua OAuth login không tính thêm phí API riêng, nhưng có rate limit. Claude Max ($100/tháng) có giới hạn cao hơn nhiều.

Extension và CLI terminal có dùng chung context không?

Dùng chung CLAUDE.md, Skills, và .claude/ folder, nhưng không dùng chung conversation history. Mỗi session extension và mỗi session terminal đều có lịch sử hội thoại riêng. Bạn có thể chạy cả hai cùng lúc trên cùng project mà không lo xung đột.

Có thể dùng Claude Code extension trong VS Code trên máy chủ remote không?

Có. Extension hỗ trợ VS Code Remote SSH, Remote Containers (Dev Containers), và GitHub Codespaces. Khi dùng remote, extension chạy ở phía remote host, nhưng API calls vẫn đi qua kết nối mạng của remote host đó. Bạn cần đảm bảo remote host có thể kết nối ra ngoài đến api.anthropic.com trên port 443.

Slash commands trong extension có khác với terminal không?

Một số commands giống nhau, một số chỉ có trong extension. Commands như /review và /explain hoạt động với active editor context, nên chỉ có ý nghĩa trong IDE. Commands như /clear, /compact, /model hoạt động giống hệt ở cả hai môi trường. Xem chi tiết tại bài slash commands đầy đủ.

Extension có hỗ trợ Cursor IDE không?

Cursor là fork của VS Code, nên về lý thuyết extension VS Code có thể hoạt động. Tuy nhiên Anthropic chưa chính thức hỗ trợ Cursor. Mình đã thử và extension load được nhưng một số tính năng native như diff view hoạt động không ổn định bằng VS Code gốc. Nên dùng VS Code hoặc VS Code Insiders để có trải nghiệm đầy đủ.

CLAUDE.md viết tiếng Việt hay tiếng Anh thì tốt hơn?

Tiếng Anh cho kết quả nhất quán hơn, đặc biệt với các technical instructions. Claude hiểu tiếng Việt tốt, nhưng coding conventions và command names thường là tiếng Anh nên giữ nguyên ngôn ngữ gốc sẽ tránh được nhầm lẫn. Mình dùng CLAUDE.md tiếng Anh cho tech stack và conventions, thêm comments tiếng Việt cho business context đặc thù.

Extension có hoạt động offline không?

Không. Claude Code extension cần kết nối internet để gọi Anthropic API mỗi request. Không có offline mode hay local model support trong extension hiện tại (tính đến tháng 4/2026). Nếu bạn làm việc trong môi trường air-gapped, terminal CLI với proxy setup linh hoạt hơn, nhưng vẫn cần internet đến endpoint Anthropic.

Kết Luận

Claude Code VS Code extension không chỉ là terminal bọc lại. Nếu bạn đang phân vân giữa VS Code và Antigravity cho vibe code, extension này là yếu tố đáng cân nhắc. Và nếu muốn biến vault ghi chú thành wiki AI, xem hướng dẫn Obsidian + Claude Code. Inline Diff, Sidebar Chat với @-mentions, và active file context là những tính năng thực sự cải thiện interactive coding workflow theo cách terminal không làm được. Với 74% lập trình viên đang dùng VS Code và 84% đã adopt AI tools (Stack Overflow 2025), đây là sự kết hợp hiển nhiên.

Setup ban đầu mất khoảng 10 phút: cài extension từ Marketplace, nhập API key, cấu hình settings.json cơ bản, thêm CLAUDE.md vào project. Sau đó bạn chỉ cần học 3 shortcuts đầu tiên là có thể dùng ngay: Ctrl+I cho inline edit, Ctrl+Shift+C cho sidebar chat, và Escape để reject diff.

Bước tiếp theo: nếu bạn muốn tối ưu workflow sâu hơn, đọc bài về tiết kiệm token khi dùng Claude Code để kiểm soát chi phí. Và nếu bạn muốn tự động hóa các tác vụ lặp lại, hooks là tính năng tiếp theo cần khám phá. Tham khảo roadmap đầy đủ để chọn learning path phù hợp. Nếu bạn hỏi dùng Claude Code trên máy hay trên VPS để chia sẻ cho team, xem hướng dẫn cài VPS. Và để hiểu rõ giới hạn sử dụng để tắnh chi phí hàng tháng, đọc bài giới hạn sử dụng.