DEV Community

Cover image for Learn How To Push Code From VSCode To GitHub
Richard Rembert
Richard Rembert

Posted on • Edited on

Learn How To Push Code From VSCode To GitHub

Are you a developer consuming most of your time by switching between different windows to edit code, review changes, and push the code from VSCode to GitHub? Undoubtedly, every successful software project requires a version control system to facilitate the operation of various modules and versions by other teams.

In this blog, you will learn how to push the code from Visual Studio Code to Github. Before we get started, let me give a brief introduction to GitHub and Visual Studio.

GitHub is a website and cloud-based service that allows developers to store and manage their code and track and control changes to their code. With GitHub, multiple developers can simultaneously work on a project, reducing the risk of duplication or work conflicts and decreasing production time. GitHub allows developers to code, track changes, and innovate solutions to problems that may occur simultaneously during the site development process.

Visual Studio Code (VSCode) is a source code editor developed by Microsoft that can run on Windows, macOS, and Linux. It’s free, open-source, and has built-in support for debugging and Git version control, syntax highlights, snippets, and more. The VSCode user interface is highly customizable, as users can switch to different themes, keyboard shortcuts, and settings.

Steps To Push Code From VSCode To GitHub

Using GitHub with Visual Studio Code allows you to share your source code and collaborate with others. GitHub integration is provided via the GitHub Pull Requests and Issues extension. To push the code to GitHub from Visual Studio Code, you will need to create a GitHub account and install the “Github Pull Requests and Issues” extension.

Note: Before pushing the code from VSCode to GitHub, you need to ensure that all the files are in one folder, and you have to push your folder to Github.

Here are the steps to pushing code from VSCode to GitHub.

Step 1: Open your Github Account. And click on “Your Repository.”
GitHub Repository
Step 2: If you have an existing repository, then open that repository; otherwise, click on the “new” button to create a repository.
New GitHub Repository
Step 3: Enter the name and description (optional) for the repository. Then check the private or public Repository box according to the requirement. Select the checkbox if you want to initialize the repository with a README.

Step 4: Click on “Create Repository.”
Create Repository on GitHub
Step 5: Once the repository is created, Copy the repository’s web URL to push the code in the Github repository. We will use the Github repository URL later in VSCode.
GitHub Repository URL
Step 6: Open VSCode and open the folder which you want to push. After that, click on the “Source Control icon” and click on “Initialize Repository.”
Initialize Repository in VSCode
Step 7: Now give a commit message, press the “Ctrl + Enter” keyword, and then click on “Yes.” As you can see, it will start committing.
VSCode Commit Message
Step 8: Click on the “more icon,” then click on “Push to.” It will show you a message and click on “Add Remote” and paste the URL of that Github Repository and press “Enter.” Now, Enter the name of Remote and press “Enter.”
Push To GitHub
Step 9: Again, click on “Push To.” The URL will be shown in the selection area appended with the Remote name. Choose the URL that you have pasted and press “Enter.” After clicking on push, it’ll take some time to update the repository on Github.

Step 10: If you’re pushing the code for the first time, it will show you a popup to log in on Github. So Enter your Github account credentials and click on “log in.”

The code is now successfully delivered to Github from VSCode. To check if the project transferred successfully, go to the repository, and you can see all the data.

Summary

If you are a developer who is getting started with VSCode or just want to check it out before getting into it, this article will provide you invaluable insight into integrating your visual studio code to GitHub while enhancing your work performance and productivity.

Conclusion

If you liked this blog post, follow me on Twitter where I post daily about Tech related things!
Buy Me A Coffee If you enjoyed this article & would like to leave a tip — click here

🌎 Let's Connect

Top comments (0)