Lab11: Git integration in VSCodium and debugging

Git Integration (Source Control)¶

Now we will see how Git is integrated into the VSCodium interface. IDEs with Git integration often work in a similar way.

init¶

Your repository is already a Git repository, so there is no need to initialize it.

To initialize a new repository, simply click on the Source Control tab in the left sidebar, then click Initialize Repository.

clone¶

You do not need to re-clone your repository.

To clone a repository, you can select View > Command Palette (shortcut F1 or Ctrl + Shift + P), then type clone, choose Git: Clone, and enter the repository URL (with a PAT for example).

status¶

You can view the status of your repository in Source Control, in Explorer, in the editor, and in the Source Control tab.

For example:

• When you add a new file, a U appears next to its name to indicate Untracked.

• When you modify a file that has already been tracked (git add), an M appears next to its name to indicate Modified.

• Changes that are not yet staged appear in the Changes section of the Source Control tab in the left sidebar.

add¶

You can add a change from Changes to the Staging Area in Source Control by clicking + next to the change, or add all changes by clicking + next to Changes.

rm¶

You can delete a file in Explorer, then stage this change from Changes in Source Control.

restore¶

To unstage a change, you can click - next to a staged change.

To discard new untracked changes in a file, you can click the arrow to the left of +, labeled Discard Changes.

commit¶

In the Message box at the top of Source Control, you can write your commit message and click the Commit button to create the commit.

log¶

1. Search for and install the Git Graph extension by mhutchie.

2. Open Git Graph by clicking the Git Graph button at the bottom of your screen, or by typing Git Graph in the Command Palette and selecting Git Graph: View Git Graph.

The graph displayed by the Git Graph extension represents your log, with commit hashes on the right. A version of this graph can be displayed in Source Control (if you do not see it, click the three dots at the top next to SOURCE CONTROL, then click Graph), but the extension allows you to perform more Git commands through the UI.

config && remote¶

In the buttons on the right side of Git Graph, you will find a Repository Settings button where you can configure your repository settings and view associated remote repositories.

fetch¶

You can click the Fetch from Remote(s) button among the buttons on the right side of Git Graph, or Fetch From All Remotes next to the Source Control graph.

Sometimes it is useful to click Refresh to update the graph view if changes have occurred recently.

push¶

You can click the Push button among the buttons on the right side of the Source Control graph.

pull¶

You can click the Pull button among the buttons on the right side of the Source Control graph.

show && diff¶

You can click on a commit in the graph (in Git Graph or Source Control) to view all details of the corresponding commit.

You can click on a modified file in a commit to see the specific changes (similar to git diff).

stash¶

You can click the More Actions... button (three dots) that appears when you hover over CHANGES, then choose Stash. You can also use it for other commands we have seen previously.

checkout && branch¶

In the Git Graph extension, you can right-click on a commit message and choose Checkout or Checkout (Detached) in the Source Control graph.

Return to the most recent commit by right-clicking on the main branch icon (next to the most recent commit) in the Git Graph extension.

You can create branches by right-clicking on the commit from which you want to create the branch.

You can view all branches or a specific branch using the Branches option at the top of the Git Graph extension.

revert && reset¶

In the Git Graph extension, you can right-click on a commit message and choose Revert... or Reset current branch to this Commit....

merge¶

1. Create a Lab11/ directory and an empty Lab11/merge.txt file, then synchronize this file so that it exists in both repositories.

2. Locally, add Hello World! on the first line of the file.

3. On GitLab, use the Web IDE to add Hi! on the first line of the file.

4. Perform a fetch and observe the diverging branches.

5. Right-click on the commit message from the remote branch and choose Merge into current branch... with the No commit option.

6. Open the merge.txt file.

7. You can choose one of the options displayed above the conflict, or choose none and resolve the conflict yourself by replacing both versions with your own text, such as Bye!.

You can also choose Open in merge editor, which appears at the bottom right. This will open three panels: two with the conflicting versions of the file and a third with the final version you will write.

8. Complete the synchronization with the merged version.

9. Delete merge.txt and synchronize your repositories.

Run and Debug¶

1. Create the Lab11/ directory with the following files and contents.

Lab11/
├── 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)

To understand this code, we will use the Run and Debug mode in VSCodium.

DEBUG_FLAGS = -g -O0 

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

2. Create a “Debug” task in .vscode/tasks.json that takes labWithDebug as input, containing only ["Lab11"] for now.

3. Install the CodeLLDB extension by vadimcn.

4. Create the .vscode/launch.json file (which will be used by the extension) with the following content.

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

5. Create a breakpoint at line 7 of cesar-encoding.cpp (encodedMessage += encodeLetter(letter);) by clicking the red dot that appears when you hover over the line number.

6. Click the green Lab11 button next to RUN AND DEBUG (or press the shortcut F5) and select Lab11 when the Debug task is launched.

You will see the different VARIABLES appear on the left: you now have access to the inside of the encode function. Only the Local section is relevant for this exercise.

7. You can see the type of these variables by hovering over the variable name.

8. Answer the quiz questions using these navigation buttons.

On the left, you can see a WATCH section. Here, you can add expressions computed from the variables available in VARIABLES.

9. Add the expression letter+mKey to WATCH using the + button (Add Expression), then answer the quiz questions using this expression.

10. Use Expression, Hit Count, and Log Message to answer the quiz questions.

11. Finally, have you understood what this code does?