Le terminal dans Cursor

Bon retour ! Aujourd'hui tu vas apprendre à utiliser le terminal - une console textuelle pour communiquer avec ton ordinateur.

Qu'est-ce que le terminal ?

Le terminal (ligne de commande, console) est une interface textuelle pour communiquer avec ton ordinateur. Au lieu de cliquer sur des icônes, tu tapes des commandes.

Pourquoi le terminal est-il important ?

• Plus rapide que l'interface graphique (GUI)
• Plus puissant - plus de possibilités
• Automatisation - scripts et outils
• Indispensable pour travailler avec Next.js, npm, git

Ouvrir le terminal dans Cursor

Méthode 1 : Raccourci clavier

• Appuie sur Cmd+** (Mac) ou **Ctrl+ (Windows/Linux)
• Le caractère ` est un accent grave (backtick), situé sous la touche ÉCHAP

Méthode 2 : Menu

• Clique sur Terminal → New Terminal dans le menu du haut

Le terminal s'ouvrira en bas de l'écran de Cursor !

Commandes de base - À connaître absolument

1. pwd - Montre où tu es

1pwd

Sortie : /Users/user/projects

Cela affiche : « Tu es dans le dossier projects »

2. ls - Lister les fichiers

Mac/Linux :

1ls

Windows (Git Bash) :

1ls

Windows (PowerShell) :

1dir

Sortie :

1pirate.html
2ship.js
3treasure.css

3. cd - Changer de dossier

1cd nom_du_dossier

Exemple :

1cd projects

Remonter d'un dossier :

1cd ..

4. mkdir - Créer un dossier

1mkdir nouveau_dossier

Exemple :

1mkdir my_ship

5. touch - Créer un fichier

Mac/Linux :

1touch file.html

Windows (PowerShell) :

1New-Item file.html

Exemple :

1touch index.html

6. clear - Effacer le terminal

1clear

Ou le raccourci : Ctrl+L

Exemple pratique - Créer un projet

Créons un projet « Navire Pirate » en utilisant uniquement le terminal :

1# 1. Vérifier où tu es
2pwd
3
4# 2. Créer le dossier du projet
5mkdir pirate_ship
6
7# 3. Entrer dans le dossier
8cd pirate_ship
9
10# 4. Créer un fichier HTML
11touch index.html
12
13# 5. Créer un fichier CSS
14touch style.css
15
16# 6. Vérifier ce que tu as créé
17ls

Sortie :

1index.html
2style.css

Félicitations ! Tu viens de créer un projet grâce au terminal !

Node.js et npm - Tu dois connaître ça

Quand nous construirons des applications Next.js, tu utiliseras ces commandes :

node - Exécuter du JavaScript

1node --version

Sortie : v20.10.0 (ou une autre version)

Vérifie si Node.js est installé

npm - Node Package Manager

1npm --version

Sortie : 10.2.3 (ou une autre version)

npm est un gestionnaire de paquets - il te permet d'installer des bibliothèques et des outils

Les commandes npm les plus importantes :

1. Installer les paquets :

1npm install

2. Lancer un projet :

1npm run dev

3. Construire un projet :

1npm run build

Tu en apprendras davantage à ce sujet dans le prochain module !

Git - Les bases

Git est un système de contrôle de version - comme un journal de bord des modifications de ton code.

Vérifier l'état :

1git status

Ajouter des fichiers :

1git add .

Commit (enregistrer les modifications) :

1git commit -m "Added pirate page"

Push (envoyer sur le serveur) :

1git push

Tu apprendras Git plus en détail plus tard. Pour l'instant, sache simplement que c'est un outil pour enregistrer l'historique des modifications.

Raccourcis clavier du terminal ⌨

Astuces de pro

1. Autocomplétion (Tab)

Au lieu de taper :

1cd pirate_ship_with_red_flag

Tape :

1cd pir[Tab]

Le terminal complétera automatiquement !

2. Historique des commandes (↑)

Au lieu de retaper la même commande, appuie sur ↑ plusieurs fois pour retrouver une commande précédente.

3. Copier-coller

• Mac : Cmd+C (copier), Cmd+V (coller)
• Windows : Ctrl+Shift+C (copier), Ctrl+Shift+V (coller) dans le terminal

4. Plusieurs terminaux

Tu peux avoir plusieurs terminaux ouverts en même temps :

• Clique sur « + » en haut à droite du panneau du terminal
• Ou utilise Cmd/Ctrl + Shift + `

Erreurs fréquentes et solutions

Erreur : « command not found »

Problème : la commande n'existe pas ou n'est pas installée

Solution :

• Vérifie l'orthographe
• Installe l'outil (par ex. Node.js pour node)

Erreur : « permission denied »

Problème : autorisations insuffisantes

Solution :

• Mac/Linux : ajoute sudo avant la commande (mais fais attention !)
• Windows : exécute le terminal en tant qu'administrateur

Le terminal a « gelé »

Problème : une commande est en cours d'exécution et tu ne peux rien taper de nouveau

Solution :

• Appuie sur Ctrl+C pour interrompre
• Ou ferme le terminal et ouvre-en un nouveau

Exercice pratique

Exécute ces commandes dans le terminal de Cursor :

1# 1. Vérifier la version de Node.js
2node --version
3
4# 2. Vérifier la version de npm
5npm --version
6
7# 3. Vérifier où tu es
8pwd
9
10# 4. Créer un dossier « my_adventures »
11mkdir my_adventures
12
13# 5. Entrer dans le dossier
14cd my_adventures
15
16# 6. Créer un fichier « journal.html »
17touch journal.html
18
19# 7. Voir ce que tu as créé
20ls
21
22# 8. Remonter d'un dossier
23cd ..
24
25# 9. Effacer le terminal
26clear

Si tout a fonctionné - tu es prêt !

Résumé

Le terminal est une interface textuelle vers ton ordinateur pwd - où tu es ls/dir - ce qu'il y a dans le dossier cd - changer de dossier mkdir - nouveau dossier touch - nouveau fichier clear - effacer l'écran ↑ - commande précédente Tab - autocomplétion

Le terminal peut sembler intimidant, mais il est incroyablement puissant. Avec le temps, il deviendra ton meilleur outil !

Dans les prochains modules, tu utiliseras le terminal pour :

• Créer des projets Next.js
• Installer des bibliothèques
• Lancer des applications
• Déployer sur Vercel

Tu te rapproches de plus en plus du vrai pirate-programmeur !

Capitaine Barbe-Rouge, terminé.

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <title>Terminal Pirate</title>
6    <style>
7        body {
8            background-color: #000;
9            color: #0f0;
10            font-family: 'Courier New', monospace;
11            padding: 20px;
12        }
13        .terminal {
14            background-color: #1a1a1a;
15            border: 2px solid #0f0;
16            padding: 15px;
17            border-radius: 5px;
18        }
19        .command {
20            color: #00ff00;
21            margin: 10px 0;
22        }
23        .output {
24            color: #ffffff;
25            margin-left: 20px;
26        }
27    </style>
28</head>
29<body>
30    <h1>Le terminal du Capitaine Barbe-Rouge</h1>
31
32    <div class="terminal">
33        <div class="command">$ pwd</div>
34        <div class="output">/home/captain/ship</div>
35
36        <div class="command">$ ls</div>
37        <div class="output">treasure_map.txt  journal.log  compass.json</div>
38
39        <div class="command">$ cat treasure_map.txt</div>
40        <div class="output">Trésor enterré sur l'île X : 100 pas au nord du palmier !</div>
41    </div>
42
43    <p>Voilà à quoi ressemble un vrai terminal !</p>
44</body>
45</html>