Beginning Git Exercise (using Source Control GUI)

Intro

After you have gone through the Beginning Git tutorial, you can rebuild the git-demo project using the VS Code Source Control sidebar wherever possible.

The below actions are from the Beginning Git tutorial but without the detailed explanations.
Repeat the steps on this page one or more times until you are comfortable with the Git actions and how to use the Source Control GUI to enact them.

VS Code Source Control feature:

The Source Control sidebar is built into Visual Studio Code.
Open it by clicking the Source Control toolbar on the left side Activity Bar:
The More actions drop-down menu is available by clicking ⋯ at the top of the Source Control sidebar.
The most commonly used Git commands have a GUI counterpart. Some, including logs, do not.

Project setup

Create project folder:

mkdir git-demo
cd git-demo

Open the Explorer sidebar.

Create files:

app.txt

This is a demo app to learn Git.

.env

Sensitive Information Goes here

ignoreme.txt

Git ignores this whole file.

Set up a Local Git Repository

.gitignore: Create a .gitignore file:

.gitignore

.DS_Store
.env
ignoreme.txt

Initialize git repository:

Open the Source Control sidebar.

Initialize Repository Click the Initialize Repository button

Commits

Make initial commit:

Open the Source Control sidebar.

Stage and Commit Changes using Source Control toolbars

Stage changes. Move files from "Changes" to "Staged Changes":

+ Click + to right of each file you want to stage. For all changed files click + to right of the "Changes" heading.

Commit staged changes:

Enter message in box > ✓Commit Enter a commit message in the Message box at the top of the Source Control sidebar. Since it's our first commit enter "First commit". Then click the ✓Commit button below it.

Print the log of the first commit: git log

Make changes and second commit:

Open the Explorer sidebar.

Modify app.txt:

app.txt

This is a demo app to learn Git.
Second line.

Add file2.txt file:

file2.txt

Some text.

Open the Source Control sidebar.
Stage and Commit Changes using Source Control drop-down menu:

Stage changes. Move files from "Changes" to "Staged Changes":

⋯ > Changes > Stage All Changes

Commit staged changes:

⋯ > Commit > Commit Staged Enter commit message, save and close.

Print log of the first two commits: git log

Stage and commit changes with one command:

Open the Explorer sidebar.

Modify app.txt file:

app.txt

This is a demo app to learn Git.
Second line modified.

Create another file called file3.txt and save it.

file3.txt

Some text.

Open the Source Control sidebar.

Stage and Commit Changes in one step:

Enter message in box > ✓Commit > Yes Enter "Add file3" in message box > Then click ✓Commit button > Then click Yes to confirm.

Print log of the first three commits: git log

Fourth commit

Open the Explorer sidebar.

Add file4 and modify app.txt:

file4.txt

Some text.

app.txt

This is a demo app to learn Git.
Second line modified.
Third line.

Open the Source Control sidebar.

Use either of the below methods to stage and commit:

Stage and Commit Changes using Source Control toolbars

+ Click + to right of the "Changes" heading.
Message box: Add file4 > ✓Commit Enter commit message "Add file4" in the Message box. Then click the ✓Commit button.

Stage and Commit Changes using Source Control drop-down menu:

⋯ > Changes > Stage All Changes

⋯ > Commit > Commit Staged Enter commit message "Add file4" and close.

Print log of the first four commits: git log

Branches

Step 1: Create a new branch called feature1

With Source Control sidebar open.

Create and checkout a branch using the Source Control dropdown menu:

⋯ > Branch > Create branch: Name: "feature1"
Or Click status bar branch name:

Click "Main" branch in Status Bar > Select Create New Branch > Enter: feature1

Step 2: Make file changes

Open the Explorer sidebar.

Add new file named feature1.txt:

feature1.txt

Some text.

Then modify app.txt by adding "Feature 1" text to it.

app.txt

This is a demo app to learn Git.
Second line modified.
Feature 1.

Step 3: Stage and Commit Changes

Open Source Control sidebar again.

Use one of the below methods:

Source Control toolbars:

+ Stage changes by clicking + to right of "Changes" or of individual files.
Enter message in box > ✓Commit Enter "Add feature 1" in message box, then click ✓Commit button.

⋯ Source Control dropdown menu:

⋯ > Changes > Stage All Changes Stage changes.
⋯ > Commit > Commit Staged Commit staged changes. Enter commit message and close.

Step 4: Switch back to main branch

Use one of the below methods:

⋯ > CheckoutTo > Select main Using the Source Control dropdown menu.

Using the Status bar branch section: Click "feature1" > Select "main" branch.

Step 5: Merge feature1 into the main branch

⋯ > Branch > Merge branch > Select feature1

Step 6: Delete feature1 branch

⋯ > Branch > Delete branch > Select feature1

Print log of the first five commits: git log

Create and merge a second feature branch

This time we will use the Status bar to create and switch branches.

Status Bar: The status bar is the blue bar at the bottom of the window. It contains information about the opened project. The current branch name is on the left side of the status bar.

Step 1: Create a new branch called feature2

With Source Control sidebar open.

Create and checkout a branch clicking the Status Bar branch name:

Click "Main" branch in Status Bar > Select Create New Branch > Enter: feature2

Step 2: Make file changes

Open the Explorer sidebar.

feature2.txt

Some text.

app.txt

This is a demo app to learn Git.
Second line modified.
Third line.
Feature 1.
Feature 2.

Step 3: Stage and Commit Changes

Open Source Control sidebar again.

Use one of the below methods:

Source Control toolbars:

+ Stage changes by clicking + to right of "Changes" or of individual files.
Enter message in box > ✓Commit Enter "Add feature 2" in message box, then click ✓Commit button.

⋯ Source Control dropdown menu:

⋯ > Changes > Stage All Changes Stage changes.
⋯ > Commit > Commit Staged Commit staged changes. Enter commit message and close.

Step 4: Switch back to main branch

Using the Status bar branch section:

On the status bar, click "feature2" branch name > Select "main" branch.

Step 5: Merge feature1 into the main branch

⋯ > Branch > Merge branch > Select feature2

Step 6: Delete feature1 branch

⋯ > Branch > Delete branch > Select feature2

Print log of the first six commits: git log --oneline

File States and VS Code file name color coding

Make sure you are familiar with the file states and:

Their associated Git areas: N/a, Working Directory, Staging Area
Their color coding in VS Code Explorer: Gray, Green, White, Yellow
And their headings in VS Code Source Control: N/a | Changes | Stage Changes.

File State	Git Area	VS Code Explorer filename color	VS Code Source Control heading
Ignored: In the .gitignore file	n/a	Gray	n/a
Untracked: New file never committed to Git Unstaged Staged	- Working Directory Staging Area	- Green U Green A	- Changes Staged Changes
Tracked: Previously committed to Git Unmodified: No change since last commit Modified: Changes since last commit Staged: File moved to staging area.	- n/a Working Directory Staging Area	- White Yellow M Yellow M	- n/a Changes Staged Changes