Version Control Basics with Github and VS Code
The basic Git commands are built into the VS Code editor, here is a quick review of how to use them with Github.
Download the Software
Download VS Code and Git if you haven’t already.
Clone a Repo
Copy the repo URL to your clipboard, in this example, https://github.com/facebook/react.git:
Open a new VS Code window and type Ctrl/Cmd + Shift + P to open the Command Palette. In the window, type `Git: Clone` and select it.
Paste in the repo url that you copied above and hit enter:
Select a location to save the repo:
Switch Branches
When you open a project in VS Code that is version controlled (it has the .git folder) you will see the branch icon in the bottom left corner of your window.
If you click on the branch, you will see a list of branches that you can checkout. Branches with origin denote remote branches on Github, when you check one of them out, Git will pull down a local copy.
Now we’ve switched to a new branch.
If you see branches at origin that are no longer in Github, you can run git remote prune origin from the command line. This will update the list in VS Code to match Github.
Sync Commits from Origin
Sometimes commits will be pushed to origin(Github) by someone else, these updates are not immediately reflected in your local branch. When that happens, you will see little down arrow with the number of commits your branch is behind.
In this case, clicking on the ‘4’ would bring our branch in line with origin/master.
Create a Branch
Click the branch icon in the bottom left of the VS Code window:
Select ‘Create new Branch’:
Give it a useful name:
After confirming, your new branch will be checked out. Push to origin by clicking on the cloud:
Add Changes to Commit
As you modify files in your repo, Git will keep track of all your changes. The Git panel in VS Code will display all the changed files:
You can add a message and commit a selection/all the files right from the panel.
Push Commits to Origin
Local commits can be pushed to origin in the same manner as syncing changes from origin. Clicking on the ‘2’ would push our two commits to Github.
After the commits are pushed to origin, you would see something like this on Github:
Delete a Branch
You can delete a branch directly from VS Code. Hit Ctrl/Cmd + Shift + P to open the Command Palette. Type Git and select `Git: Delete Branch`:
Select the branch to delete (it can’t be the one you have checked out):
