✦ AizuDemy
Beranda › Tutorial › Setup Tools Vibe Coding: VS Code + AI Assistant Sampai Siap Ngoding

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

A
Aizu Dev
12 jam lalu · 8 views
#Tutorial

Konfigurasi Stack Vibe Coding yang Efektif

Vibe coding membutuhkan ekosistem pengembangan yang presisi. Pendekatan ini menjadikan AI Assistant sebagai generator kode utama, sementara pengembang bertindak sebagai arsitek dan verifikator. Tanpa konfigurasi tools yang tepat, AI Assistant sering menghasilkan kode usang, salah mengimpor modul, atau merusak arsitektur aplikasi.

Stack vibe coding yang solid berfokus pada tiga pilar utama:

  • Kecepatan Umpan Balik (Feedback Loop): Deteksi kesalahan sintaks dan tipe secara instan via linter inline.
  • Kejelasan Konteks (Context Awareness): Pembatasan ruang lingkup repositori agar AI hanya membaca berkas yang relevan.
  • Otomatisasi Eksekusi (Automated Execution): Format kode otomatis dan pengetesan langsung saat kode dibuat.

Artikel bagian kedua dari seri Belajar Vibe Coding ini membahas langkah demi langkah konfigurasi Visual Studio Code (VS Code) dan AI Assistant hingga siap memproduksi kode pertama.

1. Instalasi dan Tuning VS Code untuk Vibe Coding

Visual Studio Code tetap menjadi editor standar karena ekosistem ekstensi yang kaya dan fleksibilitas integrasinya.

Langkah Instalasi Dasar

Unduh VS Code dari situs resmi sesuai sistem operasi (macOS, Windows, atau Linux). Gunakan versi paling stabil. Setelah instalasi selesai, buka terminal dan pastikan perintah CLI code aktif untuk mempercepat navigasi direktori proyek.

Konfigurasi Settings.json untuk Efisiensi AI

Buka Command Palette (Ctrl+Shift+P atau Cmd+Shift+P), ketik Preferences: Open User Settings (JSON), lalu tambahkan opsi berikut:

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "editor.inlineSuggest.enabled": true,
  "editor.guides.bracketPairs": true,
  "files.exclude": {
    "**/.git": true,
    "**/node_modules": true,
    "**/dist": true,
    "**/coverage": true
  }
}

Pengaturan files.exclude mencegah AI membuang konteks token pada berkas non-kode, sedangkan formatOnSave merapikan keluaran AI sesuai aturan linter secara otomatis.

Ekstensi Wajib Pendukung Vibe Coding

  • GitLens: Memantau riwayat perubahan kode yang dibuat oleh AI secara real-time.
  • Prettier / ESLint: Memastikan konsistensi penulisan kode TypeScript atau JavaScript.
  • Error Lens: Menampilkan pesan kesalahan kode secara inline di editor sehingga kesalahan dapat langsung terdeteksi tanpa membuka tab masalah.
  • Path Intellisense: Otomatisasi autocomplete jalur file untuk modul internal.
  • Pretty TypeScript Errors: Mengubah pesan kesalahan TypeScript yang kompleks menjadi format legibel yang mudah dibaca pengembang dan AI.

2. Memilih dan Mengintegrasikan AI Assistant

Pemilihan AI Assistant menentukan alur kerja, alokasi konteks, dan tingkat kontrol biaya. Saat ini terdapat tiga pendekatan utama di industri:

Opsi A: GitHub Copilot (Integrasi Native Extension)

Opsi standar untuk pengguna VS Code murni. Terdiri dari dua komponen utama: Copilot Autocomplete (saran kode saat mengetik) dan Copilot Chat (panel diskusi dan refactoring teknis). Pasang ekstensi GitHub Copilot dan GitHub Copilot Chat dari Marketplace VS Code, lalu lakukan autentikasi akun GitHub.

Opsi B: Cursor Editor (Fork VS Code Berbasis AI)

