ngodingdulu
AI & Vibe CodingKonsepPemula

Asisten AI di Editor: dari Autocomplete sampai Chat

Empat cara asisten AI membantu di editor, kapan memakai masing-masing, dan kebiasaan kecil yang membuat sarannya lebih tepat dan lebih aman diterima.

Oleh Afa Hernandes8 menit baca

Daftar isi

Hampir semua editor kode modern sekarang punya asisten AI, baik bawaan maupun lewat ekstensi. Bentuknya mirip-mirip: saran kode yang muncul sambil kamu mengetik, panel chat di samping, dan perintah untuk mengubah kode yang sedang dipilih. Memasangnya gampang. Yang lebih sulit adalah memakainya supaya kamu benar-benar lebih cepat, bukan malah sibuk memperbaiki saran yang keliru.

Artikel ini membahas empat cara kerja asisten AI di editor, kapan masing-masing cocok, dan kebiasaan yang membuat sarannya lebih tepat. Contohnya memakai JavaScript, tapi prinsipnya berlaku di bahasa apa pun dan di asisten mana pun. Nama dan letak menunya berbeda di tiap produk, jadi artikel ini sengaja membahas polanya, bukan tombolnya.

Sebelum mulai

  • Kamu sudah bisa ngoding dan terbiasa dengan satu editor, misalnya VS Code. Cara menyiapkannya ada di tutorial VS Code dan terminal.
  • Sudah membaca cara kerja LLM, terutama soal context window dan halusinasi. Semua perilaku asisten di bawah berakar dari sana.
  • Contoh kode diuji dengan Node 24 dan test runner bawaan Node (node --test).

Empat cara asisten membantu

Mode Cara kerjanya Cocok untuk
Autocomplete saran abu-abu muncul sambil mengetik, diterima dengan Tab baris berikutnya yang mudah ditebak: pola berulang, boilerplate, melengkapi function kecil
Chat tanya-jawab di panel samping, bisa melampirkan file atau kode yang dipilih memahami kode, mencari penyebab bug, membandingkan pendekatan
Edit inline pilih kode, tulis instruksi singkat, lalu terima atau tolak perubahannya perubahan kecil yang jelas di satu tempat: ganti nama, tambah validasi, ubah format
Mode agen asisten mengubah beberapa file, menjalankan perintah, lalu memeriksa hasilnya fitur yang menyentuh banyak file, dengan cara pengecekan yang jelas

Mode agen di editor pada dasarnya sama dengan agen coding di terminal, yang dibahas lengkap di artikel berikutnya. Di sini kita fokus ke tiga mode pertama, yang paling sering dipakai sehari-hari.

Autocomplete: beri petunjuk sebelum meminta

Autocomplete menebak kode berikutnya dari teks di sekitar kursor, ditambah potongan file lain yang dianggap relevan. Ingat sifat LLM: ia hanya tahu apa yang ada di context. Jadi cara paling efektif untuk mendapat saran yang bagus adalah menulis petunjuknya dulu.

Bandingkan dua cara memulai function ongkos kirim. Cara pertama, hanya menulis nama function:

