Commit changes

We will use the new git project initialized in the previous exercise.

Open git project

Open the VSCode, and click on the Source Control icon on the side bar as indicated in the screenshot below.

Click on the Open Folder button to load the git project folder.

Add new file

After opening the folder in VSCode, create a new file called README.md, write some text in it and save the file. After that, you will notice a numerical tag on the Source Control icon.

The numerical tag shows the amount of changes made on the filesystem. If you click on the Source Control icon, you will see the change concerns the README.md file we just added.

Because it is a new file, Git considers it as a untracked file and therefore it is flagged with a U.

Stage a change

Before we can commit this new file into the Git repository, we need to stage it. This is done by clicking the + symbol next the U flag. After that, you will see the change on README.md is moved into the stage area.

Commit a change

After the changes are in the stage area, one can proceed to commit the file. For committing a change into the Git repository, a message about the change is required.

When composing the commit message, try to follow the Git 50/72 rule.

Add a short sentence in the text field on top of the Commit button and click the Commit button.

Congratulations! You made your first Git commit.

Make more changes

Let’s make more changes to the README.md file. Add the following lines to the file:

1
2
3
4
5
## Introduction

This project is for learning [Git](https://git-scm.com).

![git logo](Git-Logo-2Color.png)

Save the file.

Download the Git Logo and add the logo into current project by dragging it into the VScode.

You just wrote the README file in Markdown!! VSCode supports Markdown preview. You can toggle the preview as shown in the screenshot below.

Now commit the changes with a message added introduction to README with Git logo.

A commit can involve multiple changes. It is practicle that related changes are made in a single commit.

Check Git history

By default, VSCode supports viewing git change history via individual file’s timeline. However, the git log view provided by the Git History extention is more intuitive.

Press the F1 key to toggle the tool menu in VSCode and select Git: View History (git log). You should see two commits we have just made in the newly opened tab.

Roll back

Don’t like the commited changes? You can always undo the last commit in VSCode. The change(s) involved in the undo-ed commit will be put back to the stage area. One can then remove the change(s) from the stage area. After that, the changes you made remain on the filesystem and can be further reversed or stashed completely.