Supplemental: Using Git from VSCode


Teaching: 10 min
Exercises: 0 min
  • How can I use Git with VSCode?

  • Understand how to use Git from VSCode.

Visual Studio Code (VSCode, not to be confused with “Visual Studio”) is a powerful and full featured Interactive Development Environment (IDE). It is language agnostic, and has many excellent features right out of the box, as well as a large number of extensions that can be installed easily from within the app itself. Even die-hard Microsoft Avoiders love VSCode!

Since version control is recommended best practice for any research, writing, or analysis work that you are doing many IDEs have git integrations, and VSCode is no different.

If we create a new workspace in VSCode, the default view will prompt us to create a git repo before we event create any files! To make a new git repo (equivalent of git init) just press the “Initialize Repository” button shown below.


Once you have a local git repo you can connect your repo to github by pressing the “Publish Branch” button which will let you choose a repo name:


From here you can use the current directory name as the project name or choose your own (or an existing, empty repo).

The left panel will show you the following collapsible sections:

Sidebar example

Using the Source Control panel can be done as follows:

Push a commit to your repo

  1. Using VSCode navigate to “File -> Open Folder” and open your current project
  2. Select a file to change from the file explorer
  3. Make a small change to the file, save it, and then stage and commit that change using the source control panel.


The bottom left of your VSCode window will have a note to tell you the current branch you are on. Click this name and select a different branch to work on, or enter a name to create a new branch.

Manual git commands via the terminal

VSCode has a built in terminal that you can access via Ctrl+`. From here you can run any git command you like and it wont mess with what VSCode is doing. You can hide the terminal again by pressing Ctrl+` again.

Resolving merge conflicts

If you encounter a dreaded merge-conflict then VSCode can make your life a lot easier. The default view will highlight conflicts for you and label then so that you know what the >> and << sections correspond to. You’ll also get some nifty short cuts for accepting either or both changes.

VSCode merge classic

For more complex merge conflict resolution you chan use the “Merge Editor” which gives you a three panel view:

VSCode merge classic

Even more

Using an extension you can:

Explore the extension tab to see more.

Key Points

  • Using VSCode’s Git integration allows you to forget all the git command syntax and focus on work.