UNIVERSITY OF BORÅS

Visual Studio Code (VSCode)

Data Visualization (C1VI1B) Autumn 2025

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 1 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 Agenda
• Visual Studio Code (VSCode)
• VSCode Extensions
• Example VSCode Workflow
• Jupyter Notebooks

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 2 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 Visual Studio Code (VSCode)

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 3 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 Visual Studio Code (VSCode)
• Visual Studio Code (VSCode) is a free, open-source, lightweight code editor.
• Cross-Platform: Runs on Windows, macOS, and Linux.
• Language Support: JS, Python, C++, Java, Go, C#, and more via extensions.
• Extensions Marketplace: Thousands of extensions available for languages,
themes, debuggers, linters, and tools like Git, Docker, Jupyter, etc.
• IntelliSense: Smart code completion and syntax highlighting.
• Built-in Git Integration: Easily manage source control operations.
• Debugging Tools: Integrated debugging for many languages.
• Terminal Access: Built-in terminal to run shell commands.
• Customizable UI: Themes, keyboard shortcuts, layout, and more.

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 4 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 Tools of the Trade
• In this course we will be developing Python programs with Visual Studio code
• To do this we need to install the following tools:
• Visual Studio Code (often abbreviated with “VSCode”)
https://code.visualstudio.com
• Python* (preinstalled on Mac and Linux, but not on Windows)
https://www.python.org
• Git (for source code management)
https://git-scm.com
• Miniconda (for creating “Python environments”)
https://www.anaconda.com/docs/getting-started/miniconda/main

* We don’t really have to install Python, since it’s included in Miniconda

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 5 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 VSCode User Interface
• The UI consists of: Main Menu

A) The Activity Bar

B) The Primary Side Bar

C) The Editor
(with Editor Groups)

D)The Panel

E) The Status Bar

F) The Secondary Side Bar

(not shown)

G)There is also a Main Menu

along the top
Seconday Side Bar

https://code.visualstudio.com/docs/getstarted/userinterface
Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 6 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 The Main Menu Toggle Secondary Side Panel on/off

• The Main Menu has various options, e.g. File → Open Folder to open a folder in VSCode

Secondary Side Bar

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 7 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 The Activity Bar – Explorer Ctrl + Shift + E
Cmd + Shift + E (mac)

• The Activity Bar is located down VSCode’s the left, with icons for selecting various views, in this case the Explorer view.

Explorer

Workspace tmp
is the folder we
opened in VSCode

The Explorer view

acts as a file explorer
showing us the files
in our current folder
(workspace tmp).

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 8 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 The Activity Bar – Search Ctrl + Shift + F
Cmd + Shift + F (mac)

• The Search view let’s us search for (and replace) text in any file in our current workspace.

Search

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 9 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 The Activity Bar – Source Control Ctrl + Shift + G
Cmd + Shift + G (mac)

• The Source Control view is for source control management using Git.

Source Control

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 10 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 The Activity Bar – Run & Debug Ctrl + Shift + D
Cmd + Shift + D (mac)
Debug Toolbar
• The Run & Debug view let’s us run and debug our code.

Run & Debug

Break point

Click in the editor’s

left margin to toggle
a break point

Press F5 to
start debugging

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 11 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 The Activity Bar – Extensions Ctrl + Shift + X
Cmd + Shift + X (mac)

• The Extension view let’s us install and manage VSCode Extensions from the Extensions Marketplace.

Search for
extension

Click install

Extensions

Extension
identifier

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 12 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 The Activity Bar – Testing
• The Testing view is let’s us run tests (e.g. unit tests with the pytest package).

Testing

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 13 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 The Activity Bar – Additional Views
• Additional icons for additional views will show up in the Activity Bar depending on the installed extensions.

Additional views

Account settings
VSCode settings

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 14 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 The Primary Side Bar
• The Primary Side Bar shows
the main content for a view.

