Builder Toolkit · 02 / 11

Setup IDE

Pilih workspace coding, install, buka folder yang betul, dan jaga kredit AI percuma anda.

Setup IDE

Apa ini

IDE ialah app tempat anda buka project, edit file, run command, dan bekerja dengan AI coding assistant.

Untuk kerja KDBM Lite, guna VS Code, Antigravity, Cursor, atau mana-mana workspace yang AI agent-nya boleh baca file project dan run terminal command.

Satu idea utama

IDE ialah satu window yang mengandungi empat benda: file anda, editor anda, terminal anda, dan AI helper anda. Selebihnya hiasan.

Kenapa penting

IDE ialah tempat perancangan bertukar jadi binaan.

Kalau setup salah, session tergendala sebelum satu baris code ditulis. Dua kegagalan yang paling banyak makan masa kelas ialah buka folder yang salah, yang buat setiap command gagal tanpa sebab yang nampak, dan habiskan kredit AI percuma pada prompt kabur dalam sepuluh minit pertama.

Apa nak buat

Pilih editor

Pilihan	Sesuai untuk	Nota kos	Hati-hati
Cursor	Pelajar yang mahu AI terus dalam editor	Ada laluan percuma dan pilihan berbayar. Semak halaman pricing Cursor semasa.	Prompt luas cepat habiskan kredit.
Antigravity	Pelajar yang mahu bantuan gaya agent dan ujian browser	Ada di antigravity.google. Semak ketersediaan semasa.	Boleh terasa lebih advanced daripada keperluan session pertama.
VS Code dengan Copilot	Pelajar yang sudah biasa VS Code	Copilot ada tier percuma dengan had bulanan. Semak halaman GitHub Copilot semasa.	Setup extension penting; yang tertinggal buat kerja jadi susah.
VS Code sahaja	Fallback kelas paling ringan	Editor percuma, tiada kredit AI diperlukan.	Anda guna ChatGPT atau Perplexity dalam browser sebagai ganti.

Semua had dan harga berubah tanpa notis. Semak halaman semasa provider sebelum kelas, jangan percaya mana-mana nombor yang ditulis di sini.

Install

Download hanya dari laman rasmi: Cursor, Antigravity, atau VS Code.
Install dan buka app.
Sign in dengan account yang anda betul-betul akan guna.
Buka folder project anda, bukan folder di atasnya.
Buka integrated terminal.

Buka folder yang betul

Ini penyekat beginner paling biasa, jadi ia dapat langkah sendiri.

Buat folder project dahulu, kemudian buka folder itu sendiri. Kalau terminal nampak macam berada di tempat lain, masuk ke dalamnya:

Terminal command

cd path/to/project-folder

Swipe sideways if a command is long.

Kemudian senaraikan isinya. Di Windows:

Terminal command

dir

Swipe sideways if a command is long.

Di macOS atau Linux:

Terminal command

ls

Swipe sideways if a command is long.

Setelah project wujud, folder itu betul bila anda nampak package.json dalam senarai tersebut.

Buat sekarang

Buka terminal dan run command senarai di atas. Kalau anda tidak nampak package.json, anda berada dalam folder yang salah. Betulkan dahulu sebelum buat apa-apa lagi.

Check sendiri

Files panel saya menunjukkan file project, bukan pane kosong.
Terminal saya terbuka di folder project.
Saya sudah sign in ke AI helper yang saya nak guna.
Run command senarai menunjukkan package.json.

Install extension yang perlu sahaja

Terlalu banyak extension buat debugging beginner jadi lebih susah, bukan senang. Mula dengan ini:

Extension	Kenapa ia membantu
Prettier	Format code supaya perubahan anda senang dibaca.
ESLint	Tunjuk kesilapan JavaScript biasa lebih awal.
Error Lens	Tunjuk error terus dalam baris supaya anda tidak terlepas pandang.
Tailwind CSS IntelliSense	Cadangkan class Tailwind kalau project guna Tailwind.

Install dari publisher rasmi yang ditunjukkan dalam marketplace editor anda. Tambah yang lain kemudian, selepas project pertama berjalan.

Jaga kredit percuma anda

Rancang dalam browser chat. Build dalam IDE. Pembahagian itu sahaja menjimatkan sebahagian besar kredit satu session.

Guna IDE agent untuk kerja sempit: terangkan struktur folder ini, bina satu section ini, baiki error yang saya paste ini, terangkan tepat apa yang anda ubah.

Elakkan guna untuk "bina seluruh app", untuk ulang prompt kabur yang sama, atau untuk tambah feature sebelum project jalan di local.

Kalau terminal tunjuk error

Jangan teka dan jangan run command sama berharap ia berubah. Copy teks error sebenar dan ikut Baca error.

Common mistakes

Buka folder induk dan bukan folder project, kemudian hairan kenapa semua command gagal.
Install sepuluh extension sebelum project pertama berjalan.
Suruh AI agent bina feature sebelum project start di local.
Sign in dengan account berbeza daripada yang ada kredit anda.
Habiskan sepuluh minit pertama kelas pada prompt yang luas.

Next step

Editor sudah sedia. Sekarang fahami apa sebenarnya command itu buat dalam Node dan npm.