Setup VS Code và GitHub Copilot | MinAI Learning

Thực hành

2/13•20 phút

Đang tải...

Setup VS Code và GitHub Copilot

Hướng dẫn cài đặt và cấu hình VS Code với GitHub Copilot để bắt đầu Vibe Coding

🎯 Mục tiêu bài học

TB5 min

Sau bài học này, bạn sẽ:

✅ Cài đặt VS Code thành công
✅ Đăng ký và kích hoạt GitHub Copilot
✅ Cài đặt và cấu hình Copilot Extension
✅ Verify Copilot hoạt động với các test cases
✅ Thiết lập môi trường development tối ưu

Task 0

💻 Cài đặt VS Code

TB5 min

Bước 1: Download VS Code

Truy cập code.visualstudio.com và download phiên bản phù hợp với hệ điều hành của bạn.

Bước 2: Cài đặt

Windows: Chạy file .exe và theo hướng dẫn
macOS: Mở file .dmg, kéo VS Code vào Applications
Linux: Sử dụng package manager hoặc .deb/.rpm

Bước 3: Verify installation

Bash

1code --version
2# Output: 1.85.0 (hoặc phiên bản mới hơn)

Checkpoint

Mô tả các bước cài đặt VS Code trên hệ điều hành của bạn.

Task 1

📋 Đăng ký GitHub Copilot

TB5 min

Lựa chọn 1: Dùng thử miễn phí (30 ngày)

Truy cập github.com/features/copilot

Task 2

Tiếp: Copilot Autocomplete - Phép thuật Ghost Text

🔧 Cài đặt GitHub Copilot Extension

TB5 min

Trong VS Code

Mở VS Code
Nhấn Ctrl+Shift+X (Windows/Linux) hoặc Cmd+Shift+X (macOS)
Tìm kiếm "GitHub Copilot"
Click Install cho extension chính thức từ GitHub

Extensions cần cài

Extension	Mô tả
GitHub Copilot	Tự hoàn thành code cốt lõi
GitHub Copilot Chat	Giao diện chat

Đăng nhập

Sau khi install, VS Code sẽ prompt đăng nhập
Click "Sign in to GitHub"
Cấp quyền trong trình duyệt
Quay lại VS Code

Checkpoint

Các extensions nào cần cài đặt? Mô tả quy trình đăng nhập.

Task 3

✅ Verify Copilot hoạt động

TB5 min

Kiểm tra 1: Autocomplete

Tạo file test.py và gõ:

python.py

1# Function to calculate fibonacci
2def fib

Copilot sẽ suggest toàn bộ function. Nhấn Tab để accept.

Kiểm tra 2: Comment-driven

python.py

1# Create a function that takes a list of numbers 
2# and returns the sum of all even numbers

Đợi một chút, Copilot sẽ sinh code!

Kiểm tra 3: Copilot Chat

Nhấn Ctrl+Shift+I để mở Copilot Chat
Gõ: "Explain what this code does"
Paste code bất kỳ

Checkpoint

Thực hiện 3 tests để verify Copilot. Mô tả kết quả mong đợi.

Task 4

⚙️ Cấu hình Copilot Settings

TB5 min

Mở Settings

Ctrl+, (Windows/Linux) hoặc Cmd+, (macOS)
Tìm "Copilot"

Cài đặt khuyến nghị

JSON

1{
2  // Bật inline suggestions
3  "editor.inlineSuggest.enabled": true,
4  
5  // Tự động show suggestions
6  "github.copilot.enable": {
7    "*": true,
8    "plaintext": false,
9    "markdown": true,
10    "yaml": true
11  },
12  
13  // Hiển thị panel
14  "github.copilot.editor.enableAutoCompletions": true,
15  
16  // Chat settings
17  "github.copilot.chat.localeOverride": "vi"
18}

Phím tắt

Phím tắt	Hành động
`Tab`	Chấp nhận gợi ý
`Esc`	Bỏ qua gợi ý
`Alt+]`	Gợi ý tiếp theo
`Alt+[`	Gợi ý trước đó
`Ctrl+Enter`	Mở bảng Copilot
`Ctrl+Shift+I`	Mở Copilot Chat

Checkpoint

