Bab 05

💻 VS Code + Cline: AI di Dalam Editor

Andi sudah paham multi-file. Sekarang dia belajar cara bikin project langsung dari editor — dengan AI yang nulis kode ke file yang benar.

📖 Copy-Paste Mulai Melelahkan

Setelah belajar multi-file di bab 4, Andi udah bisa bikin project yang rapi. Tapi ada satu masalah yang makin lama makin bikin capek: copy-paste dari ChatGPT.

Setiap kali minta kode, Andi harus: buka ChatGPT, salin kode, buka VS Code, buat file baru, paste kode, simpan. Kalau ada 5 file? Ulangi 5 kali. Kalau minta perubahan? ChatGPT kasih semua kode lagi dari awal. Andi harus salin ulang satu per satu.

Untuk project sederhana sih masih oke. Tapi begitu project makin kompleks — landing page dengan HTML, CSS, JS terpisah, belum lagi gambar dan folder — proses copy-paste ini jadi bottleneck besar.

Andi

"Gue udah bisa bikin multi-file project sekarang. Tapi kenapa prosesnya masih ribet banget? ChatGPT kasih kode, gue salin, paste, simpan. Kalau ada revisi, dia kasih semuanya lagi. Ada gak sih cara yang lebih gampang?"

🚀 Dari Chat ke Editor: Level Baru Vibecoding

Di bab 2-3, kamu belajar pakai ChatGPT dan Gemini Canvas. Di bab 4, kamu paham konsep multi-file. Sekarang saatnya naik level: AI yang nulis kode langsung ke file di komputer kamu.

Ini bukan sekadar copy-paste. Ini cara kerja yang benar-benar beda. Bayangkan: kamu bilang ke AI "Buatkan landing page dengan 3 file", dan AI langsung bikin 3 file di folder project kamu. Bukan kasih teks — tapi benar-benar menulis file.

Tool yang bikin ini mungkin? VS Code + Cline.

VS Code = code editor (tempat nulis dan manage kode). Gratis, populer, dipakai jutaan developer.
Cline = ekstensi AI untuk VS Code. Dia jadi asisten coding yang bisa baca project kamu, nulis kode, dan langsung simpan ke file.

Bedanya dengan ChatGPT? ChatGPT kasih kamu teks. Cline kasih kamu file.

📥 Langkah 1: Install VS Code

VS Code (Visual Studio Code) adalah code editor gratis dari Microsoft. Ini adalah editor paling populer di dunia untuk web development. Langkah install-nya gampang banget:

Buka website resmi

Ke code.visualstudio.com di browser. Kamu akan lihat tombol besar "Download".

Download untuk OS kamu

VS Code tersedia untuk Windows, Mac, dan Linux. Klik download sesuai sistem operasi kamu. File installer-nya sekitar 80-100 MB.

Jalankan installer

Buka file yang tadi didownload. Klik "Next" terus, biarkan semua opsi default. Centang "Add to PATH" kalau ditanya. Ini penting supaya VS Code bisa dijalankan dari terminal.

Buka VS Code

Setelah install selesai, buka VS Code. Kamu akan lihat layar selamat datang. Siap dipakai!

Sekarang kamu punya editor profesional yang dipakai developer di seluruh dunia. Langkah selanjutnya: tambahkan AI ke dalamnya.

🔌 Langkah 2: Install Ekstensi Cline

Cline adalah ekstensi AI yang tinggal di sidebar VS Code. Setelah terinstall, kamu bisa ngobrol langsung dengan AI dari dalam editor. AI-nya bisa baca file di project kamu, bikin file baru, dan edit file yang udah ada.

Buka panel ekstensi di VS Code

Klik ikon Extensions di sidebar kiri (ikon kotak-kotak), atau tekan Ctrl+Shift+X.

Cari "Cline"

Di kolom search, ketik Cline. Hasil pertama biasanya ekstensi yang benar. Klik Install.

Konfigurasi API key

Cline butuh API key dari AI provider (misalnya OpenAI, Anthropic, atau yang lain). Ikuti instruksi yang muncul. Kalau belum punya API key, Cline biasanya kasih opsi untuk pakai akun gratis atau trial.

Buka panel Cline

Setelah install, ikon Cline muncul di sidebar. Klik, dan kamu akan lihat chat interface — mirip ChatGPT, tapi langsung di dalam VS Code.

Alternatif lain: Continue — ekstensi AI serupa yang juga populer. Prinsip kerjanya sama: AI nulis kode langsung di editor. Pilih yang mana saja, keduanya bagus.

⚖️ Bedanya VS Code + Cline vs ChatGPT

