Toolstools / ide

IDE

What this is

An IDE is the app where learners edit project files, run commands, preview errors, and work with an AI coding assistant.

For Vibe 101, the safest default is Cursor or Antigravity. VS Code is the fallback when the learner only needs a normal editor plus extensions.

Why it matters

The IDE is where the learner moves from planning into building.

If the IDE is confusing, missing extensions, or logged into the wrong account, the session slows down before coding starts. The right setup saves free credits because the learner asks cleaner questions and avoids repeated failed prompts.

What to do

Choose the editor

Choice	Best for	Free/credit note	Watch out
Cursor	Most Vibe 101 students	Has a free entry path and paid Pro trial/options. Check the current Cursor pricing page before class.	AI prompts are easy to overuse if the student asks broad questions.
Antigravity	Students who need agent-style help and browser testing	Google lists Antigravity from `antigravity.google`; public-preview access may change. Check current download/pricing before class.	It may feel more advanced than a first session needs.
VS Code + Copilot	Students who already know VS Code	GitHub Copilot Free currently has monthly limits, including code completions and premium requests.	Extension setup matters; missing extensions create friction.
VS Code only	Very low-friction classroom fallback	Free editor, no AI credits required.	Student must use ChatGPT/Perplexity in browser for AI help.

Install the editor

Download only from the official website: Cursor, Antigravity, or VS Code.
Install the app.
Sign in with the account the learner will use during class.
Import VS Code settings only if the learner already uses VS Code.
Open the project folder, not a parent folder.
Open the integrated terminal.
Run the local project.

Visual checkpoint:

Reference

Editor
  Explorer: project files visible
  Terminal: open at project folder
  AI panel: signed in
  Browser: localhost works

Recommended extensions

Install only what helps the session. Too many extensions make beginner debugging harder.

Extension	Why it helps
Prettier	Formats code so changes are easier to read.
ESLint	Shows common JavaScript/React mistakes early.
GitHub Pull Requests	Helps connect the editor to GitHub when needed.
GitHub Copilot	Useful free/paid AI assistant option inside VS Code-compatible editors.
OpenAI Codex	Useful when the learner has access through their ChatGPT plan.
OpenCode	Open-source coding agent for terminal, desktop, and IDE workflows. Good for learners who want provider choice later.
Qwen Code	Coding agent with its own extension system and VS Code/sidebar work. Good low-cost option to explore after basics.
Kilo Code	VS Code extension for AI-driven code generation and task automation. Useful for agent-style editing inside VS Code.
Tailwind CSS IntelliSense	Helps with Tailwind class suggestions.
Error Lens	Shows errors inline so beginners do not miss them.

For Antigravity or VS Code-compatible agent workflows, open the editor's Extensions panel and search for the exact tool name the class is using, such as Qwen Code or Kilo Code. Install only from the official publisher shown inside the editor marketplace.

Open the right folder

Create the project folder first. Then open that exact folder in the IDE.

If the terminal opens somewhere else, move into the project folder:

Terminal command

cd path/to/project-folder

Check the folder before running project commands:

Terminal command

dir

On Mac, use:

Terminal command

ls

After a project has been created, cloned, or generated, the folder is correct when package.json appears in the file list.

Protect free credits

Use browser ChatGPT/Perplexity for planning before asking the IDE agent to code.

Use IDE AI for:

Explaining the folder structure.
Building one section.
Fixing a pasted error.
Explaining exactly what changed.

Avoid using IDE AI for:

"Build the whole app."
Repeating the same vague prompt.
Asking for features before localhost works.

Use this prompt inside the 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

Use this only after the project files exist.

npm install reads package.json and downloads the project dependencies into node_modules.

npm run dev starts the local development server. Keep this terminal open while checking the browser.

Run:

Terminal command

npm install
npm run dev

Open:

Checkpoint

http://localhost:3000

If the terminal shows an error, do not guess. Paste the real error into AI and ask for one fix.

Common mistakes

Opening the wrong folder.
Using the wrong terminal.
Asking the IDE assistant to build features before setup works.
Not checking localhost.
Installing ten extensions before the first project runs.
Burning free credits on broad prompts.

Next step

Go to GitHub.