Vibe Coding with GitHub Copilot: From Basics to Advanced

Part 1: Vibe Coding Platform & GitHub Copilot

xdev.asia

1. What are Inline Suggestions?

Inline Suggestions (Ghost Text) is a core feature of GitHub Copilot — as you type code, Copilot automatically suggests the next section of code in the form of ghost text displayed right in the editor.

Bạn gõ:    function calculateTax(income) {
Ghost text: ░░ const taxRate = income > 50000 ? 0.3 : 0.2;
            ░░ return income * taxRate;
            ░░}

Copilot analysis context around to make suitable suggestions:

• File name, programming language
• Comments above the current line
• Code written in file
• Other files are open in the editor
• Import statements, function signatures

2. Working with Inline Suggestions

2.1. Accept & Reject

Operation	Shortcuts macOS	Shortcuts Windows/Linux
Accept all suggestions	Tab	Tab
Reject suggestions	Esc	Esc
Accept each word	Cmd+→	Ctrl+→
Accept each line	Cmd+Shift+→	Ctrl+Shift+→

2.2. Cycle through many Suggestions

Copilot often has many different suggestions. Hover over ghost text to see navigation controls:

Operation	Shortcuts macOS	Shortcuts Windows/Linux
Suggestion next	Option+]	Alt+]
Suggestion first	Option+[	Alt+[

2.3. Partial Accept — Important technique

Partial acceptance allows you to take only part of the suggestion, then continue typing to have Copilot re-suggest in the direction you want:

// Ghost text suggest: const result = data.filter(item => item.active).map(item => item.name);
// Bạn accept "const result = data.filter(" bằng Cmd+→ vài lần
// Rồi gõ tiếp: item => item.price > 100
// Copilot sẽ suggest phần còn lại phù hợp với logic mới

This is technical steering. steering — guide the AI to your liking instead of blind acceptance.

3. Next Edit Suggestions (NES)

NES is more advanced — Copilot predict where you need to edit next based on the change you just made.

For example: Rename variable

// Bạn vừa đổi tên biến ở dòng 5: userName → displayName
// NES tự động highlight và suggest đổi tên ở dòng 12, 18, 25
// Dòng 5:  const displayName = user.name;     ← bạn vừa edit
// Dòng 12: console.log(displayName);          ← NES suggest edit này
//                       ^^^^^^^^^^^
// Nhấn Tab để accept, Copilot tự nhảy đến dòng tiếp theo cần edit

Example: Add parameter

# Bạn vừa thêm parameter 'currency' vào function definition
def format_price(amount, currency):   # ← vừa thêm currency
    # NES suggest cập nhật body function để sử dụng currency
    return f"{currency} {amount:,.2f}"
NES cũng suggest cập nhật tất cả function calls
format_price(100, "USD")  # ← NES suggest thêm argument

Turn on NES

{
  "editor.inlineSuggest.edits.enabled": true
}

4. Multi-line Completions

Copilot can suggest entire functions, classes, or blocks of code:

// Bạn gõ comment mô tả:
// Function to validate email address using regex

// Copilot suggest toàn bộ function:
function validateEmail(email: string): boolean {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email);
}

Tips for better multi-line suggestions:

• Write clearly descriptive comments before pressing Enter
• Name the function/variable meaningfully — Copilot reads names to understand intent
• Open the related file — Copilot uses context from open tabs
• Write tests first — Copilot reads the test to understand expected behavior

5. Comment-Driven Development

An effective pattern for Vibe Coding with Inline Suggestions:

# 1. Viết comment mô tả intent
# Read CSV file, group by category, calculate average price per category,
# sort by average price descending, and return top 5

# 2. Nhấn Enter → Copilot sinh toàn bộ implementation
import pandas as pd

def get_top_categories(csv_path: str, top_n: int = 5) -> pd.DataFrame:
    df = pd.read_csv(csv_path)
    result = (df.groupby('category')['price']
              .mean()
              .sort_values(ascending=False)
              .head(top_n)
              .reset_index()
              .rename(columns={'price': 'avg_price'}))
    return result

6. Optimize context for better suggestions

6.1. Open files are affected by suggestions

Copilot looks at the word context open tabs. Open related files so Copilot understands the codebase:

Tab 1: models/User.ts          ← Copilot biết User schema
Tab 2: services/UserService.ts ← Đang viết, suggest dựa trên User model
Tab 3: tests/user.test.ts      ← Copilot hiểu expected behavior

6.2. Import statements are good context

# Viết imports trước → Copilot biết bạn dùng thư viện nào
from fastapi import FastAPI, HTTPException, Depends
from sqlalchemy.orm import Session
from pydantic import BaseModel
Bây giờ Copilot sẽ suggest code theo FastAPI patterns

6.3. Type annotations give more precise suggestions

// Với type → suggestion chính xác
interface Product {
  id: string;
  name: string;
  price: number;
  category: string;
}
function filterProducts(products: Product[], minPrice: number): Product[] {
// Copilot biết chính xác structure và suggest phù hợp
}

7. When are Inline Suggestions not effective?

• Complex, domain-specific logic — use Chat/Agent instead
• No context — new file is empty, no imports/comments
• The code was written in the wrong pattern — Copilot will continue the wrong pattern
• Cross-file dependencies — Copilot has a limited context window

Rule of thumb: Inline Suggestions are suitable for single-file, incremental edits. For multi-file features, use Agent Mode (Lesson 5).

8. Practice exercises

Create files practice.ts and practice:

1. Write a comment describing the function → press Enter → accept suggestion
2. Type function signature → let Copilot suggest body
3. Try partial accept (Cmd+→) to steer suggestions
4. Cycle through multiple suggestions (Option+]/[)
5. Rename a variable → observe NES suggested edits elsewhere

// Bài tập 1: Viết comment, nhấn Enter
// Function to convert temperature from Celsius to Fahrenheit

// Bài tập 2: Viết signature, để Copilot suggest body
function sortByDate(items: Array<{date: string, title: string}>)

// Bài tập 3: Viết test function, để Copilot suggest test cases
describe('sortByDate', () => {
  it('should

9. Summary

Features	Description	When to use
Inline Suggestions	Ghost text automatically when typing	Daily code, boilerplate
Partial Accept	Accept each word/line	Steer suggestions as desired
NES	Predict next edit location	Rename, add params, refactor
Multi-line	Suggest entire functions	When there is a clear comment/signature
Comment-driven	Write comment → get code	Complex logic description

The next song will be a cover Inline Chat & Smart Actions — powerful tools for targeted edits and refactoring right in the editor.