279 lines
6.3 KiB
Markdown
279 lines
6.3 KiB
Markdown
# Les 10: Introduction to Cursor
|
|
|
|
---
|
|
|
|
## Hoofdstuk
|
|
**Hoofdstuk 3: Advanced** (Les 10-18)
|
|
|
|
## Beschrijving
|
|
Kennismaking met Cursor - de professionele AI code editor. Leer de core features en ontdek waarom dit de tool is voor serieuze AI-assisted development.
|
|
|
|
---
|
|
|
|
## Te Behandelen
|
|
|
|
### Waarom Cursor?
|
|
|
|
**Tot nu toe gebruikten we:**
|
|
- OpenCode (gratis, goed voor leren)
|
|
- Claude Desktop (voor agents en projects)
|
|
|
|
**Cursor is de volgende stap:**
|
|
- Purpose-built voor AI-assisted coding
|
|
- Professionele editor (gebaseerd op VS Code)
|
|
- Superieure AI integratie
|
|
- Free tier beschikbaar (voldoende voor de cursus)
|
|
|
|
---
|
|
|
|
### Free vs Pro
|
|
|
|
| Aspect | Free Tier | Pro ($20/maand) |
|
|
|--------|-----------|-----------------|
|
|
| Tab completion | ✅ | ✅ |
|
|
| CMD+K edits | Beperkt | Onbeperkt |
|
|
| Chat | Beperkt | Onbeperkt |
|
|
| Composer | Beperkt | Onbeperkt |
|
|
| Models | GPT-4, Claude | Alle modellen |
|
|
|
|
**Voor deze cursus:** Free tier is voldoende!
|
|
|
|
---
|
|
|
|
### Installatie
|
|
|
|
1. Ga naar [cursor.sh](https://cursor.sh)
|
|
2. Download voor jouw OS
|
|
3. Installeer
|
|
4. Open Cursor
|
|
5. Sign in met GitHub
|
|
|
|
**Eerste keer:**
|
|
- Cursor vraagt om settings te importeren van VS Code (optioneel)
|
|
- Accept default keybindings
|
|
|
|
---
|
|
|
|
### Core Features
|
|
|
|
#### 1. Tab Completion
|
|
AI-powered autocomplete die hele blokken code voorspelt.
|
|
|
|
**Hoe het werkt:**
|
|
- Begin met typen
|
|
- Cursor suggereert code in grijs
|
|
- Druk Tab om te accepteren
|
|
- Druk Escape om te negeren
|
|
|
|
**Tip:** Schrijf een comment over wat je wilt, en Tab completion vult de code in.
|
|
|
|
```typescript
|
|
// Function that calculates the total price with tax
|
|
// [Tab completion vult de functie in]
|
|
```
|
|
|
|
#### 2. CMD+K (Inline Editing)
|
|
Selecteer code en vraag AI om het aan te passen.
|
|
|
|
**Hoe het werkt:**
|
|
1. Selecteer code (of zet cursor op een regel)
|
|
2. Druk CMD+K (Mac) of Ctrl+K (Windows)
|
|
3. Typ je instructie
|
|
4. Enter om te genereren
|
|
5. Accept of Reject de wijziging
|
|
|
|
**Voorbeelden:**
|
|
- "Add error handling"
|
|
- "Convert to TypeScript"
|
|
- "Make this responsive"
|
|
- "Add loading state"
|
|
|
|
#### 3. Chat (Sidebar)
|
|
Converseer met AI over je code.
|
|
|
|
**Hoe het werkt:**
|
|
1. CMD+Shift+L opent Chat
|
|
2. Stel je vraag
|
|
3. AI heeft context van je open file
|
|
|
|
**Voorbeelden:**
|
|
- "Explain what this function does"
|
|
- "How can I optimize this?"
|
|
- "What's wrong with this code?"
|
|
|
|
#### 4. @ Mentions
|
|
Refereer naar files, folders, of documentatie.
|
|
|
|
**Syntax:**
|
|
- `@filename.tsx` - specifieke file
|
|
- `@folder/` - hele folder
|
|
- `@Docs` - officiële docs zoeken
|
|
- `@Web` - web zoeken
|
|
|
|
**Voorbeeld:**
|
|
```
|
|
@components/Button.tsx - How can I add a loading prop to this?
|
|
```
|
|
|
|
#### 5. Composer Mode
|
|
Multi-file generatie in één keer.
|
|
|
|
**Hoe het werkt:**
|
|
1. CMD+I opent Composer
|
|
2. Beschrijf wat je wilt bouwen
|
|
3. AI genereert meerdere files tegelijk
|
|
4. Review en accept changes
|
|
|
|
**Wanneer gebruiken:**
|
|
- Nieuwe features met meerdere components
|
|
- Refactoring over meerdere files
|
|
- Boilerplate code genereren
|
|
|
|
---
|
|
|
|
### Workflow Vergelijking
|
|
|
|
| Taak | OpenCode | Cursor |
|
|
|------|----------|--------|
|
|
| Snelle fix | Chat | CMD+K |
|
|
| Nieuwe component | Chat | Tab completion + CMD+K |
|
|
| Multi-file feature | Meerdere chats | Composer |
|
|
| Code uitleg | Chat | Chat + @ mentions |
|
|
| Refactoring | Chat | CMD+K of Composer |
|
|
|
|
---
|
|
|
|
### Tips voor Beginners
|
|
|
|
1. **Start met Tab completion**
|
|
- Gewoon typen en kijken wat er gebeurt
|
|
- Comments zijn je vriend
|
|
|
|
2. **CMD+K voor snelle edits**
|
|
- Selecteer precies wat je wilt aanpassen
|
|
- Wees specifiek in je instructie
|
|
|
|
3. **Chat voor vragen**
|
|
- Als je iets niet begrijpt
|
|
- Als je opties wilt vergelijken
|
|
|
|
4. **@ mentions voor context**
|
|
- AI weet niet automatisch over andere files
|
|
- Voeg relevante files toe met @
|
|
|
|
---
|
|
|
|
### Keyboard Shortcuts Cheat Sheet
|
|
|
|
| Actie | Mac | Windows |
|
|
|-------|-----|---------|
|
|
| Tab completion accept | Tab | Tab |
|
|
| Inline edit | CMD+K | Ctrl+K |
|
|
| Open Chat | CMD+Shift+L | Ctrl+Shift+L |
|
|
| Open Composer | CMD+I | Ctrl+I |
|
|
| Accept suggestion | CMD+Y | Ctrl+Y |
|
|
| Reject suggestion | CMD+N | Ctrl+N |
|
|
|
|
---
|
|
|
|
## Tools
|
|
- Cursor
|
|
- GitHub
|
|
|
|
---
|
|
|
|
## Lesopdracht (2 uur)
|
|
|
|
### Cursor Verkennen
|
|
|
|
**Deel 1: Setup (20 min)**
|
|
|
|
1. Download en installeer Cursor
|
|
2. Sign in met GitHub
|
|
3. Open je Todo app project
|
|
4. Verken de interface
|
|
|
|
**Deel 2: Tab Completion (30 min)**
|
|
|
|
Maak nieuwe file `src/components/LoadingSpinner.tsx`:
|
|
1. Typ comment: `// Loading spinner component with size prop`
|
|
2. Laat Tab completion de rest doen
|
|
3. Itereer met meer comments
|
|
4. Noteer: hoe goed is de completion?
|
|
|
|
**Deel 3: CMD+K Oefenen (30 min)**
|
|
|
|
Open je TodoList component:
|
|
1. Selecteer de list rendering code
|
|
2. CMD+K → "Add loading state with skeleton"
|
|
3. Selecteer een button
|
|
4. CMD+K → "Add disabled state while loading"
|
|
5. Selecteer een function
|
|
6. CMD+K → "Add try-catch with error toast"
|
|
|
|
Noteer wat werkt en wat niet.
|
|
|
|
**Deel 4: Chat + @ Mentions (20 min)**
|
|
|
|
1. Open Chat (CMD+Shift+L)
|
|
2. Vraag: "@TodoList.tsx What could I improve in this component?"
|
|
3. Vraag: "@lib/supabase.ts How do I add real-time subscriptions?"
|
|
4. Probeer @Docs voor Next.js documentatie
|
|
|
|
**Deel 5: Composer Proberen (20 min)**
|
|
|
|
1. Open Composer (CMD+I)
|
|
2. Vraag: "Create a Settings page with dark mode toggle and notification preferences. Use our existing component style."
|
|
3. Review de gegenereerde files
|
|
4. Accept of reject
|
|
|
|
### Deliverable
|
|
- Screenshot van werkende Tab completion
|
|
- 3 voorbeelden van CMD+K edits
|
|
- Notities: wat werkt wel/niet goed
|
|
|
|
---
|
|
|
|
## Huiswerk (2 uur)
|
|
|
|
### Bouw Feature met Cursor
|
|
|
|
**Deel 1: Feature Bouwen (1.5 uur)**
|
|
|
|
Voeg "Due Dates" toe aan je Todo app:
|
|
1. Elk todo kan een due date hebben
|
|
2. Toon due date in de lijst
|
|
3. Sorteer op due date
|
|
4. Markeer overdue items in rood
|
|
|
|
**Gebruik ALLE Cursor features:**
|
|
- Tab completion voor nieuwe code
|
|
- CMD+K voor aanpassingen
|
|
- Chat voor vragen
|
|
- Composer voor multi-file changes
|
|
|
|
**Deel 2: Reflectie (30 min)**
|
|
|
|
Schrijf vergelijking (400 woorden):
|
|
- Cursor vs OpenCode: wat is beter?
|
|
- Welke feature gebruik je het meest?
|
|
- Is free tier voldoende?
|
|
- Ga je overstappen?
|
|
|
|
### Deliverable
|
|
- Werkende Due Dates feature
|
|
- GitHub commit met de changes
|
|
- Reflectie (400 woorden)
|
|
|
|
---
|
|
|
|
## Leerdoelen
|
|
Na deze les kan de student:
|
|
- Cursor installeren en configureren
|
|
- Tab completion effectief gebruiken
|
|
- CMD+K gebruiken voor inline edits
|
|
- Chat gebruiken met @ mentions voor context
|
|
- Composer mode gebruiken voor multi-file generatie
|
|
- Het verschil beoordelen tussen Cursor en OpenCode
|
|
- De juiste Cursor feature kiezen per taak
|