# Les 3 — Lesstof
## Cursor — AI-Powered Code Editor

**Vak:** AI Fundamentals
**Vorige les:** Les 2 — OpenCode
**Volgende les:** Les 4 — TypeScript Fundamentals

---

## Inhoud

1. [Wat is Cursor](#1-wat-is-cursor)
2. [Setup + eerste keer opstarten](#2-setup--eerste-keer-opstarten)
3. [De vier kern-features](#3-de-vier-kern-features)
4. [Chat (Cmd+L)](#4-chat-cmdl)
5. [Inline Edit (Cmd+K)](#5-inline-edit-cmdk)
6. [Composer / Agent (Cmd+I)](#6-composer--agent-cmdi)
7. [Tab — predictive completion](#7-tab--predictive-completion)
8. [@-mentions — context erbij halen](#8--mentions--context-erbij-halen)
9. [.cursorrules — project-context](#9-cursorrules--project-context)
10. [Debug-flow met AI](#10-debug-flow-met-ai)
11. [Wanneer Cursor vs Console](#11-wanneer-cursor-vs-console)

---

## 1. Wat is Cursor

**Cursor** is een AI-first code editor — een fork van VS Code met AI-features verweven in elk onderdeel. Geen plugin, geen sidebar — AI is overal: tab-completion, chat, inline edit, agent mode.

### Waarom Cursor?

- Vertrouwde VS Code interface (alle extensies werken)
- AI features die écht in je workflow zitten
- Multi-file edits met diff-preview
- Background Agents (later in de leerlijn — Les 15)
- Werkt met OpenAI, Anthropic, of eigen API keys

### Cost

- **Hobby (gratis)** — limited, Tab completion, basic chat
- **Pro ($20/maand)** — alles, onbeperkt, Background Agents
- **Business** — teams, SSO, audit

Voor deze leerlijn: Pro aanrader. Hobby werkt voor leren maar je raakt rate-limits.

---

## 2. Setup + eerste keer opstarten

### Installatie

Download van cursor.com — installeer net als VS Code.

### Eerste opstarten

1. Sign in met email of GitHub
2. Cursor vraagt: "Import VS Code settings?" — Ja
3. Kies thema, snelkoppelingen
4. Opt-in op AI training of opt-out (privacy keuze)

### Model kiezen

Settings → Models. Defaults:
- Cursor Auto (default — Cursor kiest beste model)
- Claude Sonnet 4.6 (default voor code)
- GPT-5 (alternatief)
- o3 (reasoning — trager maar slimmer)

Vuistregel: Sonnet voor 90%, o3 voor complex.

### Een project openen

Twee opties:
- File → Open Folder (zoals VS Code)
- Terminal: `cursor .` in je project-folder

---

## 3. De vier kern-features

Cursor heeft veel features. Vier die je dagelijks gebruikt:

| Feature | Shortcut | Wanneer |
|---------|----------|---------|
| **Tab** | (auto) | Voltooi-suggesties tijdens typen |
| **Inline Edit** | `Cmd+K` | Korte edit op selectie of cursor-positie |
| **Chat** | `Cmd+L` | Vragen stellen, code uitleggen |
| **Composer/Agent** | `Cmd+I` | Multi-file edits, refactors |

Deze leren = 80% van Cursor's waarde gebruiken.

---

## 4. Chat (Cmd+L)

**Wat:** sidebar-chat. Type vraag, krijg antwoord. Net als ChatGPT maar mét je code als context.

### Wanneer

- Code uitleggen ("wat doet deze functie?")
- Algemene vragen tijdens coden ("hoe gebruik je useMemo?")
- Debug-hulp ("waarom werkt dit niet?")

### Context erbij

- `@filename` — voeg specifieke file toe als context
- `@Codebase` — hele repo (gebruikt embeddings)
- `@Web` — search het web
- `@Docs` — geïmporteerde documentatie
- Sleep een file naar chat — toegevoegd als context

### Agent-mode binnen Chat

Switch knop bovenaan: Ask | Agent. Met Agent mode kan Chat ook files bewerken — vergelijkbaar met Composer.

---

## 5. Inline Edit (Cmd+K)

**Wat:** edit-popup op je cursor-positie. Beschrijf wat je wilt, AI past selectie of nieuwe code aan.

### Voorbeelden

Selecteer een functie + `Cmd+K`:
> "Voeg error handling toe"

AI past selectie aan, diff zichtbaar, accept/reject.

Lege regel + `Cmd+K`:
> "Genereer een TypeScript interface voor een User met name, email, role"

AI inserts code.

### Wanneer

- Snelle wijziging op één plek
- Code generaten tussen bestaande regels
- Selectie aanpassen

Voor multi-file edits → Composer.

---

## 6. Composer / Agent (Cmd+I)

**Wat:** de zwaarste AI-feature. Multi-file edits met preview van alle diffs.

### Voorbeeld

`Cmd+I` opent Composer panel:

> "Voeg een /about pagina toe met team-leden in een grid. Match styling van homepage. Gebruik Tailwind. Maak een aparte component voor team-member."

Composer:
1. Leest `app/page.tsx` voor stijl
2. Maakt `app/about/page.tsx`
3. Maakt `components/TeamMember.tsx`
4. Toont alle diffs

Jij accepteert per file of "Accept All".

### Wanneer

- Nieuwe features (multi-file)
- Refactors
- Bugfixes die meerdere files raken

### Terminal commands

Composer kan ook terminal-commands runnen — vraagt approval. "Run pnpm install" → Composer doet het.

---

## 7. Tab — predictive completion

Cursor's Tab-completion ziet **wat je gaat typen voordat je 't typt**. Vergelijkbaar met GitHub Copilot maar slimmer (gebruikt je hele file + recent edits).

### Hoe gebruiken

- Type — suggesties verschijnen grijs
- `Tab` — accepteer
- `Esc` — afwijzen

### Cursor Tab vs Copilot

Cursor Tab kan:
- Multi-line suggesties (hele functie ineens)
- Cursor verplaatsen naar volgende edit-locatie (handig bij refactors)
- Suggesties op basis van wat je net hebt geschreven elders

Verschil voelbaar na een dag gebruik.

### Wanneer uitzetten

Soms ga je sneller zonder. Cmd+Shift+P → "Cursor Tab" → toggle.

---

## 8. @-mentions — context erbij halen

`@` in chat of Composer = context kiezen.

### Soorten

| Mention | Wat | Voorbeeld |
|---------|-----|-----------|
| `@File` | Specifieke file | `@app/page.tsx` |
| `@Folder` | Hele folder | `@components/` |
| `@Codebase` | Repo via embeddings | `@Codebase` |
| `@Docs` | Geïmporteerde docs | `@Next.js` |
| `@Web` | Web search | `@Web "Next.js 16 caching"` |
| `@Git` | Recent commits | `@Git` |
| `@Definitions` | Symbols | `@Definitions:UserController` |

### Goede prompts

Zonder mentions: AI gokt welke files relevant zijn (langzamer, soms fout).
Met mentions: AI heeft exact wat 't nodig heeft.

```
@app/api/auth/route.ts @lib/supabase.ts

Voeg een endpoint toe /api/user dat de logged-in user returnt.
Gebruik supabase auth.getUser().
```

---

## 9. .cursorrules — project-context

**`.cursorrules`** = markdown-file in project-root die Cursor leest bij elke prompt. Net als AGENTS.md in Les 2.

### Voorbeeld

```markdown
# Cursor Rules — QuickPoll

## Stack
- Next.js 16 App Router
- TypeScript strict mode
- Tailwind v4
- Supabase (DB + Auth)

## Conventies
- Server Components default, "use client" alleen waar nodig
- Tailwind classes inline, geen CSS-files
- Geen comments tenzij gevraagd
- Volg bestaande naming (camelCase functions, PascalCase components)
- Throw geen errors uit RSCs — return { error } object

## Verboden
- Gebruik geen Next.js Pages Router (alleen App Router)
- Geen any-types in TypeScript
- Geen inline styles
```

### Effect

AI checkt deze rules bij elke prompt. "Maak een Server Component" wordt automatisch "use client"-vrij. "Voeg comment toe" wordt overgeslagen.

### Beperkingen

- Cursor's parsing is niet 100% strikt — soms vergeet AI rules
- Hou 'm tussen 30-200 regels (te lang = vergeten)
- Test of rules echt werken — soms moet je expliciet refereren

---

## 10. Debug-flow met AI

### Pattern 1 — Console error

Console error → kopieer → in chat plakken:

```
TypeError: Cannot read property 'name' of undefined
  at UserCard (components/UserCard.tsx:12)
```

AI: leest UserCard.tsx, vindt waar `name` undefined kan zijn, suggereert fix.

### Pattern 2 — Onverwachte output

```
Mijn fetchData() returnt undefined ipv users. Hier is de code:

@lib/api.ts

Wat gaat er mis?
```

AI: leest code, identificeert (vaak) async/await issue of missende return.

### Pattern 3 — Tests falen

Run test → copy output → chat:

```
Test "should return user list" faalt:
Expected: Array(3)
Received: undefined

@__tests__/api.test.ts
@lib/api.ts
```

AI: traceert, fixt.

### Pattern 4 — Refactor

```
Refactor @app/api/users/route.ts naar gebruik van Supabase
in plaats van mock-data.

Gebruik @lib/supabase.ts voor de client.
```

Composer doet multi-file edit.

---

## 11. Wanneer Cursor vs Console

Cursor is geweldig maar niet altijd het antwoord.

### Cursor wel

- Code schrijven, refactoren, debuggen
- Nieuwe features
- Boilerplate
- Documentatie

### Cursor niet

- Git workflow (gebruik gewoon `git`)
- File-management buiten project (Finder/Explorer)
- Terminal-heavy taken (gewone shell)
- Browser debuggen (DevTools)
- Een quick lookup (ChatGPT/browser)

### Hybride

Veel pro devs: **Cursor voor IDE-werk, Claude.ai voor brainstormen, Terminal voor git**. Gebruik niet één tool voor alles.

---

## Bronnen

- **Cursor docs:** https://docs.cursor.com
- **Cursor Tab features:** https://docs.cursor.com/tab
- **Cursor Composer:** https://docs.cursor.com/composer
- **.cursorrules examples:** https://github.com/PatrickJS/awesome-cursorrules
- **Cursor changelog:** https://www.cursor.com/changelog
- **Cursor forum (community):** https://forum.cursor.com