Setup Tools Vibe Coding: VS Code + AI Assistant Sampai Siap Ngoding

Persiapan IDE Utama: VS Code vs Cursor

Vibe coding berpusat pada kecepatan iterasi kode melalui interaksi kecerdasan buatan (AI) tanpa hambatan konteks. Pemilihan Integrated Development Environment (IDE) menentukan tingkat efisiensi alur kerja pengkodean berbasis AI. Terdapat dua pilihan utama: Visual Studio Code (VS Code) dengan dukungan ekstensi pihak ketiga, atau Cursor Editor yang dibangun khusus sebagai fork VS Code dengan integrasi model AI secara native.

Opsi 1: VS Code (Visual Studio Code)

VS Code merupakan editor open-source berarsitektur ringan dengan ekosistem ekstensi yang sangat luas. Dapatkan installer resmi dari code.visualstudio.com untuk sistem operasi Windows, macOS, atau Linux.

Untuk memaksimalkan vibe coding di VS Code, konfigurasi rantai ekstensi pendukung berikut melalui Marketplace:

• Prettier - Code Formatter: Mengatur ulang penulisan kode sintaksis secara otomatis setiap kali AI mendistribusikan blok kode baru ke dalam file.
• ESLint: Menjalankan pemindaian statis untuk mendeteksi potensi bug, kesalahan variabel, serta ketidakcocokan tipe data JavaScript/TypeScript secara real-time.
• Tailwind CSS IntelliSense: Menyediakan pelengkapan otomatis (auto-complete), pratinjau warna, dan penyetelan kelas CSS saat AI menghasilkan komponen tampilan antarmuka.
• GitLens: Melacak histori perubahan baris demi baris, memfasilitasi peninjauan kembali (code review) atas perubahan yang diinjeksi oleh LLM.
• Error Lens: Menampilkan pesan kesalahan penulisan kode langsung di atas baris yang bermasalah tanpa harus mengarahkan kursor ke ikon peringatan.

Opsi 2: Cursor Editor

Cursor diunduh dari cursor.com. Sebagai perabangan (fork) dari VS Code, Cursor mempertahankan kompatibilitas 100% terhadap seluruh ekstensi, tema, serta pintasan papan ketik (keyboard shortcuts) bawaan VS Code. Perbedaannya terletak pada arsitektur bawaan yang mengintegrasikan pencarian vektor (vector search) terhadap seluruh pustaka kode proyek secara lokal.

Fitur inti Cursor untuk alur kerja vibe coding mencakup:

• Cmd + K / Ctrl + K (Inline Edit): Mengubah atau merefaktor blok kode yang disorot berdasarkan petunjuk instruksi teks singkat.
• Cmd + L / Ctrl + L (AI Panel Chat): Membuka panel diskusi AI yang memiliki indeks penuh atas basis kode (codebase), dokumentasi, serta referensi berkas luar.
• Cmd + I / Ctrl + I (Composer Mode): Memungkinkan AI merancang, memodifikasi, dan membuat rantai banyak berkas (multi-file modification) dalam satu kali generasi prompt.
• Terminal Integration: Eksekusi perintah terminal otomatis beserta perbaikan kesalahan kompilasi secara instan melalui analisis AI.

Konfigurasi AI Assistant

AI Assistant bertindak sebagai mesin eksekusi utama. Pilih atau kombinasikan tiga opsi berikut untuk mengoptimalkan produktivitas.

1. GitHub Copilot & Copilot Chat

Pasang ekstensi GitHub Copilot dan GitHub Copilot Chat dari Marketplace. Setelah terinstal, lakukan otentikasi menggunakan akun GitHub yang memiliki langganan Copilot aktif.

Tambahkan konfigurasi berikut ke dalam berkas settings.json di VS Code untuk mengaktifkan saran baris otomatis dan melarang rekomendasi pada berkas teks polos:

{
  "github.copilot.enable": {
    "*": true,
    "plaintext": false,
    "markdown": true
  },
  "editor.inlineSuggest.enabled": true,
  "github.copilot.editor.enableAutoCompletions": true
}

2. Claude Code CLI (Anthropic)

