Jakob's Epic and Poggers Visual Studio Code Tutorial


Installing VSCode

  1. Download the mac version of vscode from here.
  2. Unzip the downloaded file. Inside should be the vscode application.
  3. Run the program thats inside. You should be good to go!

Files and Folders


When you first open vscode it should look something like this
vscode when it was first opened

Navigate to the file icon on the left-hand side of your screen
a red arrow pointing to the vscode file tab

Click the "Open Folder" button and find the folder with the code you want to edit
an arrow pointing to the open folder button in vscode

You can use this tab to navigate your files, and to create new files and folders.
the files for this website

Git


Along with managing your files, VSCode lets you manage git repos. If you don't already have your git repos up and running, go do that. This is a tutorial for vscode, not git!

To get started, go to the left-hand menu and click the git icon.
a red arrow pointing to the git icon in vscode

If you don't already have a folder open you will be prompted with this screen
the git tab in vscode with no folder open

You can connect your git account to vscode and clone a repo that way. You can also clone a repo the normal way using terminal and just open the folder.

If you open a folder that isn't a git repo you will be prompted with this
vscode source control panel

If your github account is connected to vscode you can create a repo and push it to your account. If you choose the "Initialize Repository" option, vscode will make a new repo, but that repo will only be on your computer, not on github.

Once you have your git repo opened the source control panel should look like this
source control panel with no changes

When you make a change it shows up in the source control panel
The vscode source control panel with a change made

If you want to see what was changed you can click on the changed document. It will look something like this:
a document with a change made to it

To make a commit type your commit message into the entry box and press the check mark
source control panel with an arrow pointing to the commit button

To push your commits you can click the "Sync Changes" button
vscode sync changes button