Exercice : Git & VS Code

[github-actions]

Git & VS Code

👋 Salut @lilblueyes ! Bienvenue dans cet exercice interactif.

Tu vas apprendre à travailler avec un dépôt GitHub depuis ton ordinateur et VS Code. Chaque commande et notion sera expliquée avant sa première utilisation.

---

✨ Le cours va te guider là où tu travailles.

Cette page est une Issue, c'est-à-dire un fil de suivi GitHub utilisé pour discuter d'une tâche, d'un problème ou d'un objectif. Dans ce cours, elle sert de journal de progression.

Au début, les premières étapes apparaîtront ici. À chaque étape, le bot vérifie ton action puis publie la suite.

Quand tu ouvriras une pull request, c'est-à-dire l'espace GitHub où l'on propose et relit un changement avant de l'intégrer, la suite apparaîtra directement dans sa conversation. Tu n'auras donc pas à revenir sans cesse dans cette Issue.

Suis simplement les messages du bot au fur et à mesure.

C'est parti !

_{— Mona}

_{Si tu rencontres un problème avec l'exercice, tu peux le signaler ici.}

[github-actions]

Étape 1 : cloner le dépôt et créer ta branche locale

Tu as déjà manipulé des branches et des commits depuis GitHub.com. Maintenant, on passe sur ton ordinateur.

Dépôt distant et dépôt local

Le dépôt que tu vois sur GitHub est le dépôt distant. Avec Git, tu travailles normalement sur une copie complète stockée sur ta machine : le dépôt local.

Le dépôt local possède ses propres fichiers, branches et commits. Il n'est pas synchronisé en permanence avec GitHub : certaines commandes servent à récupérer des changements, d'autres à publier les tiens.

flowchart LR
    A[GitHub<br/>dépôt distant] -->|copier ou récupérer| B[Ordinateur<br/>dépôt local]
    B -->|publier des commits| A

Loading

1. Cloner ta copie du tutoriel

Ouvre un terminal, c'est-à-dire une interface texte dans laquelle tu peux saisir des commandes, dans le dossier où tu ranges tes projets. Puis exécute :

git clone https://github.com/FIPATECH/tutorial-git-vscode-test.git
cd tutorial-git-vscode-test

git clone télécharge les fichiers et l'historique Git.

cd signifie change directory : cette commande demande au terminal de se placer dans le dossier du dépôt que tu viens de cloner. Git configure aussi automatiquement un remote, c'est-à-dire une destination distante associée au dépôt local.

Par convention, le remote principal s'appelle généralement origin.

Vérifie-le :

git remote -v

L'option -v signifie verbose : elle demande à Git d'afficher davantage de détails, ici les URL utilisées pour récupérer et publier les changements.

Tu dois voir des URL qui pointent vers :

FIPATECH/tutorial-git-vscode-test

2. Ouvrir le projet dans VS Code

Si la commande code est disponible :

code .

Dans cette commande, . représente le dossier courant. code . signifie donc « ouvrir le dossier dans lequel je me trouve avec VS Code ».

Sinon, ouvre Visual Studio Code puis File → Open Folder... et sélectionne le dossier tutorial-git-vscode-test.

Ouvre ensuite le terminal intégré de VS Code avec Terminal → New Terminal. À partir de maintenant, tu peux réaliser toutes les commandes du tutoriel directement dans ce terminal.

3. Vérifier ton identité Git

Chaque commit contient un auteur. Ici, l'option --global demande à Git de lire ou modifier la configuration de ton utilisateur sur cet ordinateur, et pas uniquement celle de ce dépôt.

Vérifie la configuration actuelle :

git config --global user.name
git config --global user.email

Si l'une des valeurs est vide ou incorrecte, configure-la :

git config --global user.name "Prénom Nom"
git config --global user.email "ton-adresse@example.com"

Tip

L'adresse utilisée dans un commit peut apparaître dans l'historique du dépôt. GitHub permet d'utiliser une adresse noreply depuis les paramètres Emails de ton compte.

4. Prendre le réflexe git status

Exécute :

git status

git status répond à trois questions essentielles :

• sur quelle branche suis-je ?
• quels fichiers ai-je modifiés ?
• quelles modifications sont préparées pour le prochain commit ?

Quand tu es perdu avec Git, commence par git status.

Vérifie aussi ta branche actuelle :

git branch --show-current

L'option --show-current demande simplement à Git d'afficher le nom de la branche sur laquelle tu te trouves.

Tu dois être sur main.

5. Créer une branche de travail

Dans le club, on évite de travailler directement sur main. Crée une branche dédiée :

git switch -c feature/robot-status

Le préfixe feature/ est ici une convention de nommage : il permet de reconnaître rapidement qu'il s'agit d'une branche créée pour développer une fonctionnalité. Git lui-même n'impose pas ce préfixe.

git switch change de branche et l'option -c signifie ici create : elle crée d'abord la nouvelle branche puis te place dessus.

Puis vérifie :

git status

Enfin, publie la branche sur GitHub :

git push -u origin feature/robot-status

Décomposition :

• git push publie sur GitHub les commits de ta branche locale ;
• origin est le nom du remote GitHub créé automatiquement par git clone ;
• feature/robot-status est le nom de ta branche ;
• -u signifie ici : « associe ma branche locale à cette branche sur GitHub ».

Cette branche distante associée devient la branche amont, appelée upstream branch dans Git. Une fois cette relation enregistrée, Git sait par défaut où envoyer tes prochains git push et depuis quelle branche distante récupérer avec git pull.

Tu peux visualiser cette relation avec :

git branch -vv

Ici, -vv demande un affichage détaillé des branches locales, notamment leur dernier commit et leur branche amont lorsqu'elle existe.

Si tout est correct, la ligne de feature/robot-status contient une indication comme [origin/feature/robot-status].

Important

Utilise exactement le nom feature/robot-status pour cette branche : l'automatisation du tutoriel l'attend.

Dès que la branche apparaît sur GitHub, Mona détecte ton premier push et publie l'étape suivante.

Le push demande une authentification ou échoue ?

Le clone d'un dépôt public ne nécessite pas forcément d'authentification, mais push modifie GitHub et doit donc t'identifier.

Utilise la méthode déjà configurée sur ton ordinateur, typiquement HTTPS ou SSH, deux méthodes permettant à Git de s'authentifier auprès de GitHub. Tu peux aussi utiliser GitHub CLI (gh), l'outil officiel en ligne de commande de GitHub. Si aucune méthode n'est configurée, suis la documentation GitHub sur l'authentification Git avant de continuer.

[github-actions]

Suis les instructions ci-dessus.

Je surveille automatiquement ta progression pour te donner du feedback et afficher la suite. 🧐

[github-actions]

🎉 Bien joué, cette étape est validée !

Je prépare l'étape 2. 🤓

[github-actions]

Étape 2 : comprendre le dossier de travail, la préparation et le commit

Ta branche existe maintenant à la fois sur ton ordinateur et sur GitHub.

On va faire une vraie modification et suivre son trajet jusqu'à l'historique Git.

Les trois zones à comprendre

Git distingue plusieurs états pour tes modifications :

flowchart LR
    A[Dossier de travail<br/>working tree] -->|git add| B[Zone de préparation<br/>staging area]
    B -->|git commit| C[Historique local<br/>commits]
    C -->|git push| D[GitHub<br/>remote origin]

Loading

• le dossier de travail (working tree) correspond aux fichiers tels qu'ils existent actuellement dans ton dossier ;
• la zone de préparation (staging area) contient uniquement les changements sélectionnés pour le prochain commit ;
• un commit enregistre le contenu préparé dans l'historique local ;
• git push publie ensuite ces commits locaux sur GitHub.

Le verbe anglais to stage signifie donc « ajouter un changement à la zone de préparation ».

1. Modifier le fichier dans VS Code

Ouvre :

robot/config.yaml

Remplace :

max_speed: 0.4

par :

max_speed: 0.8

Enregistre le fichier.

Dans VS Code, ouvre le panneau Source Control : c'est l'interface graphique intégrée qui permet de voir et manipuler l'état Git du projet. Tu dois maintenant voir robot/config.yaml dans Changes, c'est-à-dire les changements non encore préparés.

2. Inspecter avant de préparer le commit

Un diff est une vue ligne par ligne de ce qui a changé entre deux états.

Dans le terminal :

git status
git diff

Ici, git diff montre les changements du dossier de travail qui ne sont pas encore dans la zone de préparation.

N'ajoute pas tout aveuglément avec git add . : le point . désigne ici tout le dossier courant. Pour cet exercice, sélectionne précisément le fichier voulu :

git add robot/config.yaml

Puis :

git status
git diff --staged

git diff --staged montre exactement ce qui est dans la zone de préparation et entrera dans le prochain commit.

Dans VS Code, le fichier est maintenant passé de Changes à Staged Changes, c'est-à-dire « changements préparés ». Le terminal et l'interface graphique représentent donc le même état Git.

3. Savoir revenir en arrière

Avant de committer, essaie volontairement de retirer le fichier de la staging area :

git restore --staged robot/config.yaml

Vérifie avec :

git status

Puis ajoute-le de nouveau à la zone de préparation :

git add robot/config.yaml

Cette commande n'annule pas ta modification : elle retire simplement le fichier du prochain commit.

4. Créer le commit

Crée maintenant un commit local. L'option -m permet d'écrire directement le message du commit. Le message suivant est un exemple, pas un mot de passe :

git commit -m "Augmenter la vitesse maximale du robot"

Vérifie immédiatement :

git status
git log -1 --oneline

git log affiche l'historique des commits ; -1 limite l'affichage au dernier commit et --oneline l'affiche sous une forme compacte sur une seule ligne.

À ce stade, ton commit existe sur ton ordinateur, mais pas encore sur GitHub.

C'est une distinction fondamentale :

git commit ≠ git push

Publie-le :

git push

Le bot vérifiera que robot/config.yaml contient bien la nouvelle valeur et que ta branche contient un commit propre à ton travail.

[github-actions]

Suis les instructions ci-dessus.

Je surveille automatiquement ta progression pour te donner du feedback et afficher la suite. 🧐

[github-actions]

🎉 Bien joué, cette étape est validée !

Je prépare l'étape 2. 🤓

[github-actions]

Étape 2 : comprendre le dossier de travail, la préparation et le commit

Ta branche existe maintenant à la fois sur ton ordinateur et sur GitHub.

On va faire une vraie modification et suivre son trajet jusqu'à l'historique Git.

Les trois zones à comprendre

Git distingue plusieurs états pour tes modifications :

flowchart LR
    A[Dossier de travail<br/>working tree] -->|git add| B[Zone de préparation<br/>staging area]
    B -->|git commit| C[Historique local<br/>commits]
    C -->|git push| D[GitHub<br/>remote origin]

Loading

• le dossier de travail (working tree) correspond aux fichiers tels qu'ils existent actuellement dans ton dossier ;
• la zone de préparation (staging area) contient uniquement les changements sélectionnés pour le prochain commit ;
• un commit enregistre le contenu préparé dans l'historique local ;
• git push publie ensuite ces commits locaux sur GitHub.

Le verbe anglais to stage signifie donc « ajouter un changement à la zone de préparation ».

1. Modifier le fichier dans VS Code

Ouvre :

robot/config.yaml

Remplace :

max_speed: 0.4

par :

max_speed: 0.8

Enregistre le fichier.

Dans VS Code, ouvre le panneau Source Control : c'est l'interface graphique intégrée qui permet de voir et manipuler l'état Git du projet. Tu dois maintenant voir robot/config.yaml dans Changes, c'est-à-dire les changements non encore préparés.

2. Inspecter avant de préparer le commit

Un diff est une vue ligne par ligne de ce qui a changé entre deux états.

Dans le terminal :

git status
git diff

Ici, git diff montre les changements du dossier de travail qui ne sont pas encore dans la zone de préparation.

N'ajoute pas tout aveuglément avec git add . : le point . désigne ici tout le dossier courant. Pour cet exercice, sélectionne précisément le fichier voulu :

git add robot/config.yaml

Puis :

git status
git diff --staged

git diff --staged montre exactement ce qui est dans la zone de préparation et entrera dans le prochain commit.

Dans VS Code, le fichier est maintenant passé de Changes à Staged Changes, c'est-à-dire « changements préparés ». Le terminal et l'interface graphique représentent donc le même état Git.

3. Savoir revenir en arrière

Avant de committer, essaie volontairement de retirer le fichier de la staging area :

git restore --staged robot/config.yaml

Vérifie avec :

git status

Puis ajoute-le de nouveau à la zone de préparation :

git add robot/config.yaml

Cette commande n'annule pas ta modification : elle retire simplement le fichier du prochain commit.

4. Créer le commit

Crée maintenant un commit local. L'option -m permet d'écrire directement le message du commit. Le message suivant est un exemple, pas un mot de passe :

git commit -m "Augmenter la vitesse maximale du robot"

Vérifie immédiatement :

git status
git log -1 --oneline

git log affiche l'historique des commits ; -1 limite l'affichage au dernier commit et --oneline l'affiche sous une forme compacte sur une seule ligne.

À ce stade, ton commit existe sur ton ordinateur, mais pas encore sur GitHub.

C'est une distinction fondamentale :

git commit ≠ git push

Publie-le :

git push

Le bot vérifiera que robot/config.yaml contient bien la nouvelle valeur et que ta branche contient un commit propre à ton travail.

[github-actions]

Suis les instructions ci-dessus.

Je surveille automatiquement ta progression pour te donner du feedback et afficher la suite. 🧐

[github-actions]

🎉 Bien joué, cette étape est validée !

Je prépare l'étape 2. 🤓

[github-actions]

Étape 2 : comprendre le dossier de travail, la préparation et le commit

Ta branche existe maintenant à la fois sur ton ordinateur et sur GitHub.

On va faire une vraie modification et suivre son trajet jusqu'à l'historique Git.

Les trois zones à comprendre

Git distingue plusieurs états pour tes modifications :

flowchart LR
    A[Dossier de travail<br/>working tree] -->|git add| B[Zone de préparation<br/>staging area]
    B -->|git commit| C[Historique local<br/>commits]
    C -->|git push| D[GitHub<br/>remote origin]

Loading

• le dossier de travail (working tree) correspond aux fichiers tels qu'ils existent actuellement dans ton dossier ;
• la zone de préparation (staging area) contient uniquement les changements sélectionnés pour le prochain commit ;
• un commit enregistre le contenu préparé dans l'historique local ;
• git push publie ensuite ces commits locaux sur GitHub.

Le verbe anglais to stage signifie donc « ajouter un changement à la zone de préparation ».

1. Modifier le fichier dans VS Code

Ouvre :

robot/config.yaml

Remplace :

max_speed: 0.4

par :

max_speed: 0.8

Enregistre le fichier.

Dans VS Code, ouvre le panneau Source Control : c'est l'interface graphique intégrée qui permet de voir et manipuler l'état Git du projet. Tu dois maintenant voir robot/config.yaml dans Changes, c'est-à-dire les changements non encore préparés.

2. Inspecter avant de préparer le commit

Un diff est une vue ligne par ligne de ce qui a changé entre deux états.

Dans le terminal :

git status
git diff

Ici, git diff montre les changements du dossier de travail qui ne sont pas encore dans la zone de préparation.

N'ajoute pas tout aveuglément avec git add . : le point . désigne ici tout le dossier courant. Pour cet exercice, sélectionne précisément le fichier voulu :

git add robot/config.yaml

Puis :

git status
git diff --staged

git diff --staged montre exactement ce qui est dans la zone de préparation et entrera dans le prochain commit.

Dans VS Code, le fichier est maintenant passé de Changes à Staged Changes, c'est-à-dire « changements préparés ». Le terminal et l'interface graphique représentent donc le même état Git.

3. Savoir revenir en arrière

Avant de committer, essaie volontairement de retirer le fichier de la staging area :

git restore --staged robot/config.yaml

Vérifie avec :

git status

Puis ajoute-le de nouveau à la zone de préparation :

git add robot/config.yaml

Cette commande n'annule pas ta modification : elle retire simplement le fichier du prochain commit.

4. Créer le commit

Crée maintenant un commit local. L'option -m permet d'écrire directement le message du commit. Le message suivant est un exemple, pas un mot de passe :

git commit -m "Augmenter la vitesse maximale du robot"

Vérifie immédiatement :

git status
git log -1 --oneline

git log affiche l'historique des commits ; -1 limite l'affichage au dernier commit et --oneline l'affiche sous une forme compacte sur une seule ligne.

À ce stade, ton commit existe sur ton ordinateur, mais pas encore sur GitHub.

C'est une distinction fondamentale :

git commit ≠ git push

Publie-le :

git push

Le bot vérifiera que robot/config.yaml contient bien la nouvelle valeur et que ta branche contient un commit propre à ton travail.

[github-actions]

Étape 2 validée ✅

Statut	Vérification
✅ Validé	robot/config.yaml contient max_speed: 0.8
✅ Validé	La branche contient au moins un commit propre

[github-actions]

🎉 Bien joué, cette étape est validée !

Je prépare l'étape 3. 🤓

[github-actions]

Étape 3 : lire l'historique, annuler une modification et utiliser Source Control

Tu viens de créer puis pousser un commit. Avant d'en faire un deuxième, apprends à regarder l'historique et à corriger une erreur locale sans paniquer.

1. Explorer l'historique

Dans le terminal :

git log --oneline --graph --decorate --all

Ces options modifient seulement l'affichage :

• --oneline affiche un commit par ligne ;
• --graph dessine les embranchements de l'historique ;
• --decorate affiche les noms de branches et autres références près des commits ;
• --all inclut toutes les références connues, pas seulement la branche courante.

Tu dois voir au minimum :

• main, ta branche principale locale ;
• feature/robot-status, ta branche de travail locale ;
• ton commit récent ;
• des références comme origin/main ou origin/feature/robot-status.

Ces noms qui commencent par origin/ sont des références locales représentant l'état connu des branches sur GitHub. L'étape suivante expliquera précisément leur rôle.

Git utilise aussi le nom spécial HEAD pour désigner l'endroit où tu te trouves actuellement dans l'historique, en pratique le dernier commit de ta branche courante.

Affiche ce commit en détail :

git show HEAD

Dans VS Code, ouvre Source Control puis la vue Graph si elle est disponible. Tu observes le même historique, mais visuellement.

2. Annuler une modification non commitée

Ouvre robot/mission.md et ajoute temporairement une ligne quelconque, par exemple :

TEST TEMPORAIRE

Enregistre puis regarde :

git status
git diff robot/mission.md

Décide finalement de jeter cette modification :

git restore robot/mission.md

Puis :

git status

La modification a disparu.

Warning

git restore sur un fichier modifié remplace son contenu local par la version enregistrée dans Git. Vérifie toujours ce que tu jettes avant de l'utiliser.

3. Comprendre .gitignore

Un fichier .gitignore indique à Git quels fichiers ou dossiers non suivis il doit ignorer. Ils restent sur ton ordinateur mais ne viennent plus polluer git status et ne sont pas ajoutés par erreur à un commit.

Les projets robotiques génèrent souvent beaucoup de fichiers qu'on ne veut pas versionner : dossiers de compilation, caches Python, environnements virtuels, logs, etc.

Ouvre .gitignore dans VS Code et ajoute :

build/
install/
log/
__pycache__/
.venv/

Dans Source Control, ouvre le diff de .gitignore et relis-le.

Cette fois, stage le fichier depuis VS Code avec le bouton + à côté du fichier. Vérifie ensuite dans le terminal que VS Code a bien exécuté l'équivalent d'un git add :

git status
git diff --staged

4. Committer depuis VS Code

Dans Source Control :

1. saisis un message clair, par exemple Ignorer les fichiers générés ;
2. clique sur Commit.

Puis vérifie le résultat dans le terminal :

git log -2 --oneline
git status

Tu viens d'utiliser deux interfaces différentes sur le même Git : le terminal et VS Code.

Publie le deuxième commit :

git push

Mona vérifiera le contenu de .gitignore et que ta branche contient désormais plusieurs commits.

[github-actions]

Étape 2 validée ✅

Statut	Vérification
✅ Validé	robot/config.yaml contient max_speed: 0.8
✅ Validé	robot/config.yaml a été enregistré dans un nouveau commit

[github-actions]

🎉 Bien joué, cette étape est validée !

Je prépare l'étape 3. 🤓