Ini pertanyaan yang wajar: "Ngapaain install VS Code dan Cline kalau ChatGPT udah bisa bikin kode?"

Jawabannya ada di tabel ini:

Aspek	ChatGPT	VS Code + Cline
Output	Teks di chat. Kamu harus salin manual.	File langsung di project. Sudah tersimpan.
Multi-file	Kasih kode per file, kamu salin satu-satu.	Bikin banyak file sekaligus otomatis.
Revisi	Kasih ulang semua kode. Salin lagi.	Edit file yang tepat. Yang lain gak berubah.
Konteks	Cuma tau apa yang kamu ketik di chat.	Baca semua file di project kamu.
Preview	Kamu harus buka browser sendiri.	Langsung dari folder project. Buka browser, selesai.
Workflow	Chat → Salin → Buka Editor → Paste → Simpan.	Chat → AI tulis ke file. Selesai.

Singkatnya: ChatGPT bagus buat belajar dan bikin kode cepat. Tapi begitu kamu mulai bikin project multi-file yang serius, VS Code + Cline jauh lebih efisien.

🎬 Demo: Andi Bikin Landing Page dalam Sekejap

Sekarang kita lihat gimana workflow Cline di dunia nyata. Andi mau bikin landing page untuk startup temennya, "KerjaYuk" — platform freelance untuk mahasiswa.

Step 1: Buka folder project di VS Code

Andi buat folder kosong di laptop, namanya kerjayuk. Lalu buka di VS Code:

File → Open Folder → pilih folder "kerjayuk"

Sekarang folder kerjayuk terbuka di sidebar VS Code. Masih kosong — belum ada file.

Step 2: Ketik prompt di panel Cline

Andi buka panel Cline di sidebar dan ketik:

Buatkan landing page untuk startup KerjaYuk.
KerjaYuk adalah platform yang menghubungkan UMKM dengan
mahasiswa untuk freelance.

Buat 3 file:
1. index.html - halaman utama dengan hero section, fitur,
   dan CTA
2. style.css - styling modern, warna utama biru dan oranye
3. script.js - animasi scroll sederhana dan form validation

Pastikan desainnya profesional dan mobile-friendly.

Step 3: Cline bekerja

Setelah Andi klik kirim, Cline mulai bekerja. Dia akan:

Menganalisis prompt — memahami apa yang diminta (3 file, landing page, tema startup).
Generate kode — menulis HTML, CSS, dan JavaScript yang saling terhubung.
Minta approval — menunjukkan rencana pembuatan file. Kamu bisa review dulu sebelum approve.
Menulis ke file — setelah di-approve, Cline langsung bikin 3 file di folder project.

Dalam hitungan detik, sidebar VS Code menunjukkan 3 file baru: index.html, style.css, dan script.js. Bukan teks di chat — tapi file sungguhan.

Step 4: Preview hasilnya

Andi klik kanan file index.html di sidebar, pilih "Open with Live Server" (kalau udah install ekstensi Live Server), atau langsung double-click file-nya di File Explorer. Browser terbuka, dan Andi lihat landing page KerjaYuk — lengkap dengan hero section, daftar fitur, dan tombol daftar.

Andi

"Anjir. Gue cuma ketik satu prompt, dan sekarang ada 3 file yang saling nyambung di folder gue. Kalau pakai ChatGPT, gue harus salin 3 kali, paste 3 kali, simpan 3 kali. Ini langsung jadi."

✏️ Minta Perubahan: Cline Edit yang Tepat

Andi lihat hasilnya bagus, tapi ada yang kurang pas. Warna header-nya abu-abu, padahal dia mau biru. Kalau pakai ChatGPT, Andi harus minta ulang semua kode. Dengan Cline? Cukup bilang:

Ubah warna header jadi biru tua. Tambahkan juga
drop shadow pada card di section fitur.

Cline akan:

Membaca file yang relevan — dia tau kalau header ada di index.html dan styling-nya di style.css.
Edit hanya bagian yang perlu diubah — file script.js gak diubah sama sekali karena gak ada hubungannya dengan warna header.
Menunjukkan diff — perubahan ditandai dengan warna (hijau untuk tambahan, merah untuk penghapusan). Kamu bisa review sebelum approve.

Ini bedanya Cline dengan ChatGPT: Cline mengedit, bukan menulis ulang. File lain tetap utuh. Cuma yang kamu minta yang berubah.

🧠 Bagaimana Cline Bisa Tau Semua Ini?

Cline bukan sekadar chatbot yang nempel di VS Code. Dia punya kemampuan khusus yang bikin dia beda:

