Lompat ke isi

Pasang VibeCode di VS Code

Ekstensi VibeCode menjalankan aplikasi yang sama di dalam VS Code: panel obrolan di samping editor, dengan agent yang bekerja di folder yang kamu buka. Ekstensinya kamu pasang dari file .vsix.

Menu VS Code dan perintah ekstensi ditulis seperti di VS Code berbahasa Inggris, bahasa bawaannya. Panel VibeCode sendiri berbahasa Indonesia, sama seperti aplikasi desktop.

1Yang kamu butuhkan

  • VS Code 1.90 atau lebih baru, versi desktop. VS Code di browser (vscode.dev, github.dev) tidak bisa menjalankannya.
  • Akun VibeCode. Ekstensi tetap minta kamu masuk, termasuk kalau nanti kamu pakai kunci OpenRouter atau endpoint sendiri.
  • Folder proyek yang dibuka di VS Code: sesi VibeCode jalan di folder itu.

Kamu tidak perlu memasang Node.js atau program lain, karena proses latar VibeCode jalan pakai VS Code sendiri. Pakai VS Code yang terpasang di komputermu, bukan lewat remote (SSH, WSL, Codespaces, Dev Containers).

2Unduh file .vsix

File ekstensinya bernama vibecode-vscode-VERSI.vsix. Nomor versinya sama dengan aplikasi desktop di rilis yang sama.

Cari .vsix di rilis terbaru

3Pasang di VS Code

  1. Buka panel Extensions: Cmd+Shift+X di macOS, Ctrl+Shift+X di Windows.
  2. Klik tombol tiga titik di bagian atas panel, lalu pilih Install from VSIX... di menu yang muncul.
  3. Pilih file .vsix yang tadi kamu unduh. Kalau VS Code menampilkan Reload Now atau Restart Extensions, tekan tombol itu.

Atau lewat terminal, di folder tempat file itu berada (ganti VERSI dengan nomor di nama file-nya):

code --install-extension vibecode-vscode-VERSI.vsix

Kalau perintah code tidak dikenal di macOS, jalankan dulu Shell Command: Install 'code' command in PATH dari Command Palette.

4Buka VibeCode dan masuk

Klik ikon VibeCode (kepala Hermes bersayap) di Activity Bar, atau tombol medali VibeCode di title bar editor. Bisa juga lewat Command Palette (Cmd+Shift+P atau Ctrl+Shift+P): jalankan VibeCode: Open, atau VibeCode: Buka kalau VS Code-mu berbahasa Indonesia.

Saat pertama dibuka, tulisan CONNECTING muncul sebentar selagi proses latar VibeCode dinyalakan.

Lalu masuk di layar Masuk ke VibeCode dengan email dan kata sandi (akun baru lewat Belum punya akun? Daftar). Atau tekan Masuk dengan Google kalau tombolnya ada. Proses masuk lewat Google selesai di browser. Walau sudah masuk di aplikasi desktop, kamu tetap perlu masuk lagi di ekstensi. Kalau kamu pakai kunci OpenRouter, pasang ulang di Pengaturan, tab Custom Endpoint.

5Buka folder proyek, lalu mulai

Sesi VibeCode jalan di folder yang dibuka VS Code. Di workspace dengan beberapa folder, yang dipakai folder pertamanya. Tanpa folder, panel menampilkan Buka folder untuk mulai dengan tombol Buka Folder.

Kalau VS Code bertanya Do you trust the authors of the files in this folder?, pilih Yes, I trust the authors. Di Restricted Mode, VS Code mematikan ekstensi ini.

  • Tulis permintaanmu di kolom ketik, lalu tekan Enter. File yang lagi aktif (path dan baris kursornya, bukan isinya) dan teks yang kamu blok ikut terkirim. Kalau nggak mau, matikan toggle Berkas aktif dan blok di kartu Kabar ke AI, Pengaturan.
  • Cmd+Esc (macOS) atau Ctrl+Esc memindahkan fokus ke kolom ketik. Kalau tidak berhasil (di Windows, Ctrl+Esc bisa membuka menu Start), jalankan VibeCode: Focus input.
  • Pengaturan, Kemampuan, Pratinjau, dan Workflow dibuka dari tombol / di kolom ketik. Riwayat sesi hanya berisi sesi dari folder ini.

6Bawa riwayat dari aplikasi desktop

Kalau aplikasi desktop VibeCode terpasang di komputer yang sama, VS Code menawarkan impor sesi sekali di awal: Import your sessions from the VibeCode desktop app? Tekan Import. Setelah itu, kapan saja, jalankan VibeCode: Import sessions from the desktop app.

  • Aplikasi desktop tidak diubah, dan sesi yang sudah ada tidak digandakan.
  • Sesi hasil impor muncul di Riwayat sesi saat folder proyeknya dibuka.
  • Skill, memori, dan pengaturan sudah dipakai bareng sejak awal, jadi tidak perlu diimpor.

Perbarui ekstensinya

Cek halaman rilis terbaru di GitHub sesekali. Kalau ada versi yang lebih baru, unduh .vsix dari rilis itu, lalu pasang dengan cara yang sama seperti langkah 3.

Kalau agent di versi lama masih bekerja, VS Code bertanya dulu: Restart Now menghentikan pekerjaan itu lalu menyalakan versi baru. Jendela lain yang masih memuat versi lama menawarkan Reload Window.

Kalau ada masalah

  • Ikon VibeCode tidak muncul: cek apakah jendelanya lagi dalam Restricted Mode.
  • Panel macet di CONNECTING atau menampilkan pesan bahwa host VibeCode tidak bisa dijangkau: coba lagi dari panel itu, atau jalankan VibeCode: Restart background host. Agent, terminal, dan proses latar di semua jendela VS Code ikut berhenti.
  • VibeCode: Show log membuka log proses latar VibeCode.
  • Pratinjau, screenshot halaman, dan PDF butuh browser berbasis Chromium (Chrome, Edge, Chromium, atau Brave). Kalau tidak ada, VS Code menawarkan untuk mengunduh Chrome for Testing, sekitar 150 MB.
  • Kabar perintah terminal ke AI butuh VS Code 1.93 atau lebih baru dengan shell integration aktif.
  • Proses latar VibeCode tetap hidup setelah jendela ditutup, supaya pekerjaan agent tidak terputus. Prosesnya berhenti sendiri sekitar 10 menit setelah tidak ada lagi jendela maupun pekerjaan.

Uninstall ekstensinya

Di panel Extensions, pilih VibeCode, lalu Uninstall.

Riwayat sesi, data login akun, dan kunci yang kamu pasang di ekstensi tetap tersimpan di ~/.vibecode/vscode (di Windows %USERPROFILE%\.vibecode\vscode). Hapus folder itu kalau mau bersih. Jangan hapus seluruh folder .vibecode: skill, memori, dan pengaturan di sana dipakai bareng aplikasi desktop.

Pakai aplikasi desktop? Cara pakai menjelaskan langkahnya, dari memasang sampai agent mengedit proyekmu untuk pertama kali.