Ekstensi VS Code (Beta)

Ekstensi VS Code, tersedia dalam beta, memungkinkan Anda melihat perubahan Claude secara real-time melalui antarmuka grafis native yang terintegrasi langsung ke dalam IDE Anda. Ekstensi VS Code memudahkan akses dan interaksi dengan Claude Code untuk pengguna yang lebih menyukai antarmuka visual daripada terminal.

Fitur

Ekstensi VS Code menyediakan:
  • Pengalaman IDE native: Panel sidebar Claude Code khusus yang diakses melalui ikon Spark
  • Mode rencana dengan pengeditan: Tinjau dan edit rencana Claude sebelum menerimanya
  • Mode auto-accept edits: Otomatis menerapkan perubahan Claude saat dibuat
  • Manajemen file: @-mention file atau lampirkan file dan gambar menggunakan pemilih file sistem
  • Penggunaan server MCP: Gunakan server Model Context Protocol yang dikonfigurasi melalui CLI
  • Riwayat percakapan: Akses mudah ke percakapan sebelumnya
  • Beberapa sesi: Jalankan beberapa sesi Claude Code secara bersamaan
  • Pintasan keyboard: Dukungan untuk sebagian besar pintasan dari CLI
  • Perintah slash: Akses sebagian besar perintah slash CLI langsung di ekstensi

Persyaratan

  • VS Code 1.98.0 atau lebih tinggi

Instalasi

Unduh dan instal ekstensi dari Visual Studio Code Extension Marketplace.

Memperbarui

Untuk memperbarui ekstensi VS Code:
  1. Buka command palette VS Code dengan Cmd+Shift+P (Mac) atau Ctrl+Shift+P (Windows/Linux)
  2. Cari “Claude Code: Update”
  3. Pilih perintah untuk memperbarui ke versi terbaru

Cara Kerja

Setelah terinstal, Anda dapat mulai menggunakan Claude Code melalui antarmuka VS Code:
  1. Klik ikon Spark di sidebar editor Anda untuk membuka panel Claude Code
  2. Prompt Claude Code dengan cara yang sama seperti di terminal
  3. Saksikan Claude menganalisis kode Anda dan menyarankan perubahan
  4. Tinjau dan terima edit langsung di antarmuka
    • Tips: Seret sidebar lebih lebar untuk melihat diff inline, lalu klik untuk memperluas detail lengkap

Belum Diimplementasikan

Fitur-fitur berikut belum tersedia di ekstensi VS Code:
  • Konfigurasi server MCP lengkap: Anda perlu mengkonfigurasi server MCP melalui CLI terlebih dahulu, kemudian ekstensi akan menggunakannya
  • Konfigurasi subagents: Konfigurasi subagents melalui CLI untuk menggunakannya di VS Code
  • Checkpoints: Simpan dan pulihkan status percakapan pada titik tertentu
  • Pintasan lanjutan:
    • Pintasan # untuk menambahkan ke memori
    • Pintasan ! untuk menjalankan perintah bash langsung
  • Tab completion: Penyelesaian jalur file dengan tombol tab
Kami sedang bekerja untuk menambahkan fitur-fitur ini dalam pembaruan mendatang.

Pertimbangan Keamanan

Ketika Claude Code berjalan di VS Code dengan izin auto-edit diaktifkan, ia mungkin dapat memodifikasi file konfigurasi IDE yang dapat dieksekusi secara otomatis oleh IDE Anda. Ini dapat meningkatkan risiko menjalankan Claude Code dalam mode auto-edit dan memungkinkan melewati prompt izin Claude Code untuk eksekusi bash. Saat berjalan di VS Code, pertimbangkan:
  • Mengaktifkan VS Code Restricted Mode untuk workspace yang tidak dipercaya
  • Menggunakan mode persetujuan manual untuk edit
  • Berhati-hati ekstra untuk memastikan Claude hanya digunakan dengan prompt yang dipercaya

Integrasi CLI Legacy

Integrasi VS Code pertama yang kami rilis memungkinkan Claude Code yang berjalan di terminal berinteraksi dengan IDE Anda. Ini menyediakan berbagi konteks seleksi (seleksi/tab saat ini secara otomatis dibagikan dengan Claude Code), tampilan diff di IDE alih-alih terminal, pintasan referensi file (Cmd+Option+K di Mac atau Alt+Ctrl+K di Windows/Linux untuk menyisipkan referensi file seperti @File#L1-99), dan berbagi diagnostik otomatis (lint dan kesalahan sintaks). Integrasi legacy auto-install ketika Anda menjalankan claude dari terminal terintegrasi VS Code. Cukup jalankan claude dari terminal dan semua fitur akan aktif. Untuk terminal eksternal, gunakan perintah /ide untuk menghubungkan Claude Code ke instance VS Code Anda. Untuk mengkonfigurasi, jalankan claude, masukkan /config, dan atur diff tool ke auto untuk deteksi IDE otomatis. Baik ekstensi maupun integrasi CLI bekerja dengan Visual Studio Code, Cursor, Windsurf, dan VSCodium.

Pemecahan Masalah

Ekstensi Tidak Menginstal

  • Pastikan Anda memiliki versi VS Code yang kompatibel (1.85.0 atau lebih baru)
  • Periksa bahwa VS Code memiliki izin untuk menginstal ekstensi
  • Coba instal langsung dari situs web marketplace

Integrasi Legacy Tidak Bekerja

  • Pastikan Anda menjalankan Claude Code dari terminal terintegrasi VS Code
  • Pastikan CLI untuk varian IDE Anda terinstal:
    • VS Code: perintah code harus tersedia
    • Cursor: perintah cursor harus tersedia
    • Windsurf: perintah windsurf harus tersedia
    • VSCodium: perintah codium harus tersedia
  • Jika perintah tidak terinstal:
    1. Buka command palette dengan Cmd+Shift+P (Mac) atau Ctrl+Shift+P (Windows/Linux)
    2. Cari “Shell Command: Install ‘code’ command in PATH” (atau yang setara untuk IDE Anda)
Untuk bantuan tambahan, lihat panduan pemecahan masalah kami.