Copilot Trong VS Code: Tips Tăng Tốc Viết TypeScript

GitHub Copilot không chỉ là autocomplete thông minh. Với vài tricks đúng, nó có thể tăng tốc TypeScript workflow của bạn lên gấp 2-3 lần. Đây là những tips mình dùng hàng ngày.

1. Type-First Development

Viết type/interface trước, Copilot sẽ generate implementation chính xác hơn nhiều:

// Bước 1: Define type trước
interface ApiResponse<T> {
  data: T;
  error: string | null;
  status: number;
  pagination?: {
    page: number;
    totalPages: number;
    total: number;
  };
}

interface UserService {
  getUser(id: string): Promise<ApiResponse<User>>;
  updateUser(id: string, data: Partial<User>): Promise<ApiResponse<User>>;
  deleteUser(id: string): Promise<ApiResponse<null>>;
}

// Bước 2: Copilot tự generate implementation chuẩn type
// Chỉ cần gõ class UserServiceImpl implements UserService {
// rồi Tab, Tab, Tab...
class UserServiceImpl implements UserService {
  async getUser(id: string): Promise<ApiResponse<User>> {
    const res = await fetch('/api/users/' + id);
    const data = await res.json();
    return { data, error: null, status: res.status };
  }
  // Copilot tự complete các methods còn lại
}

2. Comment-Driven Generation

Comment bằng tiếng Việt cũng hoạt động tốt. Copilot hiểu intent từ comment. Viết comment mô tả function, rồi để Copilot generate toàn bộ logic.

3. Copilot Chat Shortcuts

Trong VS Code, dùng các commands này với Copilot Chat:

@workspace — hỏi về toàn bộ project: "@workspace how is authentication implemented?"

/explain — select code block, gõ /explain để hiểu code phức tạp

/fix — select code có lỗi, /fix để Copilot suggest sửa

/tests — select function, /tests để generate unit test

4. Keyboard Shortcuts Quan Trọng

Tab — accept suggestion. Esc — dismiss. Alt+] — next suggestion. Alt+[ — previous suggestion. Ctrl+Enter — xem tất cả suggestions trong panel riêng.

5. Settings Tối Ưu

Thêm vào VS Code settings.json:

{
  "github.copilot.enable": {
    "*": true,
    "markdown": true,
    "plaintext": false
  },
  "editor.inlineSuggest.enabled": true,
  "editor.inlineSuggest.showToolbar": "onHover"
}

6. Tận Dụng copilot-instructions.md

Tạo file .github/copilot-instructions.md ở root project để Copilot hiểu conventions của team bạn.

7. Pro Tips

Mở related files: Copilot suggest tốt hơn khi các files liên quan đang mở trong editor. Khi viết component, mở type file và API service cùng lúc.

Inline Chat (Ctrl+I): Select code, Ctrl+I, mô tả thay đổi. Nhanh hơn xoá và viết lại.

Commit message: Trong Source Control, click icon Copilot để generate commit message từ staged changes.

Copilot là tool bạn dùng mỗi ngày — đầu tư thời gian học cách dùng hiệu quả sẽ tiết kiệm hàng trăm giờ về sau.