Cấu hình recommended settings nào? Liệt kê các keyboard shortcuts quan trọng.

Task 5

🔧 Troubleshooting

TB5 min

Copilot không gợi ý

Kiểm tra trạng thái đăng ký tại GitHub Settings
Đảm bảo đã sign in VS Code
Restart VS Code
Kiểm tra network/firewall

Gợi ý chậm

Kiểm tra kết nối internet
Thử ngắt kết nối VPN
Có thể server đang bận

Lỗi "Copilot could not connect"

Bash

1# Windows
2ipconfig /flushdns
3 
4# macOS/Linux
5sudo killall -HUP mDNSResponder

Checkpoint

Xử lý các vấn đề thường gặp khi setup Copilot.

Task 7

📝 Exercise: First Vibe Coding

TB5 min

Hãy thử tạo một chương trình đơn giản hoàn toàn bằng Vibe Coding:

Yêu cầu

Tạo file calculator.py với các tính năng:

Cộng, trừ, nhân, chia
Menu để user chọn operation
Loop cho đến khi user quit

Cách làm

Tạo file mới calculator.py
Viết comment mô tả yêu cầu
Để Copilot sinh code
Review và adjust nếu cần

Gợi Ý

python.py

1# Simple calculator program
2# Features:
3# - Add, subtract, multiply, divide two numbers
4# - Show menu for user to select operation
5# - Continue until user chooses to quit
6# - Handle division by zero error

Đợi Copilot sinh code và so sánh với solution bên dưới!

💡 Click để xem solution

python.py

1def add(a, b):
2    return a + b
3
4def subtract(a, b):
5    return a - b
6
7def multiply(a, b):
8    return a * b
9
10def divide(a, b):
11    if b == 0:
12        return "Error: Division by zero"
13    return a / b
14
15def calculator():
16    while True:
17        print("\n--- Simple Calculator ---")
18        print("1. Add")
19        print("2. Subtract")
20        print("3. Multiply")
21        print("4. Divide")
22        print("5. Quit")
23        
24        choice = input("Choose operation (1-5): ")
25        
26        if choice == '5':
27            print("Goodbye!")
28            break
29        
30        if choice in ['1', '2', '3', '4']:
31            num1 = float(input("Enter first number: "))
32            num2 = float(input("Enter second number: "))
33            
34            if choice == '1':
35                print(f"Result: {add(num1, num2)}")
36            elif choice == '2':
37                print(f"Result: {subtract(num1, num2)}")
38            elif choice == '3':
39                print(f"Result: {multiply(num1, num2)}")
40            elif choice == '4':
41                print(f"Result: {divide(num1, num2)}")
42        else:
43            print("Invalid choice!")
44
45if __name__ == "__main__":
46    calculator()

Checkpoint

Tổng kết nội dung phần Exercise: First Vibe Coding.

Task 8

🎯 Mục tiêu bài học

💻 Cài đặt VS Code

Bước 1: Download VS Code

Bước 2: Cài đặt

Bước 3: Verify installation

Checkpoint

📋 Đăng ký GitHub Copilot

Lựa chọn 1: Dùng thử miễn phí (30 ngày)

Lựa chọn 2: Sinh viên/Giảng viên (MIỄN PHÍ)

Lựa chọn 3: Đăng ký trả phí

Checkpoint

🔧 Cài đặt GitHub Copilot Extension

Trong VS Code

Extensions cần cài

Đăng nhập

Checkpoint

✅ Verify Copilot hoạt động

Kiểm tra 1: Autocomplete

Kiểm tra 2: Comment-driven

Kiểm tra 3: Copilot Chat

Checkpoint

⚙️ Cấu hình Copilot Settings

Mở Settings

Cài đặt khuyến nghị

Phím tắt

Checkpoint

📚 VS Code Extensions hữu ích khác

Cho Python

Cho JavaScript/TypeScript

Chung

Checkpoint

🔧 Troubleshooting

Copilot không gợi ý

Gợi ý chậm

Lỗi "Copilot could not connect"

Checkpoint

📝 Exercise: First Vibe Coding

Yêu cầu

Cách làm

Gợi Ý

Checkpoint

🚀 Bài tiếp theo