Toolstools / ide

IDE

Apa ini

IDE ialah app tempat pelajar edit project files, jalankan command, lihat error, dan bekerja dengan AI coding assistant.

Untuk Vibe 101, default paling selamat ialah Cursor atau Antigravity. VS Code menjadi fallback bila pelajar cuma perlukan editor biasa dengan extensions.

Kenapa penting

IDE ialah tempat pelajar bergerak daripada planning kepada building sebenar.

Kalau IDE mengelirukan, extension tidak ada, atau login account salah, session akan jadi perlahan sebelum coding bermula. Setup yang betul jimat kredit AI kerana pelajar boleh tanya prompt yang lebih jelas.

Apa nak buat

Pilih editor

Choice	Sesuai untuk	Nota kredit	Perlu jaga
Cursor	Kebanyakan pelajar Vibe 101	Ada pilihan percuma dan pilihan berbayar. Semak pricing page semasa sebelum kelas.	Prompt AI cepat habis kalau soalan terlalu luas.
Antigravity	Pelajar yang perlukan agent-style help dan browser testing	Google list Antigravity di `antigravity.google`; akses public preview boleh berubah.	Mungkin terlalu advanced untuk kelas pertama.
VS Code + Copilot	Pelajar yang memang biasa VS Code	Copilot Free ada monthly limits untuk completions dan premium requests.	Extension setup kena betul.
VS Code sahaja	Fallback paling simple	Editor percuma, tiada kredit AI diperlukan.	Pelajar guna ChatGPT/Perplexity dalam browser untuk bantuan AI.

Install editor

Download dari official website sahaja: Cursor, Antigravity, atau VS Code.
Install app.
Sign in dengan account yang pelajar akan guna dalam kelas.
Import VS Code settings hanya kalau pelajar sudah biasa VS Code.
Buka project folder, bukan parent folder.
Buka integrated terminal.
Jalankan local project.

Visual checkpoint:

Reference

Editor
  Explorer: project files nampak
  Terminal: buka dalam project folder
  AI panel: sudah sign in
  Browser: localhost jalan

Extension yang disarankan

Install extension yang membantu session sahaja. Terlalu banyak extension buat debugging lebih susah untuk beginner.

Extension	Kenapa berguna
Prettier	Format code supaya mudah dibaca.
ESLint	Tunjuk JavaScript/React mistake lebih awal.
GitHub Pull Requests	Bantu sambungkan editor dengan GitHub bila perlu.
GitHub Copilot	Pilihan AI assistant dalam VS Code-compatible editors.
OpenAI Codex	Berguna kalau pelajar ada access melalui ChatGPT plan.
OpenCode	Open-source coding agent untuk terminal, desktop, dan IDE workflow. Bagus bila pelajar mahu pilihan provider kemudian.
Qwen Code	Coding agent dengan extension system sendiri dan VS Code/sidebar workflow. Pilihan kos rendah untuk explore selepas asas.
Kilo Code	VS Code extension untuk AI code generation dan task automation. Berguna untuk agent-style editing dalam VS Code.
Tailwind CSS IntelliSense	Bantu suggestion Tailwind class.
Error Lens	Tunjuk error inline supaya beginner tidak terlepas pandang.

Untuk Antigravity atau VS Code-compatible agent workflow, buka Extensions panel dalam editor dan search nama tool tepat yang kelas guna, contoh Qwen Code atau Kilo Code. Install hanya daripada official publisher yang muncul dalam editor marketplace.

Buka folder yang betul

Buat project folder dulu. Selepas itu, buka folder yang tepat dalam IDE.

Kalau terminal buka dekat tempat lain, masuk ke project folder:

Terminal command

cd path/to/project-folder

Semak folder sebelum jalankan project command:

Terminal command

dir

Di Mac, guna:

Terminal command

ls

Selepas project sudah dibuat, clone, atau generated, folder yang betul akan tunjuk package.json dalam senarai files.

Jaga kredit AI

Guna ChatGPT/Perplexity dalam browser untuk planning sebelum minta IDE agent menulis code.

Guna IDE AI untuk:

Explain folder structure.
Bina satu section.
Betulkan error yang dipaste.
Explain exactly what changed.

Elakkan IDE AI untuk:

"Build the whole app."
Ulang prompt yang terlalu vague.
Minta feature sebelum localhost berjalan.

Prompt dalam IDE:

Copy prompt

You are my coding assistant.

We are building this project:
[paste project brief]

Rules:
- beginner friendly
- small steps only
- explain everything

Start with:
1. setup
2. folder structure
3. run localhost

Do NOT build features yet.

First run checklist

Guna ini hanya selepas project files wujud.

npm install baca package.json dan download dependency project ke dalam node_modules.

npm run dev start local development server. Biarkan terminal ini terbuka semasa check browser.

Run:

Terminal command

npm install
npm run dev

Buka:

Checkpoint

http://localhost:3000

Kalau terminal tunjuk error, jangan teka. Paste error sebenar ke AI dan minta satu fix.

Mistake biasa

Buka folder yang salah.
Guna terminal yang salah.
Suruh IDE assistant bina feature sebelum setup berjalan.
Tak check localhost.
Install terlalu banyak extension sebelum project jalan.
Habiskan kredit AI terlalu cepat dengan prompt yang terlalu luas.

Next step

Pergi ke GitHub.