Cursor adalah editor independen berbasis kode sumber VS Code yang dirancang khusus untuk alur kerja AI native. Mengintegrasikan fitur khusus seperti:

  • Composer: Generasi dan pengeditan kode multi-file secara simultan.
  • Full-Repo Indexing: Pemindaian indeks vektor terhadap seluruh isi repositori untuk konteks yang presisi.
  • Terminal AI: Memperbaiki perintah terminal yang gagal secara otomatis.

Opsi C: Claude Code / Continue.dev (Open Source & Custom API Key)

Bagi praktisi yang menggunakan model Anthropic (Claude 3.5 Sonnet / Claude 3.7 Sonnet) atau LLM lokal (Ollama / DeepSeek-R1), ekstensi Continue.dev di VS Code atau CLI Claude Code memberikan kontrol penuh atas biaya, privacy data, dan pemilihan model LLM.

3. Konfigurasi System Prompt dan Aturan Project (Rules for AI)

Model AI membutuhkan instruksi eksplisit mengenai standar proyek. Tanpa berkas aturan proyek, AI akan membuat asumsi generik yang sering kali melanggar standar arsitektur lokal.

Membuat File Aturan Khusus

Buat file konfigurasi instruksi di direktori root proyek berdasarkan tools yang digunakan:

  • .cursorrules (jika menggunakan Cursor)
  • .github/copilot-instructions.md (jika menggunakan GitHub Copilot)
  • .continuerc.json (jika menggunakan Continue)

Contoh Template File Aturan Produksi

Berikut adalah template aturan teknis untuk proyek berbasis Node.js dan TypeScript:

# Proyek: Vibe Coding Starter Kit

## Spesifikasi Teknis
- Bahasa: TypeScript (Strict Mode aktif, dilarang menggunakan implicit any)
- Runtime: Node.js (v20+)
- Testing Framework: Vitest
- Validasi Data: Zod

## Aturan Penulisan Kode
1. Gunakan paradigma Functional Programming. Utamakan fungsi murni (pure functions) dan imutabilitas.
2. Buat fungsi kecil, modular, dengan batasan maksimal 25 baris per fungsi.
3. Selalu tambahkan penanganan error (try-catch) pada fungsi asinkron dan kembalikan struktur error terprediksi.
4. Penamaan: camelCase untuk variabel/fungsi, PascalCase untuk Types/Interfaces, UPPER_SNAKE_CASE untuk konstanta.
5. Setiap penambahan utilitas baru di src/utils/ wajib disertai unit test terkait di folder tests/.

Instruksi ini memaksa AI mematuhi konvensi proyek secara konsisten pada setiap sesi percakapan.

4. Standardisasi Struktur Folder Project Vibe Coding

Struktur folder yang ambigu dapat menyebabkan AI salah menempatkan file atau menghasilkan impor sirkular. Pembagian modul yang terisolasi memudahkan AI membatasi cakupan analisis konteks.

Berikut struktur folder terstandarisasi untuk proyek vibe coding:

my-vibe-project/
├── .github/
│   └── copilot-instructions.md
├── src/
│   ├── components/       # Komponen UI
│   ├── services/         # Logika bisnis dan integrasi API luar
│   ├── types/            # Definisi Type dan Interface TypeScript
│   ├── utils/            # Fungsi bantuan / helper murni
│   └── index.ts          # Root entry point aplikasi
├── tests/                # Berkas pengujian (unit test & integration test)
│   ├── services/
│   └── utils/
├── .cursorrules          # Aturan AI (opsional jika menggunakan Cursor)
├── package.json
├── tsconfig.json
└── README.md

Dengan pemisahan direktori ini, prompt dapat diarahkan secara spesifik. Contoh: "Buat helper kalkulasi tanggal di src/utils/date.ts dan buat unit test di tests/utils/date.test.ts."

5. Test Run: "Hello World" Pertama Lewat Vibe Prompting

Lakukan verifikasi alur kerja untuk memastikan komunikasi antara editor, linter, test runner, dan AI Assistant berjalan sesuai konfigurasi.

Langkah 1: Inisialisasi Proyek

Buka terminal terintegrasi VS Code (Ctrl+` atau Cmd+`) dan jalankan perintah berikut:

