Bí kíp dùng Copilot từ anh Senior Manager “xịn”: Xây VS Code Extension FV Technical Policies

Tuần trước, mình đi ăn trưa với anh T – một manager kỳ cựu ở công ty – và được nghe anh kể về hành trình dùng GitHub Copilot để phát triển một VS Code Extension có tên FV Technical Policies. Extension này giúp tải và hiển thị các technical policy từ GitLab, nghe thì “ngầu” nhưng anh bảo làm không dễ đâu! GitHub Copilot đúng là “trợ lý AI” siêu xịn, nhưng nếu yêu cầu lung tung là code lỗi tùm lum ngay. Sau vài lần “toang”, anh T rút ra bí kíp: làm từng bước, mô tả rõ ràng, và để Copilot sửa lỗi thần tốc. Trong bài blog này, mình sẽ thuật lại câu chuyện của anh AT từ lúc khởi đầu đến khi hoàn thiện extension, kèm mẹo hay để bạn thử sức với Copilot mà không “khóc” khi code!

GitHub Copilot Là Gì?

Theo anh T, GitHub Copilot là trợ lý AI của GitHub, giúp dev viết code, sửa lỗi, và đề xuất giải pháp chỉ bằng vài dòng yêu cầu. Nó cực mạnh với các ngôn ngữ như JavaScript, TypeScript, hay HTML, và đặc biệt hữu ích khi làm dự án như VS Code Extension. Nhưng anh T cảnh báo: Copilot không phải “thần thánh” – muốn nó “nghe lời”, bạn phải mô tả yêu cầu rõ ràng và kiểm tra code cẩn thận. Qua câu chuyện của anh, mình sẽ kể cách anh dùng Copilot để xây FV Technical Policies, một extension kết nối GitLab, hiển thị technical policy, và tích hợp với GitHub Copilot để kiểm tra tuân thủ code.

Case Study: Anh T phát triển VS Code Extension với GitHub Copilot

Bước 1: Khởi đầu với yêu cầu đơn giản

