Tutorial Cara Install Claude Code di VS Code dengan CLI & Extension

Apa Itu Claude Code?

Claude Code merupakan environment AI-assisted development yang dirancang untuk membaca, memahami, dan memodifikasi codebase secara kontekstual.

Di dalam VS Code, Claude Code adalah extension resmi dari Anthropic yang menghadirkan AI assistant langsung ke dalam IDE Anda. Berbeda dengan tools AI lainnya, Claude Code fokus pada:

• Inline code editing dengan diff viewer

• Plan-based editing (review sebelum eksekusi)

• @mention file & context awareness

• Integrasi CLI dan MCP (Model Context Protocol) 

Kenapa Profesional IT Perlu Menggunakan Claude Code?

Claude Code tidak hanya chatbot biasa. Claude Code merupakan AI pair programmer yang benar-benar terintegrasi dalam workflow development.

Beberapa keunggulannya:

• Memahami konteks project (multi-file)

• Bisa refactor code dengan aman (diff preview)

• Mendukung workflow Git

• Bisa menjalankan perintah CLI

• Mendukung plugin & MCP server

Baca juga : Pelatihan dan Sertifikasi Skema "Certified Programmer"

Prerequisites Sebelum Install

Sebelum mulai, pastikan Anda memenuhi requirement berikut:

Cara Install Claude Code di VS Code Extension

1. Buka Extensions Marketplace

• Jalankan Visual Studio Code

• Tekan:

• Ctrl + Shift + X (Windows/Linux)

• Cmd + Shift + X (Mac)

• Ketik: Claude Code

2. Install Extension

• Pilih extension resmi Claude Code

• Klik tombol Install

💡 Tips:
Jika extension tidak muncul setelah install: 

Jalankan Developer: Reload Window atau restart VS Code

3. Buka Panel Claude Code

Setelah install, Anda bisa membuka Claude dengan beberapa cara:

4. Login ke Claude

Saat pertama kali membuka:

1. Klik Sign In

2. Browser akan terbuka

3. Login menggunakan akun Claude Anda

💡 Catatan :
Jika menggunakan environment variable (ANTHROPIC_API_KEY) namun tidak terbaca:

Jalankan VS Code dari terminal:

code .

Baca juga : Pelatihan Data Science with Python

Cara Menggunakan Claude Code

Setelah login, Anda sudah bisa mulai menggunakan Claude Code.

1. Kirim Prompt

Contoh penggunaan:

Refactor fungsi ini agar lebih efisien

Atau:

Jelaskan logic pada file ini

2. Gunakan @-Mention untuk Context

Claude Code mendukung contextual reference:

Contoh:

Explain logic in @authService.ts

Atau dengan line selection:

@userController.ts#10-25 explain this part

Shortcut:

• Alt + K (Windows/Linux)

• Option + K (Mac)

3. Review Perubahan (Diff Mode)

Salah satu fitur paling powerful:

Ketika Claude ingin mengubah code:

• Akan muncul side-by-side diff

• Anda bisa:

• Accept

• Reject

• Modify instruction

Ini sangat penting untuk secure coding workflow.

Mode Penggunaan Claude Code

Claude Code memiliki beberapa mode kerja:

💡 Rekomendasi:
Gunakan Plan Mode untuk production code.

Baca juga : Pelatihan dan Sertifikasi Skema "Certified Programmer"

Fitur Advanced yang Wajib Dicoba 

Selain fitur GUI di dalam Visual Studio Code, salah satu kemampuan paling powerful dari Claude Code adalah instalasi via CLI (Command Line Interface). Ini sangat penting untuk developer profesional yang ingin:

• Automasi workflow

• Integrasi dengan CI/CD

• Kontrol versi yang konsisten (reproducibility)

• Akses fitur advanced yang tidak tersedia di UI

Berikut tutorial lengkapnya.

Cara Install Claude Code via CLI (npm Global)

Claude Code juga tersedia sebagai package npm resmi dari Anthropic. Instalasi global memungkinkan Anda menjalankan perintah claude dari mana saja.

1. Install Claude Code (Disarankan Pin Version)

Gunakan versi spesifik untuk menghindari breaking changes:

npm install -g @anthropic-ai/claude-code@X.Y.Z

📌 Ganti X.Y.Z dengan versi stabil terbaru yang sudah Anda validasi di environment Anda.

2. Verifikasi Instalasi

claude --version

Output harus sesuai dengan versi yang Anda install.

⚠️ Mengatasi Error EACCES (Permission Denied)

Error ini sering terjadi jika npm global directory dimiliki oleh root.

Solusi terbaik (tanpa sudo):

Step-by-step Fix:

# Step 1: Create user-owned npm global directory
mkdir -p ~/.npm-global
ls -la ~ | grep npm-global # Verify directory is owned by current user

# Step 2: Configure npm prefix
npm config set prefix '~/.npm-global'

# Step 3: Persist PATH to shell profile (choose the correct file for your shell)
SHELL_PROFILE="${HOME}/.zshrc" # Change to ~/.bashrc for bash
echo 'export PATH="$HOME/.npm-global/bin:$PATH"' >> "$SHELL_PROFILE"

# Step 4: Apply immediately to current session
source "$SHELL_PROFILE"

# Step 5: Verify persistence — open a NEW terminal, then run:
which claude # Expected: /home/<user>/.npm-global/bin/claude

