Vibe Coding với GitHub Copilot: Từ Cơ bản đến Nâng cao

Phần 1: Nền tảng Vibe Coding & GitHub Copilot

xdev.asia

1. Inline Chat — Chỉnh sửa code tại chỗ

Inline Chat cho phép bạn mở một prompt nhỏ ngay trong editor, mô tả thay đổi bạn muốn, và Copilot sẽ edit code tại chỗ mà không cần chuyển sang Chat view.

Mở Inline Chat

• macOS: Cmd+I
• Windows/Linux: Ctrl+I

Workflow cơ bản:

1. Chọn (select) đoạn code muốn chỉnh sửa (hoặc đặt cursor tại vị trí muốn thêm code)
2. Nhấn Cmd+I
3. Gõ mô tả thay đổi bằng tiếng Anh/Việt
4. Review diff hiển thị inline
5. Nhấn Accept hoặc Discard

2. Các use case phổ biến của Inline Chat

2.1. Thêm error handling

// Select function này → Cmd+I → "Add try-catch error handling with proper logging"
async function fetchUserData(userId: string) {
const response = await fetch(/api/users/${userId});
const data = await response.json();
return data;
}
// Copilot sẽ suggest:
async function fetchUserData(userId: string) {
try {
const response = await fetch(/api/users/${userId});
if (!response.ok) {
throw new Error(HTTP error! status: ${response.status});
}
const data = await response.json();
return data;
} catch (error) {
console.error(Failed to fetch user ${userId}:, error);
throw error;
}
}

2.2. Refactor code

# Select block code → Cmd+I → "Refactor to use list comprehension"
Trước:
result = []
for item in items:
if item.price > 100:
result.append(item.name)
Sau (Copilot suggest):
result = [item.name for item in items if item.price > 100]

2.3. Thêm TypeScript types

// Select → Cmd+I → "Add TypeScript type annotations"
// Trước:
function processOrder(order, discount) {
const total = order.items.reduce((sum, item) => sum + item.price, 0);
return total * (1 - discount);
}
// Sau:
interface OrderItem {
id: string;
name: string;
price: number;
}
interface Order {
id: string;
items: OrderItem[];
}
function processOrder(order: Order, discount: number): number {
const total = order.items.reduce((sum, item) => sum + item.price, 0);
return total * (1 - discount);
}

2.4. Generate documentation

# Select function → Cmd+I → "Add docstring with parameters and return type"
def calculate_compound_interest(principal, rate, time, n=12):
    """
    Calculate compound interest.
Args:
    principal (float): Initial investment amount.
    rate (float): Annual interest rate (as a decimal, e.g., 0.05 for 5%).
    time (float): Time period in years.
    n (int): Number of times interest is compounded per year. Defaults to 12.

Returns:
    float: The total amount after compound interest.
"""
return principal * (1 + rate / n) ** (n * time)

2.5. Viết unit test

// Select function → Cmd+I → "Generate unit tests using Jest"
// Copilot tự sinh test cases bao gồm happy path, edge cases, error cases

3. Smart Actions — AI tích hợp vào workflow

Smart Actions là các hành động AI được tích hợp sẵn vào giao diện VS Code, xuất hiện tại đúng nơi bạn cần mà không cần mở chat.

3.1. Generate Commit Messages

1. Mở Source Control view (Ctrl+Shift+G)
2. Stage các changes
3. Click sparkle icon ✨ bên cạnh commit message input
4. Copilot phân tích changes và sinh commit message theo conventional commits

// Ví dụ generated commit message:
feat(auth): add JWT token refresh mechanism

- Add refreshToken endpoint to AuthController
- Implement token rotation with configurable expiry
- Add middleware to auto-refresh expired tokens

3.2. Fix with Copilot (Quick Fix)

Khi VS Code hiển thị error (squiggly line đỏ):

1. Hover vào error → click "Quick Fix"
2. Chọn "Fix with Copilot"
3. Copilot đọc error message, phân tích context, và suggest fix

3.3. Explain with Copilot

Select đoạn code phức tạp → Right-click → "Copilot" → "Explain This"

Copilot giải thích code bằng ngôn ngữ tự nhiên, rất hữu ích khi đọc code của người khác hoặc AI-generated code.

3.4. Generate Tests

Right-click vào function → "Copilot" → "Generate Tests"

Copilot tự động tạo test file với các test cases phù hợp framework của project (Jest, Pytest, Go testing...).

3.5. Fix Test Failure

Khi test fail trong Test Explorer:

1. Click vào failed test
2. Chọn "Fix with Copilot"
3. Copilot đọc test failure message, tìm root cause, và suggest fix cho code (không phải fix test)

4. Semantic Search trong VS Code

Copilot cung cấp semantic search — tìm kiếm theo ý nghĩa, không chỉ text matching:

// Traditional search: tìm "authenticate"
// Kết quả: chỉ những chỗ có chính xác từ "authenticate"

// Semantic search: tìm "user login process"
// Kết quả: authenticate(), verifyCredentials(), signIn(), checkPassword()
// → Tìm được code liên quan dù không match exact text

5. Khi nào dùng Inline Chat vs Agent vs Chat?

Tính năng	Khi nào dùng	Scope
Inline Suggestions	Code flow không gián đoạn	Dòng/block hiện tại
Inline Chat	Edit cụ thể, refactor, add docs	Selected code hoặc vị trí cursor
Chat View (Ask)	Hỏi đáp, explain, brainstorm	Không thay đổi code
Agent Mode	Build features, multi-file changes	Toàn bộ project

Scope nhỏ → lớn:
Inline Suggestions → Inline Chat → Chat (Ask) → Agent Mode
     (line)          (selection)      (Q&A)       (project)

6. Tips để Inline Chat hiệu quả

• Select chính xác: chọn đúng đoạn code cần edit, không thừa không thiếu
• Mô tả rõ ràng: "Add input validation for email and phone" tốt hơn "validate this"
• Một thay đổi mỗi lần: chia nhỏ thay đổi lớn thành nhiều Inline Chat nhỏ
• Dùng code terminology: "Extract to a helper function" thay vì "make this separate"
• Review trước khi Accept: đọc diff kỹ, đặc biệt logic thay đổi

7. Bài tập thực hành

Tạo file smart-actions-practice.ts:

// Bài tập 1: Select function → Cmd+I → "Add error handling"
function divideNumbers(a, b) {
  return a / b;
}

// Bài tập 2: Select → Cmd+I → "Convert to arrow function with types"
function greetUser(name) {
  return "Hello, " + name + "!";
}

// Bài tập 3: Select → Cmd+I → "Add JSDoc documentation"
function calculateDiscount(price, percentage, maxDiscount) {
  const discount = price * percentage / 100;
  return Math.min(discount, maxDiscount);
}

// Bài tập 4: Tạo git commit → dùng ✨ để generate commit message
// Bài tập 5: Tạo lỗi cố ý → dùng "Fix with Copilot" để sửa

8. Tổng kết

Inline Chat và Smart Actions là công cụ precision editing — cho phép bạn:

• ✅ Refactor code nhanh chóng
• ✅ Thêm error handling, types, docs chỉ bằng một prompt
• ✅ Fix bugs với context đầy đủ
• ✅ Generate commit messages thông minh
• ✅ Giữ được flow coding mà không chuyển context

Ở phần tiếp theo (Phần 2), chúng ta sẽ đi vào tính năng mạnh mẽ nhất của Copilot — Agent Mode, nơi AI tự động viết code, tạo files, chạy commands và build tính năng hoàn chỉnh.