Anh T kể, mục tiêu của extension là kết nối với GitLab (https://gitlab.devsep.com/SETEC/technical-policies), tải list policy, và hiển thị trong VS Code. Anh bắt đầu bằng một yêu cầu siêu cơ bản gửi cho GitHub Copilot: “Tạo cấu trúc cho VS Code Extension với sidebar hiển thị list policy từ GitLab.”

Copilot ngay lập tức sinh ra code TypeScript, gồm:

• File extension.ts để kích hoạt extension và đăng ký sidebar.
• Một Webview đơn giản cho sidebar, dùng HTML và JavaScript để hiển thị list policy.

Anh T kiểm tra thì sidebar hiện lên ngon lành, nhưng chưa có list policy. Anh bảo lúc đầu anh thử yêu cầu cả tá thứ cùng lúc – vừa tạo sidebar, vừa lấy dữ liệu GitLab – nhưng Copilot “lẫn”, code thiếu đầu thiếu đuôi. Sau vài lần, anh rút ra: chỉ nên gửi 1-2 yêu cầu cụ thể mỗi lần.

Mẹo từ anh A: Chia nhỏ yêu cầu, ví dụ: làm sidebar trước, rồi mới thêm kết nối GitLab. Đừng “tham” yêu cầu cả thế giới ngay từ đầu!

Bước 2: Kết nối GitLab API

Tiếp theo, anh T yêu cầu Copilot: “Viết code để gọi GitLab API bằng Personal Access Token và lấy list policy từ https://gitlab.devsep.com/SETEC/technical-policies.” Copilot sinh ra đoạn code dùng axios:

async function findPolicyFiles(baseUrl: string, token: string, projectId: number, projectName: string) {
  try {
    const searchResponse = await axios.get(
      `${baseUrl}api/v4/projects/${projectId}/repository/tree?recursive=true&per_page=100`,
      {
        headers: {
          'Private-Token': token
        }
      }
    );
    
    if (searchResponse.status === 200) {
      const files = searchResponse.data;
      
      const markdownFiles = files.filter((file: any) => 
        file.type === 'blob' && 
        (file.path.endsWith('.md') || file.path.endsWith('.markdown'))
      );
      
      for (const file of markdownFiles) {
        const fileResponse = await axios.get(
          `${baseUrl}api/v4/projects/${projectId}/repository/files/${encodeURIComponent(file.path)}/raw`,
          {
            headers: {
              'Private-Token': token
            }
          }
        );
        
        if (fileResponse.status === 200) {
          const content = fileResponse.data;
          const fileName = file.path.split('/').pop()?.replace(/\.md$|\.markdown$/i, '') || file.path;
          
          const policy: Policy = {
            id: `${projectId}-${file.path}`,
            name: fileName,
            content: content,
            repository: projectName,
            path: file.path
          };
          
          // We still add all policies to the cache - they'll be filtered when displayed
          policyCache.set(policy.id, policy);
        }
      }
    }
  } catch (error) {
    console.error(`Error searching project ${projectId}:`, error);
  }
}

Nhưng khi chạy, anh T gặp lỗi: “401 Unauthorized”. Console báo token không hợp lệ. Anh copy thông báo lỗi, gửi cho Copilot với yêu cầu: “Code báo lỗi 401 Unauthorized khi gọi GitLab API, đây là code [dán code], sửa giùm!” Copilot gợi ý kiểm tra token có quyền read_api và đảm bảo URL có dấu / ở cuối. Anh T kiểm tra settings, thêm dấu / vào URL (https://gitlab.devsep.com/SETEC/technical-policies/), tạo token mới với đúng scope, chạy lại – mượt!

Mẹo từ anh T: Khi code lỗi, cứ copy thông báo lỗi, mô tả ngắn gọn, Copilot sẽ phân tích và đưa cách sửa chuẩn.

Bước 3: Hiển Thị Technical Policy và Tích Hợp Copilot

Sau khi lấy được list policy, anh T yêu cầu: “Tạo Webview để hiển thị nội dung technical policy khi click vào.” Copilot sinh ra code HTML và JavaScript để render nội dung trong Webview. Giao diện chạy tốt, nhưng khi anh thêm tính năng “Make Available for Copilot” (gửi nội dung technical policy cho GitHub Copilot để kiểm tra tuân thủ code), anh gặp lỗi: nội dung gửi đi không đúng định dạng.

Anh T bảo anh không rành API của GitHub Copilot, nên lại nhờ Copilot: “Tao muốn gửi nội dung technical policy từ Webview tới GitHub Copilot, nhưng nó không nhận, đây là lỗi [dán lỗi], sửa giùm!” Copilot gợi ý sửa hàm gửi dữ liệu, định dạng nội dung thành JSON hợp lệ, và dùng VS Code API để giao tiếp với Copilot. Áp dụng xong, tính năng chạy ngon lành – nội dung technical policy được gửi đi và Copilot dùng để kiểm tra code.

Mẹo từ anh T: Lỗi phức tạp thì cứ dán thông báo lỗi cho Copilot, không cần hiểu sâu, AI sẽ lo!

Bước 4: Hoàn Thiện Extension

Anh T tiếp tục thêm các tính năng:

• Tự động refresh list policy: Yêu cầu Copilot thêm setInterval để gọi API mỗi 3600 giây (theo cấu hình fvTechnicalPolicies.refreshInterval).
• Lưu token an toàn: Copilot gợi ý dùng VS Code Secret Storage API để mã hóa token.
• Test Connection command: Tạo lệnh trong Command Palette để kiểm tra kết nối GitLab.

Mỗi tính năng được anh T làm từng bước: gửi yêu cầu, kiểm tra code, sửa lỗi với Copilot. Cuối cùng, extension hoàn thiện với đầy đủ chức năng: kết nối GitLab, hiển thị technical policy, tích hợp Copilot, và bảo mật token. Anh A bảo chỉ mất 2 ngày, nhanh hơn 50% so với code thủ công!

Ưu Điểm và Hạn Chế Của GitHub Copilot

Anh A chia sẻ, GitHub Copilot có cả “đỉnh” lẫn “hạn chế”:

Ưu Điểm

• Nhanh như chớp: Giúp anh hoàn thành extension trong 2 ngày.
• Sửa lỗi thần tốc: Copy lỗi, Copilot đưa giải pháp trong vài giây.
• Đa năng: Từ HTML, JavaScript đến API, Copilot đều cân được.

Hạn Chế

• Yêu cầu phức tạp dễ “toang”: Gửi nhiều yêu cầu cùng lúc, code thường thiếu hoặc lỗi.
• Cần kiểm tra code: Code sinh ra đôi khi phải chỉnh (như thêm / vào URL hay sửa JSON).
• Phụ thuộc mô tả: Yêu cầu càng rõ, Copilot càng “hiểu”.

Mẹo từ anh T: Làm từng bước, kiểm tra code kỹ, và tận dụng Copilot để debug. Có kinh nghiệm lập trình cơ bản thì kết hợp với Copilot là “bá cháy”!

Kết Luận

Nghe anh T kể, mình thấy GitHub Copilot đúng là “trợ lý đắc lực” nếu biết cách dùng. Bí kíp anh T chia sẻ là:

• Chia nhỏ yêu cầu: Chỉ gửi 1-2 tính năng mỗi lần.
• Mô tả rõ ràng: Nói cụ thể, như “tạo sidebar” thay vì “làm cả extension”.
• Nhờ Copilot sửa lỗi: Dán lỗi hoặc mô tả đơn giản, AI sẽ xử lý.