Skip to content

Features

Landing Page

The first time that you open VS Code, you should get a screen something like the one below. There may be some items in the screenshot that you don't see on your screen, but those are either repositories that I have on my machine or due to extensions that I have installed - we will get to those later!

vscode-firstopen

Starting a Project

This screen wants to open our first Git repository. We can either use the "Open..." option to select a directory using a file browser, or use "Clone Git Repository..." to clone a repository with Git. The "Open..." option is fairly self-explanatory, so let's use the "Clone Git Repository..." option. If you have already cloned your personal CHIME learning space repository, please git add, git commit, and git push any changes you may have made to GitHub, and delete that repository from your local machine, as that is the repository that we are going to clone using VS Code! Click on "Clone Git Repository..." and the following should appear.

vscode-gitclone

In the textbox, enter the URL of your repository https://github.com/CHIMEFRB/{yourname}-learning-space (if you have created it), and press enter. In the file browser, select the directory that you'd like to clone your repository to. Once the repository has been cloned, VS Code will ask if you want to open the repository, which you can select "open". It will now ask if you trust the author (this is you), select appropriately.

vscode-open

Using the File Explorer

In the left most column, the overlapping files should be selected. This is VS Code's file explorer which shows the column to the right - all of the directories and files within the opened repository. Selecting a file from here will open it in the file editor to the right. Open your README.md file and make some changes to it.

vscode-docedit

Integrating with Git

Once changes have been made to a document, VS Code tracks files that have changed since the last commit. On the left column, you should now see a branch icon that has a blue circle with 1 in it.

vscode-changes

Clicking on that icon changes the file explorer column to a column that is tracking changed files. From here, we can use VS Code's GUI to git add our changed README.md file. To do this, press the + symbol next to the file name.

vscode-add

Now our README.md file has been moved to the staged changes area. So our changes are now ready to be committed.

vscode-staged

In the message text box, write a commit message and click on the tick above to commit these changes.

vscode-push

Once your changes have been committed, a blue box "Sync Changes" appears which allows us to push the changes to GitHub. This is the basic workflow with VS Code, in the following section we will add extensions.

Installing VSCode Extensions

VS Code also allows the installation of extensions to modify or simplify your workflow. The area to install extensions is located on the left-most column. Itt is the icon that comprises four boxes.

vscode-extension

Extensions can be searched for using the search box, and they are easily installed by pressing the blue install button.

Here is a list of useful extensions that we recommend using:

  • GitLens
  • Todo Tree
  • Docker
  • Python
  • pre-commit
  • VS Code Commitizen Support

But there is many more useful extensions. Often, VSCode will detect when you should install some extensions after opening a file that might require them, and provides you the link to do so in the bottom right!

Using Terminal in VSCode

It is also possible to open a terminal within VS Code. To do so, use the menu to navigate to Terminal > New Terminal (or use the keyboard shortcut shift + control + `). It can be useful to know how to invoke the terminal for certain tasks, although it is no different to launching the terminal separately.