• For the Explorer view, it shows

the files and folders in the
current workspace.

• The workspace is an important

concept in VSCode.

• The folder that we open in

VSCode becomes the
workspace.

• It’s name is shown at the very

top in the Primary Side Bar for
the Explorer View
(VSCode in the picture).

• All relative paths (e.g. in

VSCode .json configuration
files) are relative to the
workspace.

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 15 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 The Editor and Editor Groups
• The Editor displays the
contents of files.

• The Editor can be divided

into one or more Editor
Groups.

• For example, if we wanted

to compare the contents of
two files, we could open
them side-by-side, each in
their own Editor Group.

To save a file:

Main Menu: File → Save

Ctrl + S

Cmd + S (mac)

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 16 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 The Panel
Toggle the Panel on/off:

Ctrl + J

Cmd + J (mac)
• The Panel contains tabs.

• The Problems tab shows

problems in your code or
configuration (if any).

• The Output tab shows output

from your program (although
can be configured to show
output in a different tab).

• The Terminal tab contains

build-in terminals (click the +
icon in the far right to create a
new terminal, or the v icon to
choose terminal type).

• The Ports tab shows ports

(tcp/udp) for the program.

• Additional tabs might exist.

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 17 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 The Status Bar
• The Status Bar shows various
information, and also depends
on installed extensions.

• It shows information such as:

• Active Git branch

• Number of source code
errors/warnings
• Current debug configuration
• Encoding (e.g. UTF-8)
• End-of-Line Sequence
(e.g. LF or CRLF)
• Selected Python Interpreter
• Notifications

• There might also be various

buttons, e.g. for opening a
remote SSH connection

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 18 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 The Command Palette
• The Command Palette is used to Command Palette
run various VSCode commands.

• You can open it with:

• Main Menu:
View → Command Palette

• Windows/Linux:
Ctrl + Shift + P

• Mac:
Cmd + Shift + P

• The Command Palette is shown

as a drop-down list in the top of
VSCode.

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 19 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 VSCode Extensions

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 20 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 VSCode Extensions
• In VSCode, open the Extensions view (Ctrl + Shift + X) and install the following extensions
(alternatively you can run the code --install-extension command in a terminal):

• Python (needed to get language support for Python in VSCode)

https://marketplace.visualstudio.com/items?itemName=ms-python.python
code --install-extension ms-python.python --force

• Jupyter (needed to work with Jupyter Notebooks in VSCode)

https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter
code --install-extension ms-toolsai.jupyter --force

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 21 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 VSCode Extensions

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 22 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 VSCode Extensions

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 23 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 Python Package Managers
• There a numerous versions of Python: https://docs.python.org/3/

• Python version 2 is deprecated so only use version 3.

