Ohé ! Bienvenue à bord !

Bienvenue ! Je suis le Capitaine Barbe-Rouge et je serai ton guide dans l'aventure de l'apprentissage du code. Aujourd'hui je vais te montrer Cursor - un éditeur de code moderne avec une intelligence artificielle intégrée.

Qu'est-ce que Cursor ?

Cursor est un éditeur de code doté d'une IA intégrée qui t'aide à écrire du code plus vite et plus efficacement. Contrairement aux éditeurs traditionnels, Cursor possède une intelligence artificielle intégrée (Claude 3.5 Sonnet, GPT-4) qui :

Écrit du code - tu décris ce que tu veux, l'IA génère le code Explique - tu ne comprends pas quelque chose ? Demande à l'IA Débogue - tu as une erreur ? L'IA t'aidera à la corriger Suggère - l'IA te propose la suite à écrire

Grâce à cela, tu apprends plus vite et tu crées plus efficacement.

Cursor vs VS Code

VS Code (Visual Studio Code) est l'éditeur de code le plus populaire au monde - gratuit, open-source, utilisé par des millions de développeurs.

Cursor est construit PAR-DESSUS VS Code, donc :

• Il a une apparence presque identique
• Il a les mêmes raccourcis clavier
• Il prend en charge les mêmes extensions
• EN PLUS : une IA intégrée (Claude 3.5 Sonnet, GPT-4)

Si tu connais VS Code - tu te sentiras tout de suite chez toi. Si tu ne le connais pas - pas d'inquiétude, je vais tout te montrer depuis le début.

Installer Cursor - Étape par étape

Nous allons maintenant installer Cursor. Cela prendra environ 5 minutes.

Étape 1 : Télécharger Cursor

1. Va sur : https://cursor.sh
2. Clique sur le gros bouton « Download »
3. Choisis ta plateforme :
   • Windows - télécharge un installateur .exe
   • Mac - télécharge un installateur .dmg
   • Linux - télécharge un .AppImage ou un .deb

Étape 2 : Installer

Windows :

1. Double-clique sur le fichier CursorSetup.exe téléchargé
2. Clique sur « Oui » si Windows demande des autorisations
3. Attends environ 30 secondes pour l'installation
4. Cursor s'ouvrira automatiquement

Mac :

1. Double-clique sur Cursor.dmg
2. Fais glisser l'icône de Cursor dans le dossier Applications
3. Ouvre Cursor depuis le Launchpad ou les Applications
4. Clique sur « Ouvrir » si le Mac pose une question de sécurité

Linux :

1# Pour le .AppImage
2chmod +x Cursor.AppImage
3./Cursor.AppImage
4
5# Pour le .deb (Ubuntu/Debian)
6sudo dpkg -i cursor_*.deb

Étape 3 : Premier lancement

Quand Cursor s'ouvre pour la première fois, tu verras :

1. L'écran de bienvenue - la page d'accueil
2. « Sign In » - se connecter (via GitHub ou par e-mail)
3. Choisir ton offre :
   • Free - 2000 complétions IA/mois (largement suffisant pour apprendre !)
   • Pro (20 $/mois) - IA illimitée (pour les professionnels)

Choisis Free - c'est plus que suffisant pour commencer !

Étape 4 : Importer les paramètres (facultatif)

Si tu as déjà utilisé VS Code, Cursor te demandera :

• « Import settings from VS Code? »
• Clique sur « Yes » - cela transférera tes paramètres, tes raccourcis, tes extensions

Si c'est ton premier éditeur - clique sur « Skip ».

L'interface de Cursor - Qu'y a-t-il et où ?

Ouvre Cursor et regarde :

1┌─────────────────────────────────────────────────────────┐
2│  File  Edit  View  ...                    [Cursor logo] │ <- Barre de menu
3├───────┬─────────────────────────────────┬───────────────┤
4│       │                                 │               │
5│       │                                 │   CHAT IA     │
6│ FILES │        EDITOR                   │               │
7│       │      (tu écris ton code ici)    │   (Cmd+L)     │
8│       │                                 │               │
9│       │                                 │               │
10├───────┴─────────────────────────────────┴───────────────┤
11│               TERMINAL (tu tapes les commandes ici)     │
12└─────────────────────────────────────────────────────────┘