mkdir my-vibe-project
cd my-vibe-project
npm init -y
npm install -D typescript @types/node vitest tsx zod
npx tsc --init

Pastikan file tsconfig.json memiliki konfigurasi "strict": true.

Langkah 2: Eksekusi Vibe Prompt Pertama

Buka panel AI Assistant (Copilot Chat, Cursor Composer, atau Continue) dan masukkan prompt berikut:

Buatkan fungsi TypeScript di file src/utils/greeter.ts yang menerima parameter berupa object dengan properti name (string) dan hour (number, opsional). Gunakan Zod untuk validasi skema input. Fungsi mengembalikan ucapan selamat (pagi/siang/sore/malam) beserta nama. Buat juga unit test lengkap menggunakan Vitest di tests/utils/greeter.test.ts.

Langkah 3: Verifikasi dan Eksekusi Hasil Kode

AI akan menggenerasi kode pada berkas src/utils/greeter.ts:

import { z } from 'zod';

export const GreeterInputSchema = z.object({
  name: z.string().min(1, 'Nama tidak boleh kosong'),
  hour: z.number().min(0).max(23).optional(),
});

export type GreeterInput = z.infer<typeof GreeterInputSchema>;

export function getGreeting(input: GreeterInput): string {
  const validatedInput = GreeterInputSchema.parse(input);
  const currentHour = validatedInput.hour ?? new Date().getHours();

  let timeOfDay = 'pagi';
  if (currentHour >= 12 && currentHour < 15) {
    timeOfDay = 'siang';
  } else if (currentHour >= 15 && currentHour < 18) {
    timeOfDay = 'sore';
  } else if (currentHour >= 18 || currentHour < 5) {
    timeOfDay = 'malam';
  }

  return `Selamat ${timeOfDay}, ${validatedInput.name}!`;
}

Dan berkas unit test pada tests/utils/greeter.test.ts:

import { describe, it, expect } from 'vitest';
import { getGreeting } from '../../src/utils/greeter';

describe('getGreeting', () => {
  it('harus mengembalikan ucapan pagi secara benar', () => {
    const result = getGreeting({ name: 'Budi', hour: 8 });
    expect(result).toBe('Selamat pagi, Budi!');
  });

  it('harus melempar eror jika nama kosong', () => {
    expect(() => getGreeting({ name: '', hour: 10 })).toThrow();
  });
});

Jalankan pengujian di terminal:

npx vitest run

Jika status pengujian menampilkan indikator hijau (pass), lingkungan kerja vibe coding terkonfigurasi dengan benar.

Checklist Kesiapan Lingkungan Kerja Vibe Coding

Verifikasi seluruh item berikut sebelum memulai pengembangan aplikasi skala besar:

  • [ ] Editor (VS Code atau Cursor) terpasang versi terbaru dengan akses CLI aktif.
  • [ ] Ekstensi AI Assistant (Copilot / Continue / Cursor) aktif dan terautentikasi.
  • [ ] Ekstensi pembantu (Error Lens, Prettier, ESLint, Path Intellisense) aktif.
  • [ ] Konfigurasi editor.formatOnSave dan files.autoSave terpasang di settings.json.
  • [ ] File aturan instruksi (.cursorrules atau copilot-instructions.md) tersedia di root proyek.
  • [ ] Struktur direktori terpisah dengan jelas antara src/ dan tests/.
  • [ ] Perintah uji coba unit test berjalan tanpa error di terminal.

Langkah Selanjutnya: Menuju Part 3

Lingkungan kerja terkonfigurasi merupakan separuh langkah dalam alur kerja vibe coding. Namun, efisiensi hasil kode tetap bergantung pada kejelasan instruksi yang diberikan kepada AI.

Pada bagian berikutnya (Belajar Vibe Coding Part 3 dari 10), pembahasan berlanjut ke Teknik Prompt Engineering Khusus Vibe Coding: tata cara mengelola context window, mengisolasi cakupan perubahan kode, serta teknik mengarahkan AI untuk memproduksi kode yang bersih tanpa menyisipkan bug baru.

📖 Artikel Terkait