Baca konteks project — Cline bisa melihat semua file di folder yang kamu buka. Dia tau index.html udah ada, tau CSS-nya apa, tau struktur folder-nya gimana.
Buat dan edit file — Cline punya akses ke file system lewat VS Code. Dia bisa bikin file baru, edit file yang udah ada, bahkan bikin folder.
Eksekusi command — Cline bisa menjalankan terminal command. Mau install package? Jalankan server? Semua bisa dari panel yang sama.
Review sebelum commit — Setiap kali Cline mau bikin perubahan, dia kasih kamu kesempatan untuk review. Kamu bisa approve, reject, atau minta revisi.

Singkatnya: Cline itu AI yang bisa lihat, bisa tulis, dan bisa eksekusi di dalam editor kamu. Dia bukan cuma memberi saran — dia benar-benar bekerja.

💡 Tips Pakai Cline

1. Kasih konteks yang cukup. Jangan cuma bilang "Buatkan website." Jelaskan apa website-nya, untuk siapa, fitur apa saja, warna apa yang kamu mau. Semakin jelas prompt kamu, semakin bagus hasilnya.

2. Review sebelum approve. Cline selalu kasih kamu opsi untuk review perubahan sebelum diterapkan. Pakai fitur ini! Jangan langsung approve semua. Baca apa yang Cline tulis, pastikan sesuai keinginan kamu.

3. Jangan langsung approve semua. Ini penting banget. Kadang Cline bisa bikin perubahan yang gak kamu minta, atau cara dia menyelesaikan masalah kurang optimal. Review itu ada buat alasan.

4. Minta perubahan kecil-kecil. Lebih baik minta 5 perubahan kecil daripada 1 perubahan besar. Hasilnya lebih presisi dan lebih gampang di-review.

5. Bilang kalau ada error. Kalau hasilnya error, kasih tau Cline apa error-nya. Dia bisa baca error message dan benerin kode-nya.

⚠️ Limitasi yang Perlu Kamu Tau

Masih butuh internet. Cline bekerja dengan mengirim request ke AI model lewat internet. Kalau koneksi lambat atau mati, Cline gak bisa dipakai.

Kadang lambat. Tergantung model AI yang dipakai dan server-nya. Kadang respons cepat (detik), kadang lambat (menit). Sabar aja.

Harus review kode yang dihasilkan. AI gak selalu benar. Kadang dia bikin kode yang jalan tapi gak optimal. Kadang ada bug halus. Kamu tetap harus review — minimal cek preview di browser dan tes fitur-fiturnya.

API key = biaya. Sebagian besar AI model yang dipakai Cline butuh API key yang berbayar. Ada free tier, tapi kalau kamu sering pakai, siap-siap top up. Alternatifnya: pakai model gratisan yang disediakan Cline (kualitasnya lebih rendah, tapi cukup buat belajar).

🔄 Workflow Lengkap: Dari Ide ke Website

Ini rangkuman workflow yang Andi pakai setelah menguasai VS Code + Cline:

Buat folder project kosong

Buat folder baru di laptop kamu. Misalnya kerjayuk. Buka di VS Code.

Ketik prompt di Cline

Jelaskan project kamu dengan detail: apa, untuk siapa, fitur apa, desain seperti apa.

Review rencana Cline

Cline akan kasih tahu file apa saja yang mau dia bikin. Baca baik-baik sebelum approve.

Approve dan tunggu

Cline bikin file-file yang diminta. Tunggu sampai selesai.

Preview di browser

Buka index.html di browser. Lihat hasilnya. Apa yang perlu diubah?

Minta perubahan

Bilang ke Cline apa yang kurang pas. Dia edit file yang tepat. Preview lagi. Ulangi sampai puas.

Proses ini jauh lebih cepat dan rapi daripada copy-paste dari ChatGPT. Andi sekarang bisa bikin project lengkap dalam hitungan menit, bukan jam.

🎯 Tapi Masih Ada yang Lebih Powerful...

Andi senang banget. VS Code + Cline udah bikin hidup dia jauh lebih gampang. Tapi suatu hari, Raka bilang sesuatu yang bikin dia penasaran.

Raka

"Cline emang keren, Di. Tapi itu masih level editor. Lo tau gak ada yang namanya AI agent? Dia bisa jalan di terminal, baca seluruh project lo, bikin banyak file sekaligus, bahkan deploy sendiri. Namanya OpenCode."

Andi

"Hah? Deploy sendiri? AI bisa gitu?"

Raka

"Bisa. Dan lo bakal kaget gimana powerful-nya. Tapi itu cerita bab berikutnya."

Andi ngelirik VS Code yang masih terbuka. Cline udah bikin hidupnya lebih gampang. Tapi kalau ada yang lebih powerful... dia mau coba.

← Bab 4: Multi-File Bab 6: OpenCode →