Git GUI Clients (2), VS Code

George
Dec 13, 2024

1.5k
0
1
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

Note: this article is published on 05/06/2024.

This is a series of articles related to Git GUI Clients.

Git GUI Clients (0), Overview
Git GUI Clients (1), Visual Studio
Git GUI Clients (2), VS Code --- this article
Git GUI Clients (3), GitHub Desktop
- Git GUI Clients (3-1), GitHub Server
Git GUI Clients (4), TortoiseGit
- Git GUI Clients (4-1), TortoiseSVN
Git GUI Clients (5), SmartGit

Note. Although Git is very popular in the software development process, there is no category defined in this C # Corner site. So, we put the articles under the DevOps category.

When we discuss these Client GUI for Git, we concentrate on these following features associated with the specific Client GUI::

Visual Studio, VS Code
- Repos Management (Local):
  - Create a Repository, Branch
  - Clone a Repository
  - Merge, Rebase, Reset, Revert a Branch...
- Interaction between Local Repos and Remote
  - Fetch
  - Pull
  - Push
  - Sync
- Editor (+ the original environment functionalities, such as compiling, debugging, and so on)
GitHub Desktop, TortoiseGit, SmartGit
- Repos Management (Local)
- Interaction between Local Repos and Remote
GitHub Server
- Repos Management (Remote)
- Interaction between Repos and Server automation (pipeline)

A - Introduction

In this article, we will describe VS Code as a GUI client and its major features. The content of this article:

A: Introduction
B: Source Control Checkout
C: Command Line:
D: Timeline Panel
E: Source Control Panel => View and More Actions

B - Source Control Checkout

From the left bottom corner => Click the Branch sign (main now) => A dropdown list beneath the search or command input window on the middle top of the screen is shown

In the list, the branches and the command to Create a Branch are shown, such as

Create new branch
Create a new branch from
Branches
Remote Branches
Tags

The branch is associated with a commit number, which feature is not seen from Visual Studio Client, and is a powerful feature.

C - Command Line

Click Search Window in the middle of the top line => a Command list is shown:

Command Line

Click More ?:=> Show all of the list:

show all of the list

From the dropdown list, Click Show and Run Commands:

Show and Run Commands

A Command list is shown:

Command list

Type git => Git Commands will be shown:

Git Commands

Type Timeline=> Click Explorer: Focus on Timeline View:

Timeline View

Or even just Type Tim=> Click Explorer: Focus on Timeline View:

Tim

Timeline Panel will be shown at the location on the Left Bottom

D - Timeline Panel

Timeline Panel can also be accessed by Click Explorer on the Left Top icons => Click Timeline at the left bottom

Timeline Panel

To open the dropdown box for timeline details => Click the Timeline Filter Icon (right-second icon on the top of Timeline):

Two types of timelines are shown:

Git History: from Git system history
Local History: from local VS code

such as

Git History:

Local History:

Two types of timelines - Local history

Highlight one commit of the history; it will show the details

Find the difference between the current commit and the commit you Click

E - Source Control Panel => View and More Actions

From the Left Top corner => Click the top third icon. Source Control => Click the top line right corner in the left panel (View and more actions) sign