Claude Code di VS Code: Cara Menggunakan Ekstensi

Seperti yang dibahas di bagian kapabilitas, plan mode bekerja baik untuk perubahan yang lebih besar. Satu detail yang saya lewati di sana: Claude juga menjalankan perintah eksplorasi terlebih dahulu dan menyimpan rencana lengkap ke sebuah berkas. Tambahkan komentar Anda sebelum apa pun ditulis. Saya mendapati rencana tertulis tetap berguna meski akhirnya banyak yang saya ubah.

Untuk konteks terarah, gunakan @-mention dengan rentang baris: @app.ts#5-10 memfokuskan Claude pada area tertentu. Menahan Shift sambil menyeret berkas ke kotak prompt akan menambahkannya sebagai lampiran. Option+K di Mac (atau Alt+K di Windows dan Linux) menyisipkan @-mention untuk berkas dan seleksi Anda saat ini secara langsung.

Pintasan keyboard VS Code yang patut diketahui

Pintasan ini berasal dari dokumen ekstensi VS Code Anthropic dan mencakup yang paling sering saya gunakan di panel.

Penggantian mode izin masih berada di CLI: tekan Shift+Tab di terminal terintegrasi untuk berpindah antara mode default, plan, dan accept-edits. Untuk seluruh set slash-command, lihat panduan slash command Claude Code kami.

Checkpoints melacak edit berkas Claude sepanjang sesi. Arahkan kursor ke pesan mana pun dalam percakapan untuk menampilkan tombol rewind. Pilihannya: fork percakapan sambil mempertahankan perubahan kode, memutar ulang kode sambil mempertahankan riwayat percakapan, atau keduanya. Checkpoints bertahan selama 30 hari. Mereka tidak melacak perintah bash: rm, mv, dan cp berada di luar sistem checkpoint. Git tetap menjadi jaring pengaman yang tepat untuk apa pun yang destruktif.

Claude Code di VS Code untuk Debugging dan Refactoring

Kedua alur kerja mengikuti langkah yang sama: beri Claude konteks, tinjau perubahan yang diusulkan, verifikasi hasilnya. Bagian rumitnya adalah mengumpulkan konteks yang tepat.

Debugging

Bagikan kesalahan dengan menempelkannya langsung, mereferensikan output terminal dengan @terminal:name, atau membiarkan Claude menarik dari panel Problems melalui mcp__ide__getDiagnostics. Claude menelusuri akar penyebab, mengusulkan perbaikan sebagai diff, dan Anda menjalankan pengujian untuk memverifikasi.

Claude Code tidak terintegrasi dengan debugger native VS Code: tidak ada breakpoint, tidak ada langkah demi langkah, tidak ada variabel live. Jalur tempel kesalahan dan diagnostik sudah mencakup sebagian besar kasus. Jika Anda perlu debugger secara khusus, ada server MCP komunitas (claude-debugs-for-you di GitHub) yang menjembatani celah, tetapi memerlukan penyiapan tersendiri.

Untuk debugging web live, @browser menghubungkan Claude ke Chrome melalui ekstensi Claude di Chrome (versi 1.0.36 atau lebih tinggi). Prompt seperti @browser go to localhost:3000 and check the console for errors memungkinkan Claude memeriksa keadaan browser live tanpa Anda berpindah jendela.

Refactoring

Claude menangani perubahan berkas terkoordinasi dengan baik: mengganti nama fungsi di codebase besar, migrasi dari satu library ke library lain. Langkah peninjauan diff-lah yang membuatnya tidak sembrono.

Berkas CLAUDE.md sangat penting di sini dibanding bagian lain artikel. Tanpa konvensi khusus proyek, Claude akan menggunakan pola yang diinferensikan dari codebase, yang mungkin tidak sesuai dengan yang Anda inginkan. Seperti disebutkan di bagian penyiapan, /init memberi Anda berkas awal; menyempurnakannya sebelum sesi refactor besar sepadan dengan waktu sepuluh menit.

Kompaksi konteks adalah batas praktis pada sesi panjang. Saat jendela konteks penuh, Claude melakukan kompak otomatis dengan meringkas percakapan lama. Setelah itu, ia bisa kehilangan jejak keputusan sebelumnya. Menjalankan /compact secara manual sebelum memulai fase baru memberi hasil yang lebih dapat diprediksi daripada menunggu kompak otomatis berjalan di tengah tugas.

Claude Code di VS Code vs. Alur Kerja Terminal

Dokumentasi Anthropic menyebut ekstensi VS Code sebagai "cara yang direkomendasikan untuk menggunakan Claude Code di VS Code." Ekstensi ini menambahkan hal-hal yang tidak dimiliki terminal: penampil diff berdampingan, peninjauan rencana dalam dokumen markdown yang dapat Anda edit, beberapa percakapan di tab terpisah, dan @browser untuk debugging web live.