Claude Code adalah alat antarmuka baris perintah (Command Line Interface / CLI) berbasis agen yang beroperasi di dalam terminal. Alat ini memiliki akses langsung ke sistem berkas untuk tugas refactoring kompleks, analisis dependensi, dan perintah shell. Prasyarat lingkungan: Node.js v18.0.0 atau versi lebih baru serta API Key Anthropic yang valid.

Jalankan instalasi paket secara global melalui terminal:

npm install -g @anthropic-ai/claude-code

Lakukan otentikasi akun Anthropic dengan perintah berikut:

claude login

Setelah sesi login berhasil, navigasikan terminal ke direktori kerja proyek dan ketik claude untuk membuka ruang kerja interaktif agen AI.

3. Native Cursor AI Setup

Di dalam Cursor, buka panel pengaturan melalui Settings > Cursor Settings > Models. Atur model bahasa besar (LLM) yang digunakan sesuai target pekerjaan:

• claude-3-5-sonnet: Pilih sebagai model utama untuk penalaran logika rumit, perencanaan arsitektur perangkat lunak, dan pembuatan komponen dari nol.
• gpt-4o: Gunakan untuk skrip pembuatan templat dasar, tugas otomatisasi ringan, atau penulisan dokumen teknis.
• cursor-small: Model ringan berkecepatan tinggi khusus untuk autocompletion instan saat mengetik.

Membuat File Aturan Prompt Sistem (.cursorrules / .clauderules)

Model kecerdasan buatan cenderung menghasilkan struktur kode acak jika tidak dibatasi oleh pedoman yang konsisten. Pembuatan berkas konteks aturan acuan di tingkat root direktori wajib dilakukan agar setiap output kode mematuhi arsitektur proyek.

Buat berkas bernama .cursorrules (untuk Cursor) atau CLAUDE.md (untuk Claude Code CLI) di direktori utama proyek.

Contoh Konfigurasi Lengkap .cursorrules:

# Aturan Arsitektur & Standar Kode Proyek

## Stack Spesifikasi Teknologi
- Framework: Next.js 14+ (App Router)
- Bahasa: TypeScript (Strict mode aktif, no explicit 'any')
- Styling: Tailwind CSS v3+
- Component Library: Shadcn UI / Radix Primitives
- Icon System: Lucide React
- State Management: Zustand / React Query (Tanpa Redux)