• Python has its own package manager called pip (https://pypi.org/project/pip)

• A package manager is used to install packages (additional functionality).

• Another commonly used package manager is conda (miniconda).

• pip and conda can (mostly) be used together to install Python packages.

• There are also other package managers available (but we’ll stick to pip and conda):

• mamba (https://anaconda.org/conda-forge/mamba) is a drop-in replacement for conda

(mamba is a lot faster than conda, since it is implemented in C++).

• On Linux distributions we can also distribution-specific package managers (apt, yum/dnf, pacman) to install Python
packages, but it’s better to use pip or conda (or mamba).

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 24 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 Python Environments
• When working on a Python project, we might break our current Python environment when installing conflicting
packages for another Python version.
• Common practice is to create a separate Python environment for each project to avoid any conflicts.
• There are various alternatives available to create Python environments.
• venv (https://docs.python.org/3/library/venv.html)
• virtualenv (https://virtualenv.pypa.io)
• pipenv (https://pipenv.pypa.ioa)
• poetry (https://python-poetry.org)
• pyenv (https://github.com/pyenv/pyenv)
• mamba (https://anaconda.org/conda-forge/mamba)
• conda (https://anaconda.org/anaconda/conda)
• miniconda (https://www.anaconda.com/docs/getting-started/miniconda/main)
• We will use miniconda.

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 25 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 Example VSCode Workflow

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 26 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 Create a New Python Environment
• Create a new folder (in this case, in sub-folder projects/tmp in the user’s home folder)
• Linux/Mac: ~
mkdir -p ~/projects/tmp └── projects
• Windows (CMD): └── tmp
mkdir %USERPROFILE%\\projects\\tmp └── .conda

• Create a new Python environment (-p means we are creating the Python environment locally ... in folder .conda)
conda create -y -p ./.conda python=3.13

• Activate Python environment (after activating an environment, any python or pip commands use that environment)
conda activate ./.conda

• Update pip package manager in the environment

python -m pip install --upgrade pip

Your terminal should give some indication

the environment has been activated

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 27 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 Install Python Packages in a Python Environment
• Given the environment ~/projects/tmp/.conda is activated
• Use pip to Install the packages: ipykernel, jupyter, numpy, pandas, matplotlib, seaborn, bokeh, plotly, dash
pip install ipykernel jupyter numpy pandas matplotlib seaborn bokeh plotly dash
• So, the command to install a single package is: pip install <package name>

• We can also use conda to install packages: conda install <package name>

• A package manager will usually install any dependencies (other packages that a specific package depends on).

• Let’s list all packages installed in the environment: pip freeze

Packages are downloaded from the

Python Package Index https://pypi.org
(you can search for packages here)

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 28 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 Using the Interactive Python Interpreter
• In the terminal, we can check which Python interpreter is being used: which python (where python on Windows)
• To start the interactive python
interpreter: python
• Then issue python statements:

import numpy as np
np.array([1,2,3])
• To exit the interactive python
interpreter: quit()

Make sure the path to the

Python interpreter is in a
sub-folder in the .conda folder

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 29 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 Using the Interactive IPython Interpreter
• We can also use IPython (a more advanced interactive python interpreter): pip install ipython
• To start IPython: ipython
• Then issue python statements:

import numpy as np
np.array([1,2,3])
• To exit IPython: quit()

Make sure the path to the

Python interpreter is in a
sub-folder in the .conda folder

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 30 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 Create and Debug a Simple Program
• Open the Explorer (Ctrl + Shift + E) click this icon to
• Create a file main.py with the contents below: create a new file
def main():
print("Hello World!")

if __name__ == "__main__":
main()
• Open the Command Palette (Ctrl + Shift + P)
• Choose Python: Select Interpreter
• Choose the Python Interpreter in the path ./.conda
• Open the Run and Debug view (Ctrl + Shift + D)
• Click the link → create and launch a python file
• Choose Python Debugger
• Choose Python File
• This creates a subfolder .vscode with the file launch.json in it
• Save launch.json
• Set a break point on the row print("Hello World!")
by clicking in the code editor’s left margin (F9)
• Debug (F5)

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 31 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 Create and Debug a Simple Program
• Two alternatives for a Python program: 2 alternatives
• With the construct
if __name__ == "__main__" print("Hello World!") main.py def main(): main.py
referred to as a Python program. print("Hello World!")

if __name__ == "__main__":
• Without the construct main()
if __name__ == "__main__"
referred to as a Python script.

• The file launch.json (in sub-folder .vscode) { launch.json

tells VSCode what Python file to run when "version": "0.2.0",
debugging (F5). "configurations": [
{
"name": "Python Debugger: Current File",
• F5 runs the command python main.py "type": "debugpy",
"request": "launch",
"program": "${file}",
"console": "integratedTerminal"
}
]
}

debug the .py file open (focused) in the editor

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 32 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 Create a Program with Packages and Modules
.
• Open the Explorer (Ctrl + Shift + E)
├── .conda
├── main.py
• Create a folder structure as shown to the right
├── mymath
│ ├── arithmetic.py
• Create the files as shown to the right
│ └── __init__.py
└── .vscode
• Modify launch.json as below
└── launch.json
{ launch.json
"version": "0.2.0", from mymath.arithmetic import add main.py
"configurations": [
{ def main():
"name": "Python Debugger: Current File", a = 1
"type": "debugpy", b = 2
"request": "launch", print(f"{a} + {b} = {add(a,b)}")
"program": "${file}",
"program": "main.py", if __name__ == "__main__":
"console": "integratedTerminal" main()
}
] def add(a, b): arithmetic.py
} return a + b

• Debug (F5) always debug the main.py file __init__.py

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 33 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 Create a Program with Packages and Modules

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 34 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 Jupyter Notebooks

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 35 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 Jupyter Notebooks
• A Jupyter Notebook is an interactive web-based environment that allows you to write and run Python code
alongside text, visualizations, and other media — all in one document.

• To start Jupyter notebook run the commands below:

pip install notebook

jupyter notebook

• Then open your browser and visit http://localhost:8888

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 36 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 Jupyter Notebooks in VSCode
• Alternatively, we can work with Jupyter notebooks directly in VSCode.
• Create a file with the extension .ipynb, e.g. main.ipynb
• Open the file in VSCode’s editor.
• Select the Python interpreter in the top right of the notebook in the editor.

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 37 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 Jupyter Notebook Cells
• A Jupyter Notebook combines:

• Code cells
Run Python (or other languages) interactively.

• Markdown cells
Add rich-formatted text (headings, lists, links, math via
LaTeX).

• Output cells
Display results, plots, tables inline with your code.

• Integrated data science tools

Easily visualize data with matplotlib, seaborn, plotly, etc.

• It looks like a document where:

• You write code in blocks (cells)

• You see results immediately below each cell

• You can export the notebook to PDF or HTML for sharing

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 38 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 Create a Simple Jupyter Notebook
• Open the Explorer (Ctrl + Shift + E)
• Create a file notebook.ipynb
• In the code editor, click Select Kernel in the far right
• In the Command Palette choose:
• Python Environments
• Select Python Interpreter in ./.conda
• Click the + Code button to create a new code cell
• Enter the code print("Hello World!")
• Use Shift + Enter to run the cell
• The text Hello World! is shown as output
• Click the + Markdown button to create a markdown cell
• Enter the markdown # This is a heading
• Use Shift + Enter to run the cell
• The cell content is formatted as markdown

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 39 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 Google CoLab
• Google Colab (short for Colaboratory) is a free, cloud-based Jupyter notebook environment provided by Google.
• Runs in browser: No installation; just visit https://colab.research.google.com
• Jupyter notebook-based: Same interface and functionality as local Jupyter notebooks
• Free storage: Save notebooks to Google Drive
• Free GPUs/TPUs: Run code on NVIDIA GPUs or TPUs for free (time-limited sessions)
• Pre-installed packages: Comes with many libraries: numpy, pandas, tensorflow, etc.

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 40 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS
 VSCode Documentation
• VSCode has extensive documentation: https://code.visualstudio.com/docs
• To get started, visit:
• Setup:
https://code.visualstudio.com/docs/setup/setup-overview
• Getting Started:
https://code.visualstudio.com/docs/getstarted/getting-started
• Source Control:
https://code.visualstudio.com/docs/sourcecontrol/overview
• Terminal:
https://code.visualstudio.com/docs/terminal/getting-started
• Python Quick Start:
https://code.visualstudio.com/docs/python/python-quick-start
• Data Science:
https://code.visualstudio.com/docs/datascience/overview
• Jupyter Notebooks:
https://code.visualstudio.com/docs/datascience/jupyter-notebooks

Patrick Gabrielsson Data Visualization (C1VI1B) Autumn 2025 41 (41) Visual Studio Code (VSCode) UNIVERSITY OF BORÅS