Terminal unggul dalam kapabilitas. Pintasan ! bash, pelengkapan tab, set lengkap slash command, dan alur kerja berbasis pipe seperti tail -200 app.log | claude -p "..." semuanya khusus CLI. Konfigurasi server MCP juga hanya di terminal. Dari ekstensi Anda dapat mengelola server yang ada dengan /mcp tetapi tidak dapat menambahkan yang baru.

Keduanya tidak saling eksklusif. Menjalankan claude di terminal terintegrasi VS Code tetap memberi Anda integrasi IDE: penayangan diff, berbagi konteks seleksi, dan berbagi diagnostik tetap berfungsi dari sana. Sesi yang dimulai di ekstensi dapat dilanjutkan di terminal dengan claude --resume. Jalankan claude --ide dari terminal terintegrasi ketika Anda ingin memaksa CLI terhubung ke penampil diff VS Code dan jembatan diagnostik.

Kebanyakan pengembang menggunakan keduanya: VS Code untuk pekerjaan multi-berkas dan peninjauan cermat, terminal untuk tugas cepat dan otomasi. Beberapa tetap di terminal untuk semuanya, dan sejujurnya itu juga baik-baik saja. Jika Anda lebih suka Cursor ketimbang VS Code, panduan Claude Code di Cursor kami membahas alur kerja ekstensi yang sama di sana. Alur kerja CLI lengkap kami tetap layak diketahui apa pun pilihannya.

Claude Code di VS Code vs. GitHub Copilot

Seperti disebutkan di awal, "Claude di VS Code" bisa berarti ekstensi native, Claude diakses melalui GitHub Copilot model picker, atau CLI di terminal terintegrasi. Ekstensi native dan Copilot berbagi model namun berbeda produknya, dan keduanya bekerja dengan cara yang cukup berbeda.

Melalui Copilot, model Claude berjalan di dalam paradigma chat dan pelengkapan GitHub: tidak ada sandbox OS lokal, tidak ada integrasi MCP kustom, tidak ada perintah terminal native. Melalui ekstensi Claude Code, model yang sama berjalan dengan jendela konteks hingga 1 juta token, mengeksekusi tugas lintas berkas, dan memiliki akses ke checkpoints, plan mode, dan server MCP.

Alat-alat ini dibuat untuk pekerjaan yang berbeda. Copilot menawarkan pelengkapan inline sebagai fitur inti. Claude Code sama sekali tidak melakukan autocomplete. Mode agen Copilot berkembang pesat, tetapi dalam tolok ukur komunitas cenderung tertinggal pada tugas yang melibatkan banyak berkas. Keduanya tidak secara inheren lebih baik.

Ekstensi native dan Copilot: model sama, pengalaman berbeda. Gambar oleh Penulis.

Soal harga: Copilot Pro $10/bulan dengan 300 permintaan premium. Claude Code Pro $20/bulan. Pola umum di kalangan pengembang yang memakai keduanya adalah $10 untuk Copilot (autocomplete saat mengetik) dan $20 untuk Claude Code (tugas yang lebih terarah dan berskala besar). Kedua produk mencakup bagian alur kerja yang berbeda dengan sedikit tumpang tindih. Anthropic juga bermitra dengan GitHub untuk menghadirkan model Claude di dalam Copilot, yang menangani sisi autocomplete.

Pertimbangan Keamanan dan Privasi

Anthropic tidak menggunakan kode Anda untuk melatih model Claude. Pengguna Free, Pro, dan Max dapat memilih keluar dari pencatatan data di pengaturan akun; paket Team, Enterprise, dan API dikecualikan secara default. Untuk detail mode izin, server MCP, dan sandbox di luar tampilan VS Code, lihat panduan keamanan Claude Code kami.

Sekumpulan path tetap dilindungi apa pun modenya: .git, .vscode, .idea, .husky, dan .claude (dengan pengecualian untuk subdirektori kerja miliknya), plus .gitconfig, .gitmodules, dan beberapa berkas konfigurasi shell dan alat. Ini paling penting pada mode terima otomatis, yang menulis tanpa jeda dan bisa menyentuh settings.json dan tasks.json. Periksa git diff sebelum melakukan commit.

Sandboxing mengisolasi perintah bash ke direktori kerja Anda dan memblokir akses jaringan yang tidak diotorisasi. Ini nonaktif secara default; aktifkan dengan /sandbox.

Mode auto menggantikan persetujuan per aksi dengan pengklasifikasi yang meninjau aksi sebelum dijalankan, memblokir hal-hal seperti penghapusan berkas massal, pengiriman data ke endpoint yang tidak diotorisasi, dan force-push ke main. Anthropic menggambarkannya sebagai alternatif yang lebih aman dibanding --dangerously-skip-permissions.

