If you are new to programming, or just want a simple way of getting started on your projects, Visual Studio Code is a good option to learn the language. It has over 3 million downloads and provides user friendly tools for managing workflows. This article will help get you started with an available community package that sets up VS Code development environment on GitHub!.
The “how to clone git repository in visual studio code” is a tutorial on how to get started with the GitHub. This will help you get your Visual Studio Code setup going!
There’s nothing wrong with employing different tools to do those tasks. But wouldn’t it be more efficient if you could do all of your tasks without leaving your IDE?
Are you not a reader? Take a look at this related video.
In this post, you’ll learn how to set up Visual Studio Code for GitHub. Then, while still within the Visual Studio Code program, you’ll be able to do common Git operations like clone, stage, commit, and push.
Prerequisites
If you want to follow along with this tour, you must satisfy the following conditions.
- A machine running Windows 10. This article is based on the 1909 edition, although it is not limited to that version.
- Visual Studio Code is a code editor. The current version is 1.47.2 as of this writing.
- A GitHub account with a working repository.
Git’s Extension
To get your Visual Studio Code GitHub setup working, you’ll need to work with Git. Visual Studio Code comes installed with a built-in extension for source control using Git. There are many configurations available with Git’s Extension. Still, the default settings are already right as they are out of the box.
Nevertheless, there are some configuration changes with Git’s Extension that you may want to change as a matter of preference. But before you do, you’ll need to know where to find Git’s Extension settings. Can’t change something when you can’t find it, yeah?
To open the settings using the menu, click on File —> Preferences —> Settings. Or you can also press CTRL+, shortcut.
VS Code’s menu option for settings
Then, in the Settings tab, click Extensions —> Git. You should then see the list of configuration items for Git’s Extension, as shown below.
Settings for the Git extension
This article does not, however, address every aspect of Git settings. Even so, they’re largely self-explanatory, particularly if you’ve worked with source control before.
Ensure that Git is installed
“What? “I thought Git came pre-installed?”
Well, Git’s Extension is built-in, but the Git program is not. The extension, as the name implies, is only meant to “extend” VS Code to integrate with Git. It can be confusing, and if it is for you, you may want to read up on What is Git first to have a better understanding.
To determine if Git has been installed and identified. by Git’s Extension, click on the Source Control button or press CTRL+SHIFT+G while inside the VS Code window. If you don’t have Git installed, or detected, you would see a message, similar to the one below.
Git isn’t installed or chosen.
As you can see in the screenshot above, there are common routes in the Output pane where VS Code looks for a legitimate Git binary installation. This implies you’ll either need to install Git first, or Git may already be installed but in a location that VS Code doesn’t recognize.
If Git is installed, but in a path that isn’t standard,
If Git is installed in a non-standard path, you can fix that by changing the Path value in Git’s Extension setting, as you can refer to below.
Settings for the Git extension
The file will be opened in VS Code when you click the Edit in settings.json link. For reference, see the screenshot below. The value of git.path must be adjusted to refer to the proper Git binary installation location. Then, when you’ve made your changes, save the settings.
In the settings.json file, change the git.path value.
If you don’t have Git installed,
Needless to say, If you don’t have Git installed,, you need to install it. You can do so by downloading the installation file from this link —> https://git-scm.com/.
After you’ve downloaded the file, watch the video below to learn how to install Git using the default parameters. The installation is simple, and you won’t need to modify any of the default settings for this tutorial. You’ll be well on your way to completing your GitHub setup in Visual Studio Code.
Getting Git to Work
After you’re done Getting Git to Work, restart Visual Studio Code and confirm that the Git is now detected. The screenshot below shows what you’d expect to see if Git is detected.
Git has been installed and identified.
Cloning a Repository on GitHub
Now that you’ve verified that VS Code works with GitHub, it’s time to put it to use and double-check that everything you’ve done so far is right. Cloning an existing project on your GitHub account is the quickest approach to test.
A private repository called junecastillote/demo will be utilized in this example. Instead, you may make use of your repository. If you don’t already have a repository, please see GitHub’s Creating a new repository guide for instructions on how to do so.
To clone a GitHub repository in VS Code, follow the steps below.
To begin, hit the CTRL+SHIFT+G keyboard shortcut or select the Source Control view button. Then, choose Clone Repository from the drop-down menu. Then, when you select Clone from GitHub, you’ll be asked to enable a sign-in attempt. Allow should be selected.
Begin the process of Creating a clone of a GitHub repository.
In your usual web browser, the authorization page will open automatically. Continue by pressing the Enter key.
VS Code access must be granted.
The details of the authorization request are shown on the next page. Click the Authorize GitHub button to continue providing VS Code the necessary rights.
Permission request for VS Code
When permission is complete, you will see a page that looks like the one below. If asked, click Access if the site is attempting to open Visual Studio Code.
Authorization of VS Code was successful.
You may either search for the repository name or pick the repository name that you want to clone once you’re back in the VS Code window. The repository name junecastillote/demo was searched and then chosen in the example below.
You will be prompted to specify the location where the repository will be kept locally on your computer after choosing the repository to clone. Select Repository Location after specifying the target folder.
Cloning a Repository on GitHub
When doing tasks that need authentication, GitHub will prompt you to log in. Cloning from a private repository or pushing to a repository are examples of such activities.
The GitHub Login box will appear, prompting you to log in using your GitHub credentials.
Log in with your GitHub account.
VS Code will then continue to clone the remote repository to your PC when you’ve completed the login process. As you can see in the picture below, you’ll receive a notice in the bottom right of the VS Code window after the cloning is complete. Depending on your option, you may now choose Open or Open in New Window.
Cloning of the repository is now complete.
The contents of the cloned GitHub repository are now loaded in VS Code, as seen in the picture below. You may begin making modifications to your repository at this time.
In VS Code, the local repository is loaded.
GitHub Changes: Staging, Committing, and Pushing
Continuing with your Visual Studio Code GitHub setup, VS Code is now configured to operate with Git and your GitHub repository. In addition, a repository was cloned in the previous step, indicating that everything is functioning. You’re not finished yet, however.
The next step is to see whether your cloned repository’s modifications can be successfully published to your remote GitHub repository.
Modifying and Adding Files
The file README.MD is changed to add a new line using the cloned repository from the previous part, as seen below.
The file’s content has been changed.
Next, to add a new file to the workspace, press CTRL+N or go to File —> New File. In this example, the new file is named demo.ps1. Edit the file to add content to it and then save it.
The new file you generated will be labeled with a U, which stands for untracked. Take a look at the screenshot below for an example.
Any files in your working directory that were not in your previous snapshot and are not in your staging area are untracked files. 2.2 Git Basics — Keeping Track of Changes to the Repository
The workspace is untracked when a new file is inserted.
Examining and Scheduling Changes
Go to the Source Control view to see and evaluate the changes. You should be able to see that the two modifications need to be re-evaluated. Clicking on any of the modifications, as shown in the figure below, opens a comparison of the file’s original contents and the suggested changes.
A comparison of the file’s original and modified contents.
Following your review, you must either delete or stage the modifications to the files.
You may choose whether to discard or stage each file’s modifications. By selecting the filename and pressing the discard () or stage (+) symbol next to it.
By choosing the Stage All Changes or Delete All Changes menu items from the More actions (…) button, you may easily stage or discard all changes at once. All modifications will be staged in this example.
To stage or delete changes, use the buttons and menu.
Taking Action on Changes
The next step is to commit the changes to the local repository once they have been staged. This is done before the modifications are pushed to the remote GitHub repository.
You must provide a meaningful statement in the commit to commit the modifications. Type the message you wish to add in the commit, as shown in the example below. When you’re happy with your message, hit CTRL+ENTER or click the commit () button to save the changes to the local repository.
Changes should be committed to the local repository.
Using GitHub to Push Changes
The Source Control view should indicate that the number of modifications has reset to zero when the changes are saved to the local repository (0).
Finally, click on the More actions (…) button and then on Push to push the changes from the local repository to the GitHub remote repository.
GitHub modifications are being pushed from the local repository.
Finally, if you want to double-check that the changes were uploaded to GitHub, go to your repository’s page and search for the last update information. The message or description of the files is the same as the message appended to the commit before uploading the repository back to GitHub, as you can see below.
Pushing a local repository to GitHub was successful.
Adding the GitHub Extension to VS Code Git
If you’ve followed all of the preceding steps, you may use VS Code to work on your GitHub repositories right away. However, by installing the GitHub Pull Requests and Issues extension, GitHub interaction may be further enhanced. Among the benefits of the mentioned plugin would be the ability to examine and handle pull requests and problems directly in VS Code.
Go to the Extensions view to install the extension. After that, type “GitHub Pull Requests and Issues” into the search box. To install the extension, go to the extension page and click the Install option. Please see the example below.
Obtaining the extension using a Google search
You may also use the command line to install the extension. To install the extension, copy the command below and execute it in the VS Code terminal.
GitHub.vscode-pull-request-github —install-extension code
You may need to refresh your VS Code window after running the code above for the extension to take effect.
To bring up the command palette and refresh the VS Code window, use CTRL+SHIFT+P. After that, type reload window and hit enter to refresh the VS Code window. The installation procedure is seen in the video below.
Obtaining the extension using a Google search
Summary
Visual Studio Code is a feature-rich application where different functionalities converge and integrate with the use of various extensions. Git’s Extension that comes with VS Code allows developers to use a single interface to perform code editing, staging, committing and pushing changes to a remote repository such as GitHub.
You learnt how to use VS Code and Git to work with GitHub in this example. You’ve learned how to clone, stage, commit, and push Git files using Visual Studio Code.
The information presented in this tutorial is limited to the fundamentals of utilizing VS Code with GitHub. As you may be aware, the GitHub integration in VS Code may be further enhanced by adding extensions.
When you’re ready to learn more, try using VS Code to review and manage problems on GitHub, or even merge pull requests, all from inside the VS Code application.
Thank you for taking the time to read this!
Additional Reading
The “git extension for visual studio” is a feature that allows you to use git with Visual Studio Code. This feature makes it easy to create, edit, and share your code.
Frequently Asked Questions
How do I sync my Visual Studio Code with GitHub?
A: Open the settings menu and click Tools > Git. Click Three-way merge button and then configure your GitHub credentials in the top right corner of the window that should pop up.
How do I get my GitHub code from VS Code?
A: You can get your GitHub code from VS Code by going to the bottom left of the window and typing View on GitHub.
Related Tags
- how to push code to github from visual studio 2019
- install git vscode windows
- visual studio code download
- github vscode online
- github vscode in browser
