Connecting GitHub and VS Code: A Beginner's Guide
Introduction
If you're reading this, you probably already know what GitHub and VS Code (Visual Studio Code) are. If not, here's a quick explanation:
GitHub is essentially social media for programmers where you can upload your code/projects, receive stars, get your work forked, and collaborate with other developers on projects.
VS Code is an IDE (Integrated Development Environment) that can be enhanced through extensions, making it highly customizable. It comes with Emmet pre-built, which is rare among text editors, and allows you to modify its environment variables according to your preferences. VS Code offers a vast collection of extensions for various requirements and is developed by Microsoft.
Before we begin, I'd like to thank @Risabh Singh for helping me write this guide. Be sure to check out his Dev page as well. Now, let's get started!
Requirements
To follow along with this tutorial, you'll need:
- GitHub Account - Create a GitHub account if you don't already have one
- Git - Download and install Git, then log in to your GitHub account
- VS Code - Download and install Visual Studio Code
Setting Up VS Code
After installing and opening VS Code, you'll need to download an extension to connect VS Code with GitHub. To install the extension:
- Click on the Extensions button in the left side panel
- OR press
Ctrl+Shift+Xon Windows /Cmd+Shift+Xon Mac to open the Extensions panel - Search for "GitHub Pull Requests and Issues"
- Install the extension
After installing the extension, log in to your GitHub account by clicking on the Accounts button located at the bottom left corner of VS Code.
Setting Up GitHub
- Create a repository on your GitHub account
- You can add a README.md file during initialization
- Copy the SSH code by clicking on the "Code" button and then clicking "Copy to clipboard"
Now you have the SSH code for your GitHub repository ready to use.
Connecting and Using GitHub with VS Code
Open VS Code and ensure you're in your desired folder where you want to clone your GitHub repository. Now, you'll need to use some Git commands:
Clone Your Repository
git clone <SSH Code>
For example:
git clone https://github.com/surajsrv11/A-FRAME-.git
This command clones all files and folders from your GitHub repository to your local machine. Note that you should only clone a repository once in the same folder. If you try to clone it again in the same location, you'll get an error.
After cloning your repository, you can work on it and make necessary changes. For all subsequent Git commands, make sure you open the integrated terminal in the repository folder.
When executing Git commands for the first time, you'll need to log in to your GitHub account.
Add Changes
git add .
This command adds all changes in the working directory to the staging area. It tells Git that you want to include updates to these files in the next commit. If the command works correctly, it won't show anything in the terminal.
Commit Changes
git commit -m "Your Message"
The "commit" command saves your changes to the local repository. In the quoted section, add a descriptive message about the changes you've made.
Push Changes
git push origin master
This command pushes changes from all local branches to matching branches in the remote repository (origin). In simple terms, it uploads all the changes you've made in your local repository to GitHub.
Conclusion
By following these simple steps, you can easily clone, edit, and push changes to your GitHub repository using VS Code. This workflow streamlines the development process and makes collaboration more efficient.
Thank you for reading this guide! I hope you found it helpful for integrating GitHub with VS Code.