Skip to content

Latest commit

 

History

History
143 lines (129 loc) · 8.36 KB

GitHub_in_VSCode.md

File metadata and controls

143 lines (129 loc) · 8.36 KB

Using GitHub in VS Code (GTS)

How to interact with your GitHub repositories directly in VSCode in GTS

Further Reading:
If you want more information about using Git and GitHub in VS Code, please see Introduction to Git in VS Code and Working with GitHub in VS Code

Prerequisites:

  • GIT (already available in GTS)
  • Visual Studio Code (already available in GTS)
  • GitHub account ready for use. If not please see GitHub Account Set UP.

Introduction

Since Git and Visual Studio Code are available in our Geospatial Terminal Servers (GTS) we can peform common Git actions like pushing and pulling code, creating and merging branches, and committing code changes right within the VS Code editor.

Workflow Outline

Getting Started with GitHub in VSCode:

Using Source Control in VS Code:

Getting Started with GitHub in VSCode

Open a GitHub repository remotely

  1. Install the GitHub Repositories extension

    Use the Extensions window and search for "GitHub Repositories" to locate the extension to install (notice the blue check mark verifying github.com as the publisher of this extension).


  2. Use the 'Open Remote Repository' command

    You should now have an Open Remote Repository option in your Explorer window. Click this button to be prompted to open a GitHub repository.

    You will now be prompted to sign in using GitHub, opening a web browser which will prompt you to enter your GitHub username and password.


  3. Select the GitHub repository that you want to open

    You will be given a list of repositories to open remotely, select the one you want to open.

    You will now be able to make changes to your repository in GitHub remotely using VS Code.

Clone an existing repository to a local folder

  1. Use the 'Clone Repository' command

    From the Explorer window click the Clone Repository button.


  2. Select repository from GitHub that you want to clone

    You will now be prompted to sign in using GitHub, opening a web browser which will prompt you to enter your GitHub username and password.

    Select the repository you want to clone from the list of available GitHub repositories.


  3. Select a local folder to clone the repository to

    You will now be prompted to to select a folder to save the clone to locally.

    Once the folder is selected VS Code will start cloning the repository to your local folder

    Once completed you will be given the option to open the local clone, and can then start working off of the clone in VS Code.

Create a new repository from a local folder

  1. Open folder in VS Code

    Open the folder that you want to make a new GitHub repository out of in VS Code.


  2. Use the 'Publish to GitHub' command

    Open the Source Control window and you should now have a Publish to GitHub option. Click this button to be prompted to publish a new GitHub repository.

    You will now be prompted to sign in using GitHub, opening a web browser which will prompt you to enter your GitHub username and password.

    You'll be given the option to publish to a private or public repository on GitHub.

    You'll also be given the option of what files from your folder to include in the repository.


  3. Publish to GitHub

    VS Code will now start to publish your new repository to GitHub and will give you a prompt when it's done.

    Once complete you will now see new options in the Source Control window to interact with your repository in GitHub.

    If you enter GitHub via your browser you will also now be able to see and interact with your new repository.

Using Source Control in VS Code

Once you've connected VS Code to a GitHub repository using one of the methods above, you will now have access to Source Control capabilities in the Source Control window.

Staging and committing code changes

As soon as you've made a change to a repository file in VS Code you'll notice that the Source Control icon will have numbers/notifications on it, indicating changes.

Once you open the Source Control window you'll also see a list of files with changes.

You can click on the file to open a comparison window to see where the changes are line-by-line.

You now have the option to either discard the changes made locally, or to stage the changes, ready to be committed to the repository.

Once staged, you'll see the changes move up into the Staged Changes list, indicating that it will be included in the next commit.

---

Pushing and pulling remote changes

Once staged, you'll see the changes move up into the Staged Changes list. You'll now need to enter a commit message in the box above and are ready to commit and push the changes.

The More Actions button (denoted by the three dots) also allows you to select from various git actions. You can also sync remote changes to your local copy of the repository using these actions.

---

Using branches

You also have the option to use branches other than the main/master branch.

Clicking on the branch name (defaults to master*) next to your repository under Source Control Repositories in the Source Control window will allow you to change branches or create a new branch.

Select an existing branch from the list or click Create a new branch to make a new branch.

Once you've selected a branch to use VS Code will load that branch and you'll see in the Source Control window that the branch name next to your repository under Source Control Repositories has changed .

If you are using a branch, the branch name will also be indicated in the bottom left of your VS Code window.

---