A Complete Git and GitHub Workflow Using VS Code Only

I recently discovered that I could integrate Github into my Visual Studio Code. This means that I can create pull requests, create issues, clone repositories, collaborate with others, etc., without leaving VS Code. I was excited and decided to write about it. In this article, we’ll go over how to complete some of the things we do on Github right in VS Code.

We will cover the following:

1. Setup
2. Clone a project
3. Stage and commit
4. Create a new branch
5. Stash changes
6. Push changes
7. View commit timeline
8. Create pull requests
9. Pull from a remote repository
10. Add a remote repository
11. Publish a new project

Prerequisites

I’m assuming you have some experience with Git, GitHub, and VSCode. You can still follow along if you do not have any experience, but you’ll need the following:

• A GitHub account.
• Visual Studio Code installed in your machine.
• Git installed in your machine.

VS Code has a Git integration as one of its source control options, but for it to work, Git needs to be installed on your machine.

Setup

Integrating Github with VS Code is done through Github Pull Requests and Issues extension.
Open VS Code and click on the extensions panel. Search for GitHub Pull Requests and Issues. Next, install the extension and authenticate with GitHub.

After installing the extension, click on the account icon on the activity bar to log in to your GitHub account.

Click on the “Sign in to use GitHub Pull Request and Issues link.

VS Code will navigate you to the browser. Click on the Continue button to give VS Code access to GitHub.

You will see a screen asking if you want to authorize GitHub for VS Code. Click the Authorize GitHub button.

Confirm your GitHub password to continue. You will see a success screen with your authorization token as displayed below.

If you are not redirected to VS Code, copy the token manually and switch back to VS Code. Click on “Signing in to github.com” in the Git status bar at the bottom of the screen, paste the token and press the Enter or return key on your keyboard. You may need to reload your VS Code window for the extension to start working.

Clone a project

We will clone by clicking on the Clone Repository button in the source control view. Click on the “Clone from GitHub” link as seen below.

You will see a dropdown asking if you want to enable authentication through GitHub. Click the Allow button. VS Code may redirect you to your browser, where you need to authorize GitHub for VS Code like we did when setting up; otherwise, you should see a dropdown with a list of the repositories you have on your GitHub account. You can search for and clone any repository on GitHub.

Select where you want the repository to be stored. If you already have a folder, select it and click the Select Repository Location button. You can also open your desired folder on VS Code and then clone into it.

Once it finishes, you will see a prompt on VS Code asking if you want to open your cloned file in the current window or a new window.

If you want to clone a repository belonging to someone else, you can click on the Clone Repository button in the source control view. Paste the URL of the repository in the search bar.

See the example below.

Stage and commit

While working or making changes to files, your source control tab should reflect the number of files you have made changes.
Click on the source control tab to see a list of all the files you’ve made changes to. Click on any file or hover over it until you see a plus sign appear. Click on the plus sign, and VS Code will add the file to your staging environment.

If you have many files and want to stage all of them, instead of clicking the plus sign one after the other, you can click on the More Actions menu (...). From the dropdown, select Changes and select Stage All Changes.

To commit the staged files, add your commit message and click the checkmark. This will save your changes to your local repository.

Create a new branch

1. Click the current branch name from the git status bar.
   

2. Select “Create new branch” from the dropdown - this will create a branch from the current branch you are working on.

3. Type in the name of the new branch and hit Enter. VS Code will automatically switch to the new branch.

Create a branch from an already existing branch

From the dropdown, select “Create new branch from…” - This will create a new branch from some other branch in the current git repository.

Stash Changes

If you are working on something and do not want to commit the changes yet, probably because you haven’t finished working on them, you need to stash them. Stashing them will move your modified files into a stack of unfinished changes and leave you with a clean working directory. You can restore the stashed files at any time, even on a different branch.

1. Click on the source control tab.
2. Click on the More Actions menu (...) on the changes view.

1. Select Stash from the dropdown.
2. Select Stash again.

VS Code will prompt you to enter a stash message to identify the stash and hit the Enter key. You will have a clean working directory now.

To restore stashed changes, click on the More Actions menu (...), hover over Stash and select Apply Stash.

You will see a dropdown of your stashed changes. In the screenshot above, we have just one. Go ahead and select the stash you want to apply. This will apply the changes and still leave the entry in the stash.
If you want to restore the stashed changes and delete the entry from the list of stashes, instead of selecting Apply Stash, select Pop Stash from the dropdown.

Push changes

To push changes in your local repository to a remote repository on GitHub that you own or are a contributor to:

1. Click on the source control tab
2. Click on the More Actions menu (...)
3. From the dropdown, select Push, Pull.
4. From the dropdown, select Push to…

You will be given an option of any configured remote repository.

Select the repository, and that’s it. If you want to check if the changes were pushed to GitHub, you can go to the GitHub repository and confirm.

View commit timeline

You can view the Git commit history of every file in the timeline view. The timeline view will, by default, update to show the timeline for whatever file you currently have open.

To view the timeline for a specific file in your project:

1. Click on the file.
2. Scroll down to the bottom of the File Explorer and click on Timeline.

For every commit in the Timeline, you’ll see the commit title, the name of the person who made the commit, and when that commit was made.
If you click on any commit, it’ll show you a diff view of the changes made by that commit.

Create pull requests

To create a pull request after the changes in the local repository has been pushed to the remote repository on GitHub, you’ll need to do the following:

1. Click on the GitHub Pull Request tab to open the Pull Requests view.
2. Click on the + button.
3. Choose the target branch for the pull request and hit the Enter key.

If your branch hasn’t been published yet, the extension will do it for you. After completing the first three steps above, VS Code will prompt you to pick a name for the branch and hit the Enter key.

After publishing the branch, you’ll need to select a title for the pull request. From the menu, as seen in the screenshot below, you can use the latest commit message, the branch name, or specify a custom title.

Once you select the pull request title, your pull request will be created.
You can add a code reviewer and label if you want.

Pull from a remote repository

To pull from a remote branch into your local repository, you need to do the following:

1. Click on the source control tab.
2. Click on the More Actions menu (...).
3. From the dropdown, select Pull, Push.
4. From the dropdown, select Pull if you have **only one remote connected or **Pull from if you have multiple remotes to pick from.

If you select Pull from, you’ll need to select the remote you want to pull from. As seen below, I have only my default remote, which is origin.

You’ll also need to select a branch to pull from.

Once you select your branch, that’s it!!

Add a remote repository

To add a remote repository to your project:

1. Click on the source control menu.
2. Click on the More Actions menu (...).
3. From the dropdown, select Remote and click on Add Remote…

You can either provide the repository URL or add a remote from GitHub.
Click on Add remote from GitHub. You can search for a repository name or select one from the dropdown as seen below.

Next, you’ll have to provide a remote name you can reference easily and press Enter.

To add remote from URL, you can paste the repository URL in the search bar and follow the same steps.

Publish a new project

1. Open your project on VS Code.
2. Click on the source control menu.
3. Click on Publish to GitHub button - This option is only available if git has not been initialized in the project.

4. You’ll have to decide if you want to make it a public or private repository
   

5. Select the file you want to include in the first commit and click the Ok button.
   

I created just the index.html file for this illustration, as seen below.

The repository has been successfully published to Github.

Yayyy!! You made it to the end of this post, and I hope that you found new tips or tricks to enhance your productivity regardless of your experience level. I bet you’d agree with me that this is the coolest thing since Jollof rice. If you haven’t had Jollof rice, we need to fix that!! Thank you for reading!