Transkrip lokal disimpan dalam plaintext di ~/.claude/projects/ selama 30 hari (cleanupPeriodDays dapat menyesuaikan ini). Penyiapan Enterprise di Amazon Bedrock, Google Vertex AI, atau Microsoft Foundry mengikuti ketentuan data penyedia tersebut. Mode auto tidak tersedia pada penyedia itu; mode ini memerlukan API Anthropic secara langsung.

Pemecahan Masalah Umum pada Ekstensi VS Code

Sebagian besar masalah penyiapan jatuh ke daftar singkat. Saya sudah mengalami semuanya setidaknya sekali.

• Ikon Spark tidak muncul: Buka sebuah berkas proyek, bukan hanya folder. Ikon Spark di Editor Toolbar hanya muncul saat berkas terbuka. Anda juga bisa mengklik entri Spark di Status Bar (kanan bawah) atau menjalankan Developer: Reload Window dari Command Palette. Nonaktifkan ekstensi AI yang bertentangan seperti Cline atau Continue jika panel masih gagal memuat.

• Konflik ekstensi: Nonaktifkan sementara ekstensi AI lain (Cline, Continue, dll.) jika Claude Code gagal aktif.

• Restricted Mode: Claude Code tidak berjalan di VS Code Restricted Mode. Tandai workspace sebagai trusted.

• Pemblokiran berkas di Windows: Tutup panel Explorer dan jeda debugger aktif sebelum sesi multi-berkas besar jika penulisan gagal di tengah sesi.

• Konflik macOS Tahoe Cmd+Esc: Game Overlay sistem dapat mencegat Cmd+Esc. Ubah binding Claude Code: Focus input di Keyboard Shortcuts VS Code (Cmd+K Cmd+S) jika toggle fokus berhenti berfungsi.

• Login Bedrock atau Vertex alih-alih Anthropic: Anda dapat mengarahkan Claude Code ke endpoint penyedia cloud. Panduan penyiapan model lokal dan alternatif kami menjelaskan jalur non-subscription.

Anthropic memelihara panduan pemecahan masalah khusus jika tidak ada hal di atas yang memperbaiki masalah Anda.

Keterbatasan dan Trade-off

Ekstensi adalah subset dari CLI. Seperti dibahas pada bagian perbandingan terminal, pelengkapan tab, pintasan ! bash, dan alur kerja berbasis pipe semuanya hanya ada di CLI, begitu juga mode dontAsk untuk pipeline CI.

Visibilitas tugas latar belakang terbatas; untuk apa pun yang perlu Anda pantau dengan cermat, terminal terintegrasi lebih transparan.

Persetujuan per berkas, bukan per hunk: jika Claude benar pada satu fungsi dan salah pada fungsi lain dalam berkas yang sama, Anda menerima semuanya dan mengembalikan secara manual bagian yang tidak diinginkan.

Batas penggunaan adalah hal yang paling dulu membuat frustrasi pengguna Pro. Batas laju berjalan dalam jendela bergulir, bukan per pesan, dan habis lebih cepat pada jam sibuk. Untuk penggunaan sesekali, Pro cukup; untuk hari kerja penuh, Max 5x atau Max 20x lebih realistis. Saya tidak akan bergantung pada perkiraan komunitas; Anthropic tidak memublikasikan angka pasti dan angkanya dapat berubah.

Di Windows, penguncian berkas antara penjelajah proyek VS Code dan operasi tulis Claude lebih sering menyebabkan kegagalan dibanding di macOS atau Linux. Menutup panel explorer dan menjeda debugger aktif sebelum sesi multi-berkas besar biasanya mencegahnya.

Penutup

Claude Code di VS Code adalah agen pengodean berorientasi tugas dengan UI yang mengutamakan peninjauan. Penampil diff, plan mode, dan checkpoints ada karena menangkap apa yang benar-benar diubah agen lebih penting daripada mendapatkan draf pertama yang cepat.

Alur kerja terminal tidak akan hilang, dan untuk pekerjaan terskrip, otomatis, atau berat CLI, terminal tetap menjadi permukaan yang lebih baik. Namun jika Anda melakukan jenis pekerjaan yang membuat Anda ingin membaca setiap perubahan yang diusulkan sebelum mendarat, editor adalah pilihan yang lebih tepat.

Claude Code merilis pembaruan mingguan, jadi bagian dari artikel ini akan cepat usang. Praktik terbaik Claude Code dan panduan Claude Code 2.1 kami adalah tindak lanjut yang baik untuk tetap aktual. Changelog resmi melacak rilis. Jika ada yang di sini tidak cocok dengan yang Anda lihat, cek sana terlebih dahulu.

Jika Anda menginginkan latihan terstruktur dengan model Claude dan alur kerja agen, saya merekomendasikan kursus Introduction to Claude Models kami.