TP11 : Intégration Git dans VSCodium et débogage

Intégration Git (Source Control)¶

Maintenant, nous allons voir comment Git est intégré dans l’interface de VSCodium. Les IDEs avec intégration Git fonctionnent souvent de façon similaire.

init¶

Votre dépôt est déjà un dépôt Git, donc il n’y a pas besoin de l’initialiser.

Pour initialiser un nouveau dépôt, il suffit de cliquer sur l’onglet Source Control dans la barre latérale à gauche, puis sur Initialize Repository.

clone¶

Vous n’avez pas besoin de recloner votre dépôt.

Pour cloner un dépôt, vous pouvez sélectionner View > Command Palette (raccourci F1 ou Ctrl + Shift + P), puis taper clone, choisir l’option Git: Clone et entrer l’adresse du dépôt (avec le PAT par exemple).

status¶

Vous pouvez voir le statut de votre dépôt dans Source Control, dans Explorer, dans l’éditeur, ainsi que dans l’onglet Source Control.

Par exemple :

• Quand vous ajoutez un nouveau fichier, un U apparaît à côté de son nom pour indiquer Untracked.

• Quand vous modifiez un fichier qui a déjà été suivi (git add), un M apparaît à côté de son nom pour indiquer Modified.

• Les changements qui ne sont pas encore suivis apparaissent dans la section Changes de l’onglet Source Control de la barre latérale à gauche.

add¶

Vous pouvez ajouter un changement de Changes à la Staging Area dans Source Control en cliquant sur + à côté du changement, ou ajouter tous les changements en cliquant sur + à côté de Changes.

rm¶

Vous pouvez supprimer un fichier dans Explorer, puis ajouter ce changement depuis Changes dans Source Control.

restore¶

Pour ne plus suivre un changement (Unstage Changes), vous pouvez cliquer sur - à côté d’un changement suivi.

Pour supprimer les nouveaux changements non suivis dans un fichier, vous pouvez cliquer sur la flèche à gauche du +, indiquant Discard Changes.

commit¶

Dans la boîte Message en haut de Source Control, vous pouvez écrire votre message de commit et cliquer sur le bouton Commit pour effectuer le commit.

log¶

1. Cherchez et installez l’extension Git Graph de mhutchie.

2. Ouvrez Git Graph en cliquant sur le bouton Git Graph en bas de votre écran, ou en tapant Git Graph dans la Command Palette puis en choisissant l’option Git Graph: View Git Graph.

Le graphe affiché par l’extension Git Graph représente votre log, avec les hash des commits à droite. Une version de ce graphe peut être affichée dans Source Control (si vous ne la voyez pas, cliquez sur les trois points en haut à côté de SOURCE CONTROL puis sur Graph), mais l’extension permet d’effectuer davantage de commandes Git via l’interface.

config && remote¶

Dans les boutons à droite de Git Graph, vous trouverez un bouton Repository Settings où vous pourrez configurer les paramètres de votre dépôt et voir les Remote Repos associés.

fetch¶

Vous pouvez cliquer sur le bouton Fetch from Remote(s) parmi les boutons à droite de Git Graph, ou sur Fetch From All Remotes à côté du graphe de Source Control.

Parfois, il est utile de faire un Refresh pour mettre à jour la vue du graphe si des changements ont eu lieu récemment.

push¶

Vous pouvez cliquer sur le bouton Push parmi les boutons à droite du graphe de Source Control.

pull¶

Vous pouvez cliquer sur le bouton Pull parmi les boutons à droite du graphe de Source Control.

show && diff¶

Vous pouvez cliquer sur un sommet du graphe (dans Git Graph ou Source Control) pour voir tous les détails du commit correspondant.

Vous pouvez cliquer sur un fichier modifié d’un commit pour voir les changements spécifiques (comme avec git diff).

stash¶

Vous pouvez cliquer sur le bouton More Actions... (trois petits points) qui apparaît lorsque vous passez la souris au-dessus de CHANGES, puis choisir Stash. Vous pouvez également l’utiliser pour d’autres commandes que nous avons vues précédemment.

checkout && branch¶

Dans l’extension Git Graph, vous pouvez faire un clic droit sur un message à côté d’un commit et choisir l’option Checkout ou Checkout (Detached) dans le graphe de Source Control.

Revenez au commit le plus récent en faisant un clic droit sur l’icône de la branche main (à côté du commit le plus récent) dans l’extension Git Graph.

Vous pouvez créer des branches en faisant un clic droit sur le commit à partir duquel vous souhaitez créer la branche.

Vous pouvez voir toutes les branches ou une branche particulière avec l’option Branches en haut de l’extension Git Graph.

revert && reset¶

Dans l’extension Git Graph, vous pouvez faire un clic droit sur le message d’un commit et choisir Revert... ou Reset current branch to this Commit....

merge¶

1. Créez un répertoire TP11/ et un fichier TP11/merge.txt vide, puis synchronisez ce fichier pour l’avoir dans vos deux dépôts.

2. Localement, ajoutez Hello World! sur la première ligne du fichier.

3. Sur GitLab, utilisez le Web IDE pour ajouter Hi! sur la première ligne du fichier.

4. Effectuez un fetch et observez les branches divergentes.

