How to use Git and GitHub in VS Code Editor

Hello Coders,

In today's tutorial, I am going to show you How to use Git and GitHub inside VS Code Editor.

Basic Setup

Start by creating a new folder and naming it as you prefer. Then, open the folder in the VS Code Editor.

Next, create a new file within this folder, such as `index.html`, or choose any name you like. We'll use this file to make changes and demonstrate how Git and GitHub work within the VS Code Editor.

After that, add a basic HTML boilerplate to the `index.html` file by pressing `Shift + 1`.

Create a GitHub repository

Let's create a new GitHub repository directly within the VS Code Editor. You no longer need to visit the official GitHub site to create a repository.

First, click on the Source Control icon in the left sidebar or press Ctrl + Shift + G to open the Source Control panel. It should look like this.

Next, click on the 'Publish to GitHub' button. This will open a dialog box that looks like this.

and then click on the allow button, this will allow the GitHub extension to sign in using your GitHub account.

Afterward, a window will open in your browser to authorize your GitHub account. Simply click on the 'Continue' button, followed by the 'Authorize' button to grant access.

Now, your GitHub account is set up within the VS Code Editor. Returning to VS Code, you'll see a dialog box like this.

First, enter your project name or leave it as the default. Next, select the repository type.

To create a public repository, click on 'Publish to GitHub Public Repository.' If you prefer a private repository, click on 'Publish to GitHub Private Repository.

Your GitHub repository is now created. If you'd like to verify it, navigate to the repository section of your GitHub account.

At this point, your Source Control tab in VS Code should look like this.

How to use Git inside of VS Code Editor?

Now, make some changes in the index.html file so that we can learn How to use Git inside of VS Code?

I just added an `h1` tag inside the file, and now the Source Control panel shows the modified file under the 'Changes' section.

The next step is to stage these changes, just click on the plus button to stage the changes and if you want to stage all the changes at once then click on the plus icon that is in line with the Changes title respectively.

All the changes are now staged. The next step is to commit them. Enter your commit message in the input field, then click on the checkmark icon to commit all the changes, as shown below.

The next step is to push these changes to your GitHub repository. Click on the three-dot menu, select 'Push, Pull,' and then click on 'Push.' This will push all the changes to the master branch.

If you'd like to create a new branch, click on the three dots, select 'Branch,' then 'Create Branch,' and enter your branch name. This will create a new branch for you, where you can then push all the changes.

Once you've pushed the changes, you can verify them by opening the repository in your browser.

"Congratulations 🎉! You've successfully pushed your changes to your GitHub repository without needing to use the command line."

Thank you for reading this blog. 

If you found it helpful, feel free to subscribe to our newsletter. That way, you'll be the first to get notified whenever a new post goes live.