Skip to content

Our editor of choice -- Visual Studio Code

Installing VS Code

Visual Code Studio can be downloaded from their website, navigate to https://code.visualstudio.com, here the installer for your machine will be suggested for download. The software will either be downloaded as the application itself zipped, or an installer. Follow the prompts from the installer or move the application to your applications folder, and you now have VS Code installed.

vscode-site

Getting started with VS Code

The first time that you open VS Code, you should get a screen something like the one below. Although, there may be some items in the screenshot that you don't see on your screen, 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

This screen wants to open our first 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 from GitHub. The "Open..." option is fairly self-explanatory, so lets use the "Clone Git Repository..." option. If you have already cloned your learning space repo, please git add, git commit, and git push any changes you may have made and delete the repository from your machine as this is the repository that we are going to clone. 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 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, select open. It will now ask if you trust the author, this is you, select appropriately.

vscode-open

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

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 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 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, it 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

Terminal within VS Code

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