Working with GitHub in VS Code

What is Git and GitHub?

Git is the tool that lets you create a local repository (on your PC) and manage versions of your files.

Github is an online service that will host your Git repositories (in the cloud).

What is VS Code?

Visual Studio Code (VSCode) is a code editor to develop, run and debug code.

Install Git on Your Computer

In the official documentation on Visualstudio, it says that you need to install Git before you can access from VSCode.

To check the installaion you can type in your terminal

git --version

git version check

If it is not installed however, just go to Git-SCM and download the executable file for your machine.

Enable Git in VS Code

To enable Git in VS Code on Windows:

• Go to File > Preferences
• Go to Settings
• Type Git: Enabled in the search bar
• Make sure that the box is ticked

To enable Git in VS Code on Mac:

• Got to Code > Preferences
• Go to Settings
• Type Git: Enabled in the search bar
• Make sure that the box is ticked

Enable Git in VS Code

Create or Sign-In Your Github Account

To create an account on Github, go to github.com and follow the steps to create an account.

Create or Sign-In Your Github Account

Configure Your Login

It is now time to set-up your commit email address in Git.

To configure your Git Login, we will need to set your username and email address in Git.

To do so, open the terminal.

Set username in Git.

git config --global user.name "yourusername"

Set an email address in Git.

git config --global user.email "email@youremail.com"

Add the email address to your GitHub account.

If you use two factors authentication (2FA) in your organisation, you will need to generate an access token. You can also read the official documentation to help you

Clone repository

Git clone is generally used to point to an existing repository and create a clone or duplicate of it in a different directory. The original repository can be on a local disk or on a remote computer with support for the protocols. Git clone is a command that duplicates an existing Git repository.

From command palette

1. Open the command palette with the key combination of Ctrl + Shift + P .
2. At the command palette prompt, enter gitcl, select the Git: Clone command, and press Enter
3. When prompted for the Repository URL, select clone from GitHub, then press Enter.
4. If you are asked to sign into GitHub, complete the sign-in process.

Clone repository From command palette

From Intergrated Terminal

1. Open an integrated terminal from Terminal -> New Terminal.
2. Clone your repo with the following git command:

git clone https://github.com/YOUR-NAME-OR-ORGANIZATION/YOUR-REPO-NAME

3. Change your terminal into that new subdirectory

cd YOUR-REPO-NAME

4. Then open in Visual Studio Code: type following command in your terminal.

code . 

Initialize a New Repository

A Git repository keeps track of and stores all changes made to a Git project’s files. This information is saved in a folder named. git, commonly known as the repository folder. Git employs a version control system to keep track of all project changes and preserve them in the repository.

From Activity Bar

1. Open via VS code from your Workspace.
2. Go to Source Control (Ctrl + Shift + G).
3. Click on Initialize Repository

Initialize a New Repository From Activity Bar

From Command Palette

1. Open the command palette with the key combination of Ctrl + Shift + P. or View -> command palette
2. Filter with Git, then select Initialize repository.

Initialize a New Repository From Command Palette

Stage All Changes locally

When you decide to engage with version control, git’s staging phase allows you to continue making changes to the working directory while recording changes in incremental commits.

From Status Bar

1. Switch to the activity bar and select the Source control icon or use the keyboard commands: Ctrl + Shift + G.
2. Then click on the + icon under the changes.

Stage All Changes locally

Note: You can also unstage the changes click on -icon.

Stage All Changes locally

Importance: Will you stage some changes. you can publish thath changes only for the your github repositary

Commit changes locally

The git commit command takes a snapshot of the current state of the project’s modifications. Committed snapshots are “secure” versions of a project that Git will never update unless you expressly tell it to.

From Status Bar

1. Switch to the activity bar and select the Source control icon or use the keyboard commands: Ctrl + Shift + G.
2. In the command palette, filter with Git then select Commit.
3. Enter your commit message, then press Enter.

Commit changes locally

From command palette

1. Open the command palette with the key combination of Ctrl + Shift + P.
2. In the command palette, filter with Git committhen select Commit.
3. Enter your commit message, then press Enter.

Commit changes locally

Push a local branch to GitHub

The git push command is used to transfer material from a local repository to a remote repository. Pushing is the process of sending commits from a local repository to a remote repository. It’s similar to git fetch, except that instead of importing commits to local branches, pushing exports them to remote branches.

By default your are in main barnch. if you want to change the branch you should read the topic Create a branch for changes

From Status Bar

1. On the Visual Studio Code status bar, select the push icon to the right of the branch name.
2. Select the remote name from the pop-up box. If you have just one remote, you won’t be asked to select the remote name.

Push a local branch to GitHub

From command palette

1. Open the command palette with the key combination of Ctrl + Shift + P.
2. In the command palette, filter with Git then select Push.
3. If you have multiple upstream remotes, select the remote then press Enter.

Push a local branch to GitHub

From Sourse Control Extention

1. Select the Source Control icon from the activity bar.
2. Select the ellipsis (…) then select: Push or Push to.

Push a local branch to GitHub

Create a branch for changes

Create, list, rename, and remove branches with the git branch command. It does not allow you to swap between branches or reconstruct a branched history. As a result, git branch is strongly interwoven with the functions git checkout and git merge.

From Status Bar

1. Select the branch name in the status bar. This opens the command palette.
2. The status bar is usually found at the bottom of Visual Studio code.
3. In the command palette, select +Create a new branch.
4. Enter your new branch name.
5. Enter a new branch name. The branch name is visible in the status bar.

Create a branch for changes

From Command Palette

1. Open the command palette with the key combination of Ctrl + Shift + P.
2. Search for git branch and select Git: Create Branch.

Create a branch for changes

From Intergrated Terminal

1. Open an integrated terminal from Terminal -> New Terminal.
2. Create a new branch named MY-BRANCH with the following git command:

git checkout -b MY-BRANCH

Create a branch for changes

Pull Changes to Local Branch From Another Branch in GitHub

The git pull command fetches and downloads material from a remote repository and updates the local repository to match it. In Git-based collaborative workflows, merging remote upstream updates into your local repository is a regular activity.

From Sourse Control Extention

1. Select Your local branch.
2. Select the Source Control icon from the activity bar.
3. Select the ellipsis (…) then select: pull,push or pull from.
4. Then in command palette, Select GitHub Repository and select the Branch to get a pull Request.

Pull Changes to Local Branch From Another Branch in GitHub

View Git output

You can view the Git commands run when you use the Source control extension. This helps debug when a command fails.

1. Select the Source Control icon from the activity bar.
2. Select the ellipsis (…) then select Show Git Output.

View Git output