## Prinsip & Konvensi Penulisan Kode
1. Gunakan Functional Components dengan deklarasi TypeScript interface eksplisit untuk props.
2. Dilarang keras menggunakan inline styling (style attribute). Wajib menggunakan utility class Tailwind CSS.
3. Pisahkan logika bisnis ke dalam kustom hooks (`src/hooks`) atau modul layanan (`src/services`).
4. Semua penanganan operasi asinkron wajib menggunakan sintaks async/await yang dibungkus dalam blok try-catch.
5. Berikan respons penanganan kesalahan (error handling) yang informatif dalam Bahasa Indonesia.
6. Batasi panjang berkas maksimal 150 baris. Apabila melebihi batas, lakukan refactoring ke dalam sub-komponen terpisah di folder yang relevan.
7. Terapkan prinsip Clean Code, DRY (Don't Repeat Yourself), dan SOLID.

## Konvensi Penamaan Berkas
- Komponen UI: PascalCase (contoh: `ButtonWithIcon.tsx`)
- Hooks & Utilities: camelCase (contoh: `useAuth.ts`, `formatCurrency.ts`)
- Halaman App Router: lowercase (contoh: `page.tsx`, `layout.tsx`)

Struktur Folder Project Vibe Coding Pertama

Penyusunan direktori yang rapi mempermudah AI dalam memetakan dependensi modul dan melakukan pengindeksan konteks. Hindari penumpukan berkas di tingkat root.

Struktur Direktori Standar (Aplikasi Web Modern):

my-vibe-project/
├── .cursorrules
├── .env.example
├── .gitignore
├── package.json
├── tsconfig.json
├── tailwind.config.ts
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── globals.css
│   ├── components/
│   │   ├── ui/
│   │   │   └── button.tsx
│   │   └── features/
│   │       └── task/
│   │           ├── TaskCard.tsx
│   │           └── TaskList.tsx
│   ├── hooks/
│   │   └── useTaskManager.ts
│   ├── lib/
│   │   └── utils.ts
│   ├── services/
│   │   └── storageService.ts
│   └── types/
│       └── task.ts
└── public/

Eksekusi perintah terminal berikut untuk melakukan inisialisasi lingkungan kerja dasar:

mkdir my-vibe-project
cd my-vibe-project
npm init -y
git init

Uji Coba Vibe Coding Pertama: Aplikasi Task Tracker

Uji keandalan integrasi alat yang telah dikonfigurasi dengan membangun aplikasi pelacak tugas (Task Tracker) tanpa menulis logika kode secara manual.

Langkah 1: Generasi Komponen & Logika

Buka panel chat AI (Cursor Composer dengan shortcut Cmd + I atau Copilot Chat) lalu masukkan instruksi prompt awal berikut:

Buatkan komponen Task Tracker lengkap berbasis React dan Tailwind CSS sesuai aturan .cursorrules.
Kebutuhan fitur utama:
1. Input teks untuk nama tugas baru dengan tombol 'Tambah Tugas'.
2. Daftar tugas lengkap dengan elemen checkbox untuk menandai status selesai serta tombol 'Hapus'.
3. Simpan seluruh state data tugas ke dalam LocalStorage agar data tetap berlanjut (persistent) saat halaman di-refresh.
4. Pisahkan interface tipe data ke src/types/task.ts, logika penyimpanan ke src/services/storageService.ts, dan antarmuka utama ke src/components/features/task/TaskManager.tsx.

Langkah 2: Verifikasi & Iterasi Kode (Debugging)

Tinjau kode yang dihasilkan oleh AI. Jika ditemukan kesalahan tipe data TypeScript, batas validasi input, atau tampilan visual yang kurang optimal, lakukan prompt perbaikan bertahap (iterative prompting):

Lakukan revisi pada berkas src/components/features/task/TaskManager.tsx:
1. Tambahkan validasi batas input: cegah penambahan tugas jika string hanya berisi spasi kosong.
2. Tampilkan pesan peringatan error bawah input jika pengguna menekan tombol tambah dalam kondisi kolom kosong.
3. Tambahkan ringkasan statistik di bagian atas: Total Tugas, Tugas Selesai, dan Persentase Kelengkapan.

Langkah 3: Menjalankan Server Pengembang Local

Jalankan perintah pengujian untuk memverifikasi aplikasi di peramban web (browser):

npm run dev

Buka konsol pengembang peramban (F12) untuk memastikan tidak ada kesalahan rantai runtime (runtime error) atau masalah render React.

Checklist Kesiapan Tools Vibe Coding

Gunakan tabel periksa berikut untuk memastikan seluruh lingkungan pengembangan telah siap 100% sebelum memulai pembuatan proyek berskala besar:

Troubleshooting Masalah Common Setup

1. AI Chat Tidak Membaca Konteks Berkas Proyek

Penyebab: Indeks ruang kerja (workspace index) belum diperbarui atau ukuran direktori terlalu besar.

Solusi: Gunakan tag konteks eksplisit saat mengetik prompt. Di Cursor, ketik @Files atau @Codebase untuk menyertakan ruang kerja. Di Copilot, gunakan simbol #file:path/to/file. Buat berkas .cursorignore untuk mengecualikan folder biner besar seperti node_modules, .next, dan dist dari proses pemindaian.

2. Respons AI Mengalami Latensi Tinggi atau Timeout

Penyebab: Terlalu banyak berkas terbuka di tab editor atau masalah pembatasan kuota API (rate limiting).

Solusi: Tutup berkas yang tidak relevan di tab editor. Ubah setelan model dari model penalaran berat ke model yang lebih ringan (misalnya beralih sementara ke gpt-4o-mini atau claude-3-haiku) untuk pemutakhiran kode sederhana.

3. Kegagalan Autentikasi Claude Code CLI

Penyebab: Token otentikasi kedaluwarsa atau masalah izin akses terminal lokal.

Solusi: Hapus sesi lama dengan menjalankan claude logout, perbarui paket CLI ke versi terbaru via npm install -g @anthropic-ai/claude-code@latest, lalu jalankan kembali claude login.

Langkah Selanjutnya

Lingkungan kerja vibe coding Anda kini telah terkonfigurasi secara profesional. Lanjutkan ke tahap berikutnya dalam seri panduan ini: Belajar Vibe Coding Bagian 3 dari 10: Teknik Prompting Kode Presisi Tinggi Tanpa Bug.