5. Faites un clic droit sur le message du commit de la branche du dépôt distant et choisissez Merge into current branch... avec l’option No commit.

6. Ouvrez le fichier merge.txt.

7. Vous pouvez choisir une des options proposées au-dessus du conflit, ou ne pas en choisir et résoudre le conflit vous-même avec un texte qui remplace les deux autres, comme Bye!.

Vous pouvez également choisir l’option Open in merge editor qui s’affiche en bas à droite. Cela ouvrira trois écrans : deux avec les versions du fichier en conflit et un troisième avec la version finale que vous écrirez.

8. Terminez la synchronisation avec la version fusionnée.

9. Supprimez merge.txt et synchronisez vos dépôts.

Run and Debug¶

1. Créez le répertoire TP11/ avec les fichiers et les contenus suivants.

TP11/
├── include/
│    └── cesar-encoding.h
├── source/
│    ├── cesar-encoding.cpp
│    └── main.cpp
├── compile_flags.txt
└── makefile

#ifndef CESAR_ENCODING_H
#define CESAR_ENCODING_H

#include <string>

class CesarEncoding {
public:
    std::string encode(const std::string& message);

private:
    int mKey = 3;
    char encodeLetter(char letter);
};

#endif

#include <string>
#include "cesar-encoding.h"

std::string CesarEncoding::encode(const std::string& message) {
    std::string encodedMessage = "";
    for (char letter : message) {
        encodedMessage += encodeLetter(letter);
    }
    return encodedMessage;
}

char CesarEncoding::encodeLetter(char letter) {
    letter += mKey;
    return letter;
}

#include <iostream>
#include "cesar-encoding.h"

int main() {
    std::string message = "A message to encode";
    CesarEncoding encoding;
    std::cout << encoding.encode(message) << std::endl;
    return 0;
}

-xc++
-std=c++17
-Iinclude

EXECUTABLE = cesar-encoding

CXX = g++
CXXFLAGS = -std=c++17 -Iinclude
DEBUG_FLAGS = -g -O0 

SOURCES = $(wildcard source/*.cpp)
OBJECTS = $(patsubst source/%.cpp,build/objects/%.o,$(SOURCES))
DEPENDENCIES = $(patsubst source/%.cpp,build/dependencies/%.d,$(SOURCES))

all: build/binaries/$(EXECUTABLE)

debug: clean
	$(MAKE) all CXXFLAGS="$(CXXFLAGS) $(DEBUG_FLAGS)"

build:
	mkdir -p build/objects build/dependencies build/binaries

build/binaries/$(EXECUTABLE): $(OBJECTS) | build
	$(CXX) $(OBJECTS) -o build/binaries/$(EXECUTABLE)

build/objects/%.o: source/%.cpp | build
	$(CXX) $(CXXFLAGS) -MMD -MF build/dependencies/$*.d -c $< -o $@

clean:
	rm -rf build

run:
	./build/binaries/$(EXECUTABLE)

.PHONY: all debug build clean run

-include $(DEPENDENCIES)

Pour comprendre ce code, nous allons utiliser le mode Run and Debug de VSCodium.

DEBUG_FLAGS = -g -O0 

debug: clean
	$(MAKE) all CXXFLAGS="$(CXXFLAGS) $(DEBUG_FLAGS)"

2. Créez une tâche “Debug” dans .vscode/tasks.json qui prend comme input tpWithDebug, contenant pour le moment uniquement ["TP11"].

3. Installez l’extension CodeLLDB de vadimcn.

4. Créez le fichier .vscode/launch.json (qui sera utilisé par l’extension) avec le contenu suivant.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "TP11",
            "type": "lldb",
            "request": "launch",
            "program": "${workspaceRoot}/TP11/build/binaries/cesar-encoding",
            "args": [],
            "cwd": "${workspaceRoot}/TP11",
            "preLaunchTask": "Debug",
            "terminal": "integrated"
        }
    ]
}

5. Créez un breakpoint à la ligne 7 de cesar-encoding.cpp (encodedMessage += encodeLetter(letter);) en cliquant sur le point rouge qui apparaît lorsque vous passez la souris au-dessus du numéro de la ligne.

6. Cliquez sur le bouton vert TP11 à côté de RUN AND DEBUG (ou appuyez sur le raccourci F5) et choisissez TP11 lorsque la tâche Debug est lancée.

Vous verrez apparaître à gauche les différentes VARIABLES : vous avez alors accès à l’intérieur de la fonction encode. Seule la rubrique Local nous intéresse dans cet exercice.

7. Vous pouvez connaître le type de ces variables en passant la souris au-dessus du nom de la variable.

8. Répondez aux questions du Quiz en utilisant ces boutons de navigation.

Sur votre gauche, vous pouvez voir une catégorie WATCH. Ici, nous pouvons ajouter des expressions calculées à partir des variables disponibles dans VARIABLES.

9. Ajoutez l’expression letter+mKey dans WATCH grâce au bouton + (Add Expression), puis répondez aux questions du Quiz en utilisant cette expression.

10. Utilisez Expression, Hit Count et Log Message pour répondre aux questions du Quiz.

11. Finalement, avez-vous compris ce que fait ce code ?