Vibe Coding with GitHub Copilot: From Basics to Advanced

Part 1: Vibe Coding Platform & GitHub Copilot

xdev.asia

1. Inline Chat — Edit code on the spot

Inline Chat allows you to open a small prompt right in the editor, describe the change you want, and Copilot will edit the code in place without switching to Chat view.

Open Inline Chat

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

Basic workflow:

1. Select (select) the code you want to edit (or place the cursor at the location where you want to add the code)
2. Press Cmd+I
3. Type a change description in English/Vietnamese
4. Review diff displays inline
5. Press Accept or Discard

2. Common use cases of Inline Chat

2.1. Add 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. Add 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. Write unit tests

// 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 integrated into workflow

Smart Actions are AI actions is built in Enter the VS Code interface, appearing right where you need it without having to open chat.

3.1. Generate Commit Messages

1. Open Source Control view (Ctrl+Shift+G)
2. Stage the changes
3. Click sparkle icon ✨ next to the commit message input
4. Copilot analyzes changes and generates commit messages according to 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)

When VS Code displays an error (squiggly red line):

1. Hover on error → click "Quick Fix"
2. Select "Fix with Copilot"
3. Copilot reads error messages, analyzes context, and suggests fixes

3.3. Explain with Copilot

Select complex code → Right-click → "Copilot" → "Explain This"

Copilot explains code in natural language, which is useful when reading other people's code or AI-generated code.

3.4. Generate Tests

Right-click on function → "Copilot" → "Generate Tests"

Copilot automatically creates test files with test cases that match the project's framework (Jest, Pytest, Go testing...).

3.5. Fix Test Failure

When a test fails in Test Explorer:

1. Click on failed test
2. Select "Fix with Copilot"
3. Copilot reads the test failure message, finds the root cause, and suggests a fix for the code (not a test fix)

4. Semantic Search in VS Code

Copilot provided semantic search — search by meaning, not just 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. When to use Inline Chat vs Agent vs Chat?

Features	When to use	Scope
Inline Suggestions	Code flow is uninterrupted	Current line/block
Inline Chat	Edit specifically, refactor, add docs	Selected code or cursor position
Chat View (Ask)	Q&A, explain, brainstorm	Do not change the code
Agent Mode	Build features, multi-file changes	Entire project

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

6. Tips for effective Inline Chat

• Select correctly: choose the correct piece of code to edit, neither redundant nor missing
• Clear description: "Add input validation for email and phone" is better than "validate this"
• One change at a time: break down a large change into many small Inline Chats
• Use code terminology: "Extract to a helper function" instead of "make this separate"
• Review before Accepting: read the diff carefully, especially the change logic

7. Practice exercises

Create files 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. Summary

Inline Chat and Smart Actions are tools precision editing — allows you to:

• ✅ Refactor code quickly
• ✅ Add error handling, types, docs with just one prompt
• ✅ Fix bugs with full context
• ✅ Generate commit messages intelligently
• ✅ Maintain coding flow without switching context

In the next section (Part 2), we'll get into Copilot's most powerful feature — Agent Mode, where AI automatically writes code, creates files, runs commands and builds complete features.