Back to blog
Tools

Cara Integrasi AI di VS Code: Panduan Praktik GitHub Copilot & Codeium

Berhenti bolak-balik antara VS Code dan tab ChatGPT di browser. Bawa asisten AI langsung ke dalam text editor-mu untuk menulis kode secara otomatis.

super admin·19 Juni 2026·2 min read
Cara Integrasi AI di VS Code: Panduan Praktik GitHub Copilot & Codeium
Article Content

Mengapa Harus Bolak-Balik ke Browser?

Banyak developer pemula masih menggunakan AI dengan cara yang kurang efisien: Menulis kode di VS Code → menemukan *error* → membuka Chrome → menempelkan *error* di ChatGPT → menyalin jawabannya → kembali ke VS Code.

Proses ini membuang waktu (Context Switching). Di industri modern, AI sudah menyatu (terintegrasi) ke dalam *Text Editor* sebagai asisten Pair Programming. Berikut adalah panduan praktik meng-install dua AI terbaik di VS Code.

Pilihan 1: GitHub Copilot (Standar Industri / Berbayar)

Ini adalah penguasa mutlak di perusahaan korporat. Jika kamu berlangganan (atau mendapat akses gratis sebagai Mahasiswa via GitHub Student Developer Pack), ikuti langkah ini:

  1. Buka VS Code, pergi ke menu Extensions (Ctrl+Shift+X).
  2. Cari "GitHub Copilot" dan klik Install.
  3. Setelah selesai, akan muncul notifikasi di pojok kanan bawah yang memintamu Sign In to GitHub. Klik dan izinkan akses di browsermu.
  4. Cara Praktik: Buka file JavaScript kosong. Ketik komentar ini: // Buat fungsi hitung total harga array keranjang lalu tekan Enter. Copilot akan otomatis memunculkan kode bayangan (abu-abu). Jika kamu setuju, cukup tekan tombol TAB di keyboardmu untuk menerimanya!

Pilihan 2: Codeium atau Blackbox AI (Alternatif Gratis Terbaik)

Jika kamu tidak ingin membayar, Codeium adalah ekstensi AI gratis yang kualitasnya nyaris setara dengan Copilot.

  1. Buka Extensions di VS Code, cari "Codeium" dan Install.
  2. Klik ikon profil Codeium di pojok kanan bawah untuk membuat akun gratis di web mereka, lalu kembali ke VS Code untuk otorisasi.
  3. Codeium langsung aktif. Fitur andalannya adalah Autocomplete yang sangat cepat.

Jurus Rahasia: Fitur Inline Chat (Ctrl + I)

Selain menebak kodemu (Autocomplete), kekuatan asli integrasi AI di VS Code adalah Inline Chat. Kamu bisa menyuruh AI mengubah kode tanpa menyentuh mouse.

  • Blok (Highlight) sebuah fungsi yang ingin kamu perbaiki.
  • Tekan Ctrl + I (atau Cmd + I di Mac).
  • Akan muncul kotak pencarian kecil melayang di atas kodemu. Ketikkan perintah (*Prompt*): "Tolong ubah fungsi for-loop ini menjadi menggunakan array method .map() dan tambahkan try-catch".
  • Tekan Enter. AI akan langsung mengubah kodenya di depan matamu. Klik Accept (Terima) jika kamu suka perubahannya. Sangat praktis!

Mau langsung pakai template?

Jelajahi template gratis dan premium di TampilKit untuk mempercepat proses development project kamu.

Browse Templates