Baca juga : Pelatihan dan Sertifikasi Skema "Certified Programmer"

Autentikasi Claude Code

Setelah instalasi, Anda perlu login.

Opsi 1: OAuth (Rekomendasi)

# Navigate to your project directory first
cd ~/projects/my-app

# Launch Claude Code for the first time
Claude

# For Max/Pro subscribers: a browser window opens for OAuth authentication
# Follow the prompts to authorize Claude Code with your Anthropic account

Keterangan :

• Browser akan terbuka otomatis

• Login ke akun Anthropic

• Authorization selesai

✅ Cocok untuk:

• Developer individu

• Penggunaan cepat tanpa konfigurasi manual

Opsi 2: API Key (Advanced Use)

Untuk penggunaan di server, CI/CD, atau automation.

⚠️ JANGAN simpan API key langsung di file shell (.bashrc/.zshrc)

Cara Aman Menggunakan API Key

✅ Option A: Load dari File Secure

export ANTHROPIC_API_KEY="$(cat ~/.secrets/anthropic_key)"

✅ Option B: Gunakan Secrets Manager (Best Practice)

Contoh dengan 1Password CLI:

export ANTHROPIC_API_KEY="$(op read 'op://Private/Anthropic/api-key')"

✅ Option C: Gunakan .env + direnv

# File .envrc

export ANTHROPIC_API_KEY="sk-ant-..."

# Aktifkan

direnv allow

Verifikasi API Key

echo "Key set: $([ -n "$ANTHROPIC_API_KEY" ] && echo YES || echo NO)"

Jalankan Claude

Claude

Lengkapnya:

# SECURE: Store the API key using your OS keychain or a secrets manager.
# Do NOT write the raw key to your shell profile.

# Option A: Set for the current session only (key read from a protected file):
export ANTHROPIC_API_KEY="$(cat ~/.secrets/anthropic_key)"

# Option B: Use a secrets manager (e.g., 1Password CLI):
export ANTHROPIC_API_KEY="$(op read 'op://Private/Anthropic/api-key')"

# Option C: Use a .env file managed by direnv (never commit .env):
# Add to .envrc: export ANTHROPIC_API_KEY="sk-ant-..."
# Run: direnv allow

# Verify the variable is set (value is intentionally hidden):
echo "Key set: $([ -n "$ANTHROPIC_API_KEY" ] && echo YES || echo NO)"

# Then launch Claude Code:
Claude

Baca juga : Pelatihan Deep Learning Python

CLI + VS Code Extension = Kombinasi Powerful

Menggunakan CLI + VS Code memberikan fleksibilitas maksimal:

Best Practice:

• Gunakan VS Code untuk coding interaktif

• Gunakan CLI untuk automation & scripting

Contoh Workflow

1. Code Review Otomatis

claude "review this repository and suggest improvements"

2. Generate Commit Message

claude "generate commit message for staged changes"

3. Integrasi CI/CD

Tambahkan ke pipeline:

claude "analyze code quality and security issues"

Advanced Integrasi Lainnya

1. Integrasi Git

Claude bisa:

• Generate commit

• Buat PR

• Ringkas perubahan

2. MCP Server (Model Context Protocol)

Tambahkan integrasi eksternal:

claude mcp add --transport http github https://api.githubcopilot.com/mcp/

3. Integrasi Browser Automation

Gunakan di VS Code:

@browser open localhost:3000

Best Practice untuk Profesional IT

Untuk penggunaan production:

• Gunakan API Key via secrets manager

• Hindari hardcode credential

• Gunakan version pinning npm

• Aktifkan audit & logging

• Gunakan sandbox environment untuk testing

Beda Claude Code di VS Code Extension dan CLI

CLI memberikan kontrol penuh yang tidak dimiliki GUI:

Tips Keamanan

Untuk penggunaan profesional:

• Gunakan manual approval mode

• Hindari auto-edit di project sensitif

• Aktifkan Restricted Mode untuk project tidak terpercaya

• Review semua perubahan sebelum accept

FAQ:

1. Apakah Claude Code gratis digunakan?
Tergantung paket Anthropic, beberapa fitur memerlukan subscription.

2. Apakah Claude Code bisa digunakan offline?
Tidak, karena membutuhkan koneksi ke server AI.

3. Apakah Claude Code aman untuk kode perusahaan?
Relatif aman, namun tetap perlu review manual dan kebijakan internal.

4. Apa perbedaan Claude Code dengan Copilot?
Claude lebih fokus pada reasoning dan plan-based coding.

5. Apakah Claude Code mendukung semua bahasa pemrograman?
Ya, selama berbasis teks dan bisa dibaca oleh VS Code.

Kesimpulan

Menggunakan Claude Code di VS Code dengan CLI & Extension merupakan the next level dalam AI-assisted development.

Dengan setup yang tepat:

• VS Code = interactive interface
• CLI = automation engine

📢 Ingin menguasai AI untuk coding hingga IT work automation?

Jika Anda berminat untuk mempelajari IT dan teknologi AI lebih mendalam, silakan mengikuti pelatihan terkait AI bersama SUHU disini:

• Pelatihan dan Sertifikasi Skema "Certified Programmer"

• Pelatihan Deep Learning Python

• Pelatihan Data Science with Python

• Implementasi Generative AI untuk Layanan Digital

Silakan konsultasikan kebutuhan Anda bersama kami dengan klik link berikut: https://bit.ly/kontaksuhu