Panneau de gauche - FILES (Explorateur)

• Liste de tous les fichiers du projet
• Création de nouveaux fichiers/dossiers
• Navigation dans le projet

Centre - EDITOR

• C'est ici que tu écris le code
• Tu peux avoir plusieurs onglets ouverts
• Coloration syntaxique (mise en couleur du code)

Panneau de droite - CHAT IA

• Conversation avec l'IA
• Poser des questions
• Générer du code
• Ouvre-le avec : Cmd+L (Mac) / Ctrl+L (Windows/Linux)

Panneau du bas - TERMINAL

• Tape les commandes ici (npm, git, etc.)
• Ouvre-le avec : Cmd+** ou **Ctrl+

Ta première conversation avec l'IA

Il est temps de tester la magie de Cursor !

1. Ouvre le Chat IA : Cmd/Ctrl + L
2. Tape :

1Explique en termes simples : qu'est-ce que le HTML ?

3. Appuie sur Entrée
4. Regarde l'IA répondre !

L'IA devrait te donner une réponse simple. Tu peux poser des questions de suivi :

1Et qu'est-ce que le CSS ?

1Quelle est la différence entre le HTML et le JavaScript ?

Félicitations ! Tu viens d'avoir ta première conversation avec l'IA dans Cursor !

Comment parler efficacement à l'IA ?

L'IA est intelligente, mais elle ne peut pas lire dans les pensées. Tu dois communiquer clairement ce que tu veux.

MAUVAIS (trop vague) :

1fais-moi un site web

L'IA ne sait pas :

• Quel type de site web ?
• Sur quel sujet ?
• Quelles couleurs ?
• Quelles sections ?

BON (précis) :

1Crée une page HTML simple avec :
2- Un titre « Ohé les Pirates ! »
3- Un fond noir
4- Un texte rouge
5- Une image de pirate
6- Un bouton « Rejoindre l'équipage »

L'IA sait exactement quoi faire !

Règles pour de bons prompts :

1. Sois précis - plus il y a de détails, mieux c'est
2. Décris l'objectif - pourquoi fais-tu cela ?
3. Donne des exemples - « comme sur le site X »
4. Itère - la première réponse de l'IA n'est pas la fin, continue à peaufiner !

Raccourcis clavier - Antisèche ⌨

Mémorise ces 5 raccourcis les plus importants :

Imprime cette liste et colle-la à côté de ton écran !

Résumé - Qu'as-tu appris aujourd'hui ?

Ce qu'est Cursor et pourquoi nous l'utilisons Comment installer Cursor À quoi ressemble l'interface de Cursor Comment parler à l'IA (Cmd+L) Comment écrire de bons prompts Les raccourcis clavier les plus importants

Félicitations, jeune pirate ! Nous sommes montés à bord du navire et avons rencontré notre arme secrète - Cursor !

Dans le prochain exercice, tu apprendras à utiliser Ctrl+K - la baguette magique pour éditer le code !

Prépare-toi, car une aventure passionnante nous attend !

Capitaine Barbe-Rouge, terminé.

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <title>Ohé les Pirates !</title>
6    <style>
7        body {
8            background-color: #000;
9            color: #fff;
10            font-family: Arial, sans-serif;
11            padding: 20px;
12        }
13        h1 {
14            color: #dc2626;
15            border: 2px solid #f59e0b;
16            padding: 10px;
17        }
18    </style>
19</head>
20<body>
21    <h1>Ohé les Pirates !</h1>
22    <p>Bienvenue à bord du Black Pearl du Code !</p>
23    <p>Expérimente avec ce code - change le texte, les couleurs, ajoute quelque chose de ton cru !</p>
24</body>
25</html>