export function hitungOngkir(subtotal, jarakKm) {

Dari sini, asisten hanya bisa menebak aturan ongkir yang “umum”. Saran yang masuk akal secara bahasa tapi belum tentu sesuai aturan bisnismu, misalnya seperti ini:

ongkir.js (saran yang terlalu sederhana)
export function hitungOngkir(subtotal, jarakKm) {
if (subtotal >= 100000) {
return 0;
}
return jarakKm * 5000;
}

Cara kedua, tulis aturannya dulu sebagai komentar dokumentasi (JSDoc). Komentar ini berguna untuk manusia yang membaca kode, dan sekaligus menjadi context untuk asisten:

ongkir.js
/**
* Hitung ongkos kirim pesanan Kopi Senja.
* - Gratis ongkir kalau subtotal minimal Rp100.000.
* - Selain itu Rp5.000 per km, minimal Rp10.000.
* - Jarak di atas 15 km tidak dilayani: lempar Error.
* @param {number} subtotal dalam rupiah
* @param {number} jarakKm jarak pengantaran dalam km
* @returns {number} ongkir dalam rupiah
*/
export function hitungOngkir(subtotal, jarakKm) {
if (jarakKm > 15) {
throw new Error("Jarak di atas 15 km tidak dilayani");
}
if (subtotal >= 100000) {
return 0;
}
return Math.max(10000, Math.ceil(jarakKm) * 5000);
}

Dengan aturan tertulis, peluang mendapat saran yang benar jauh lebih besar. Petunjuk lain yang juga dibaca asisten:

  • Nama yang jelas. hitungOngkir(subtotal, jarakKm) jauh lebih informatif daripada hitung(a, b).
  • Tipe data. Di TypeScript, tipe parameter dan tipe kembalian adalah petunjuk yang sangat kuat. Lihat TypeScript untuk pemula.
  • File yang terbuka. Banyak asisten mengambil context dari tab yang sedang terbuka. Buka file yang berkaitan, misalnya file test atau file yang berisi tipe datanya, saat menulis kode baru.
  • Contoh pola di file yang sama. Kalau sudah ada satu function dengan gaya tertentu, saran untuk function berikutnya cenderung mengikuti gaya itu.

Satu kebiasaan lagi: terima sebagian saja kalau perlu. Kebanyakan editor bisa menerima saran per kata atau per baris, bukan langsung seluruhnya. Untuk saran yang panjang, terima sedikit demi sedikit sambil membaca.

Pastikan dengan test, bukan dengan mata

Saran pertama di atas terlihat benar sekilas. Masalahnya baru kelihatan kalau diuji. Tulis test yang menggambarkan aturan bisnisnya:

ongkir.test.js
import { test } from "node:test";
import assert from "node:assert/strict";
import { hitungOngkir } from "./ongkir.js";
test("gratis ongkir mulai Rp100.000", () => {
assert.equal(hitungOngkir(100000, 5), 0);
});
test("Rp5.000 per km", () => {
assert.equal(hitungOngkir(50000, 3), 15000);
});
test("minimal Rp10.000", () => {
assert.equal(hitungOngkir(50000, 1), 10000);
});
test("jarak pecahan dibulatkan ke atas", () => {
assert.equal(hitungOngkir(50000, 2.3), 15000);
});
test("di atas 15 km ditolak", () => {
assert.throws(() => hitungOngkir(50000, 16), /tidak dilayani/);
});

Siapkan package.json supaya file memakai import dan bisa diuji dengan npm test:

Terminal
npm init -y
npm pkg set type=module scripts.test="node --test"
npm test

Dengan saran yang terlalu sederhana, hasilnya:

Output (diringkas)
✔ gratis ongkir mulai Rp100.000
✔ Rp5.000 per km
✖ minimal Rp10.000
✖ jarak pecahan dibulatkan ke atas
✖ di atas 15 km ditolak
ℹ pass 2
ℹ fail 3

Tiga dari lima aturan dilanggar: ongkir 1 km jadi Rp5.000 (seharusnya minimal Rp10.000), jarak 2,3 km jadi Rp11.500, dan jarak 16 km tetap dilayani. Tidak ada satu pun error saat kodenya dijalankan biasa. Dengan versi yang mengikuti JSDoc, kelima test lulus (ℹ pass 5).

Polanya bisa kamu pakai setiap hari: tulis aturan dan test-nya dulu, biarkan asisten membantu mengisi implementasinya, lalu jalankan test-nya. Test juga bisa kamu minta dibuatkan oleh asisten, asalkan kamu sendiri yang memeriksa bahwa setiap test benar-benar menggambarkan aturan yang kamu mau.

Chat: lampirkan context, minta penjelasan

Chat di editor paling berguna untuk memahami, bukan hanya untuk meminta kode. Beberapa pertanyaan yang sering memberi hasil bagus:

  • “Jelaskan apa yang dilakukan function ini, baris demi baris.” (pilih kodenya dulu)
  • “Test minimal Rp10.000 gagal dengan output berikut. Apa penyebabnya?” (tempel output test-nya persis)
  • “Ada dua cara menyimpan keranjang belanja: di localStorage atau di server. Apa untung-ruginya untuk aplikasi ini?”
  • “Di file mana fitur login ini diproses?”

Kunci chat yang baik sama dengan autocomplete: context. Lampirkan file yang relevan, tempelkan pesan error persis (bukan “ada error”), dan sebutkan versi library yang kamu pakai. Kalau jawabannya mulai berputar-putar setelah percakapan panjang, mulai chat baru dengan ringkasan singkat. Riwayat yang penuh percobaan gagal justru sering mengganggu.

Satu hal yang perlu diwaspadai: chat bisa menjelaskan dengan yakin hal yang salah. Kalau penjelasannya menyebut function atau opsi yang tidak kamu kenal, cek di dokumentasi resminya sebelum dipakai.

Edit inline: instruksi kecil, perubahan kecil

Edit inline cocok untuk perubahan yang bisa dijelaskan dalam satu kalimat dan terbatas di kode yang kamu pilih:

  • “Tambahkan validasi: lempar Error kalau subtotal negatif.”
  • “Ubah function ini jadi async dan pakai await untuk fetch.”
  • “Ganti nama variabel x jadi jarakKm di seluruh function.”

Editor biasanya menampilkan perubahannya sebagai diff: baris yang dihapus dan ditambahkan, berdampingan. Baca diff-nya sebelum menerima. Perhatikan terutama hal yang tidak kamu minta, seperti baris lain yang ikut berubah, import baru, atau logika yang hilang. Kalau instruksinya mulai butuh lebih dari dua kalimat, itu tanda tugasnya terlalu besar untuk edit inline.

Privasi dan keamanan

Asisten di editor membaca file di proyekmu untuk dijadikan context, dan context itu dikirim ke server penyedia model. Beberapa kebiasaan yang aman:

  • Jangan simpan rahasia di file kode. Taruh di .env, dan cek apakah asistenmu punya pengaturan untuk mengecualikan file tertentu. Selengkapnya di environment variable dan secrets.
  • Cek kebijakan kantor. Banyak perusahaan hanya mengizinkan asisten tertentu, atau mewajibkan pengaturan yang tidak memakai kode untuk melatih model.
  • Saran bisa mengandung pola yang tidak aman, misalnya query SQL yang disusun dengan menyambung teks atau HTML yang disisipkan lewat innerHTML. Kenali polanya lewat SQL injection dan XSS dan CSRF.
  • Waspadai paket yang disarankan. Sebelum memasang paket dari saran AI, pastikan paketnya ada, namanya benar, dan aktif dipelihara.

Memilih asisten

Fitur asisten berubah sangat cepat, jadi daftar perbandingan cepat usang. Pertanyaan yang lebih awet untuk memilih:

  1. Bisa dipakai di editor yang sudah kamu pakai? Pindah editor hanya demi asisten jarang sepadan.
  2. Bagaimana dengan data kodemu? Baca kebijakan privasinya, terutama untuk proyek kantor.
  3. Bagaimana biayanya? Ada yang berlangganan bulanan, ada yang menghitung per pemakaian. Mulai dari paket gratis atau masa coba.
  4. Seberapa bagus untuk bahasa dan framework-mu? Coba di proyekmu sendiri selama seminggu, bukan di contoh demo.

Pertanyaan yang sering diajukan

Apakah autocomplete membuatku malas berpikir?

Bisa, kalau kamu menerima saran tanpa membacanya. Kalau kamu sedang belajar konsep baru, matikan dulu autocomplete-nya dan tulis sendiri. Saran AI paling bermanfaat untuk hal yang sebenarnya sudah kamu pahami tapi malas mengetiknya. Untuk pemula, lihat juga belajar ngoding dengan AI tanpa bergantung.

Kenapa sarannya sering salah di proyekku, padahal di demo bagus?

Biasanya karena context-nya kurang. Di proyek besar, asisten tidak bisa membaca semuanya, sehingga ia menebak nama function, tipe data, atau konvensi proyekmu. Buka file yang relevan, tulis tipe dan komentar yang jelas, dan untuk aturan proyek yang berlaku terus, pakai file aturan yang didukung asistenmu.

Bolehkah memakai kode dari saran AI di proyek komersial?

Umumnya boleh, tapi aturan pastinya bergantung pada syarat layanan asisten yang kamu pakai dan kebijakan perusahaanmu. Beberapa asisten punya pengaturan untuk menyaring saran yang mirip dengan kode publik. Untuk proyek kantor, tanyakan dulu ke tim atau atasanmu.

Kesimpulan

Asisten AI di editor punya empat mode: autocomplete untuk baris yang mudah ditebak, chat untuk memahami, edit inline untuk perubahan kecil yang jelas, dan mode agen untuk tugas lintas file. Semuanya bekerja lebih baik dengan context yang jelas, seperti nama yang deskriptif, tipe data, dan aturan yang ditulis. Semuanya juga perlu dibuktikan dengan test, bukan dengan “kelihatannya benar”.

Langkah berikutnya di jalur Developer + AI: agen coding di terminal, yang tidak hanya menyarankan kode, tapi juga mengerjakan tugas dari awal sampai test-nya lulus.

Bagikan:WhatsAppTelegramXFacebook
Ilustrasi kalimat saya suka kopi diikuti dua kandidat kata berikutnya dengan batang peluang: susu 75 persen dan hitam 25 persen
AIKonsep

Cara Kerja LLM untuk Developer

Kamu tidak perlu paham matematikanya. Cukup lima sifat dasar LLM yang menjelaskan kenapa asisten AI kadang brilian, kadang ngawur dengan percaya diri.

30 Oktober 20269 mnt

Ilustrasi kaca pembesar di samping kode buatan AI yang dibagi menjadi tiga bagian berlabel menyimpan data, menampilkan daftar, dan memeriksa input
AITutorial

Memahami Kode Buatan AI Tanpa Jadi Programmer

Kamu tidak harus bisa menulis kodenya. Tapi kamu harus tahu bagian mana melakukan apa, supaya bisa memberi perintah yang tepat dan curiga saat ada yang aneh.

4 Mei 20266 mnt

Enter bukaEsc tutupHalaman pencarian