Instructions to setup VSCode on the CSIT computer labs

In this page we will guide you through the steps required to setup VSCode in the computer labs. To be more precise, the computer labs have a 100% open source variant of VSCode referred to as VSCodium. The differences among these two are minimal, and both are valid for this course.

Running VSCodium#

As usual, we first have to run VSCodium. To this end, click the “Menu” button at the bottom left corner (or press the “Windows” key on the keyboard), type in a few letters of the word “VSCodium”, and then click on the VSCodium icon once it appears, as illustrated in the following screenshot:

If the above image is too small on your browser, right click on it and open in a new tab to see it full-size. The same applies for the rest of screenshots in this page.

Set up Anaconda python environment in VSCodium#

Now, the first thing to do is to set up the Anaconda python environment in VSCodium. The easiest way to do this is by first creating a new python program file. To this end, we have to select “File->New Text File” from the top menu, as illustrated in the following screenshot:

Then, in the text editing window, copy and paste the following Python code (don’t worry if you do not know what the code is doing, hopefully you will at the end of the course):

import matplotlib.pyplot as plot
import numpy as np
x = np.arange(0,4*np.pi,0.01)
y = np.sin(x)
plot.plot(x,y)
plot.grid()
plot.show()

Ensure after pasting that there are not trailing blank spaces in any of the lines of code. Afterwards, save the contents in a file named, e.g., test.py. To this end, we have to select “File->Save As…“ from the top menu, as illustrated below:

and then select the name of the python file test.py in the text box and click on “Save” as illustrated below:

If you succeeded, in the right bottom part of the magenta bar in the VSCodium window, you should see a piece of text similar to “3.10.6 64-bit”. Click on this text, as illustrated in the following screenshot:

This should trigger the “Select Interpreter” drop-down list. Select the option with the text /usr/local/anaconda3/bin/python, as illustrated in the following screenshot:

At this point, we have already setup anaconda3 as the default python programming environment in VSCodium.

Shift+Enter#

It only remains to setup the Jupyter extension for VSCodium, namely the option that will let us execute code interactively with the combination of keys Shift+Enter (you may have seen the lecturer to do this along the lectures). To this end, we first click on the “Extensions” icon on the left hand side panel of the VSCodium window. (The Extensions icon is the one that contains four squares in it.). Then, we have to click on the Jupyter extension Settings gear icon, as illustrated in the following screenshot:

Then, in the drop-down list, we select the “Extension settings” option, as illustrated below:

This will create a new tab in the right hand side of the VSCodium window with a text box in it. Write the “shift” search keyword in the text box, and press Enter. This should filter the extension setting called “Send Selection to Interactive Window”. Then, check the box, as illustrated in the following screenshot:

Then, go to the test.py tab with the source code in it, and select the code, as illustrated below:

Finally, with the code selected, hit the combination of keys Shift+Enter. This should execute the code interactively, in a newly created tab at the right of the code tab, as illustrated in the following screenshot:

If you succeeded, you should see the graph of f(x)=sin(x). If you don’t get the plot and/or you get error messages, then something went wrong, and you should ask your tutors for technical support.