Thực hành
20 phút
Bài 2/12

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

Setup VS Code và GitHub Copilot

1. Cài đặt VS Code

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à follow wizard
  • 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)

2. Đăng ký GitHub Copilot

Option 1: Free Trial (30 ngày)

  1. Truy cập github.com/features/copilot
  2. Click "Start my free trial"
  3. Đăng nhập GitHub account
  4. Nhập thông tin thanh toán (sẽ không bị charge trong 30 ngày)

Option 2: Student/Teacher (FREE)

Nếu bạn là student hoặc teacher:

  1. Truy cập education.github.com
  2. Apply cho GitHub Student Developer Pack
  3. Verify với email .edu hoặc giấy tờ
  4. Nhận GitHub Copilot miễn phí!

Option 3: Subscription

  • Individual: 10/thaˊnghoc10/tháng hoặc 100/năm
  • Business: $19/user/tháng
  • Enterprise: Custom pricing

3. Cài đặt GitHub Copilot Extension

Trong VS Code

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

Extensions cần cài

ExtensionMô tả
GitHub CopilotCore autocomplete
GitHub Copilot ChatChat interface

Đăng nhập

  1. Sau khi install, VS Code sẽ prompt đăng nhập
  2. Click "Sign in to GitHub"
  3. Authorize trong browser
  4. Quay lại VS Code

4. Verify Copilot hoạt động

Test 1: Autocomplete

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

Python
1# Function to calculate fibonacci
2def fib

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

Test 2: Comment-driven

Python
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!

Test 3: Copilot Chat

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

5. Cấu hình Copilot Settings

Mở Settings

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

Recommended Settings

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}

Keyboard Shortcuts

ShortcutAction
TabAccept suggestion
EscDismiss suggestion
Alt+]Next suggestion
Alt+[Previous suggestion
Ctrl+EnterOpen Copilot panel
Ctrl+Shift+IOpen Copilot Chat

6. VS Code Extensions hữu ích khác

Kết hợp với Copilot, các extensions sau sẽ boost productivity:

Cho Python

  • Python - Microsoft's Python extension
  • Pylance - Fast IntelliSense
  • Black Formatter - Code formatting

Cho JavaScript/TypeScript

  • ESLint - Linting
  • Prettier - Formatting
  • Auto Import - Tự động import

General

  • GitLens - Git superpowers
  • Error Lens - Inline error display
  • Material Icon Theme - Beautiful icons

7. Troubleshooting

Copilot không suggest

  1. Check subscription status tại GitHub Settings
  2. Đảm bảo đã sign in VS Code
  3. Restart VS Code
  4. Check network/firewall

Suggestions chậm

  1. Check internet connection
  2. Thử disconnect VPN
  3. Có thể server đang busy

Error "Copilot could not connect"

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

8. Exercise: First Vibe Coding

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

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

Hint

Python
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
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()

Tiếp theo

Ở bài tiếp theo, chúng ta sẽ học cách sử dụng Copilot Autocomplete hiệu quả - các tips và tricks để maximize productivity!