Setup Git + Visual Studio Code Tutorial

Pretext:

Git Distributed Version Control System (DVCS) is been used in over 90% of Software Projects. With the ever growing of Visual Studio Code over the past couple of years, most of us learning VS Code may have a question, how do I use Git with Visual Studio Code?

Prerequisites

Note: We assume that you are very new to git and do not have set-up GitHub with VS Code, accordingly some steps can be skipped.

• Visual Studio Installed (either of Mac, Linux, Windows)
• Git installed on your Device.
• Should have basic understanding of Git Commands - init, config, commit, add, status, log, push e.t.c.
• A GitHub account

How to create a git local repository using VS Code

1. Open VS Code,
2. Open Terminal (Can use any shell zsh, bash or CMD, PowerShell)
3. Now move to a location where you want to create your project folder and create your project folder, and move into that folder, and go a git init to make it as Git Project.
   Example:

   % git init

   
   
   
4. Now to go File -> Open Folder -> Choose the project folder you created.

✏️ Note you can even create a local git repository outside of VS Code and then import.

Setup Github email and user

1. If you are using git for the first time, and have not set user and email, follow below steps,
2. Open Terminal,
3. Add User: git config --global user.name "your-user-name"
4. Add Email: git config --global user.email "your-email@your-domain.com"

How to stage and commit code into git local repository using VS Code

• For the demo purpose, lets create a simple file hello.html and add a h1 tag saying hello,

  <h1>Hello Git + VS Code!</h1>

• Execute command: git add hello.html to stage the file,
• Now, execute the command: git add -m "initial commit"

How to push local git repository using VS Code

1. In Terminal, set the remove branch details by running the command: |HSgit remote set-url origin https://github.com/your-user/my-git-proj.git|
2. Run command: git push origin main
3. You will get a pop-up to add your GitHub credentials in VS Code.
   
4. You will be redirected to GitHub website to provide access,
5. on GitHub, create a project with the same name as your local git project (note if your repo contains sensitive info, make it a private repo)
   
6. Now run the command git push -u origin master

% git push -u origin main
Enumerating objects: 6, done.
Counting objects: 100% (6/6), done.
Delta compression using up to 8 threads
Compressing objects: 100% (2/2), done.
Writing objects: 100% (6/6), 489 bytes | 489.00 KiB/s, done.
Total 6 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/bladerunr2049/my-git-proj.git
 * [new branch]      main -> main
branch 'main' set up to track 'origin/main'.