---
marp: true
title: Visual Studio Code for WSL
author: P.Y. Barriat
description: How to use VSCode with WSL
backgroundImage: url('assets/back.png')
_backgroundImage: url('assets/garde.png')
footer: 14/06/2023 | Visual Studio Code for WSL | PY Barriat
_footer: ""
paginate: true
_paginate: false
math: true
---

Visual Studio Code for WSL<!--fit-->
===

https://gogs.elic.ucl.ac.be/pbarriat/learning-vscode

![h:250](assets/WSL2.png)![h:250](assets/logo_vscode.png)

**Pierre-Yves Barriat**
ELIC Training Sessions `June 14th, 2023`

---

# What is WSL :question:

**Windows Subsystem for Linux** (WSL) allows you to leverage the benefits of Linux package management and command line tools to streamline your development workflow. This is particularly useful for web developers and **data scientists**

![h:200](assets/WSL1.png)

The easiest way to access your Ubuntu development environment in WSL is using **Visual Studio Code** via the built in *Remote extension*

---

# What is Visual Studio Code :question:

**Visual Studio Code** (VS Code) is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux.

It has a rich ecosystem of extensions for languages (such as C++, Fortran, Java, Python, etc) and runtimes (Git, Jupyter, etc)

VSC is one of the most popular and powerful text editors used by software engineers today 
> free, open-source and [available](https://code.visualstudio.com/download) for macOS, Windows and Linux :+1:

---

# WSL on a Windows UCLouvain PC

Linux from CII interface is **overkill** 
> based on Virtualbox: heavy workload :fearful:

No auto process (yet) to install WSL from UCLouvain IT support

You must install WSL by your own with the **Administrator access** from CII interface

**Don't worry**: just follow the guideline below... :muscle:

---

![h:600](assets/CII.png)

---

## Windows required features

1. From CII interface, ask for an **Admin access**

2. Open a **Powershell terminal** in **Administrator mode**

3. Copy paste this line and press *Enter*

```sh
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
```

4. Copy paste this line and press *Enter*

```sh
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
```
5. Restart your computer

---

## Install WSL2

1. From CII interface, ask for an **Admin access**

2. Download the **WSL2 update** and install it (double click on the file)

   https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi

3. Open a **Powershell terminal** in **Administrator mode**

4. Copy paste this line and press *Enter*

```sh
wsl --set-default-version 2
```

---

## Install Ubuntu 22.04 from Microsft Store

![h:500](assets/ubuntu_wsl.png)

---

## First configuration of Ubuntu

(Open Ubuntu) and choose a login/password

![h:250](assets/ubuntu_terminal.png)

In the Ubuntu terminal do

```bash
sudo apt update

sudo apt upgrade
```

---

## Graphical User Interface

Open a **Powershell terminal** in **User mode** and do

```sh
wsl --update
```

> maybe an Admin login/password is required (so ask for with CII interface)

Open a new **Ubuntu terminal** and do

```bash
sudo apt update
sudo apt upgrade
sudo apt install x11-apps -y
```

---

# VS Code 

You can install Visual Studio Code from the web link [here](https://code.visualstudio.com/download)

> during installation, under the **Additional Tasks step**, ensure the **Add to PATH** option is checked

![h:350](assets/vscode_install.png)

---

Open VS Code and install **WSL for VS Code**

![h:525](assets/vscode_wsl.png)

---

Connect to WSL using a **distro** (Ubuntu 22.04) 

![h:525](assets/vscode_distro.png)

---

Install extensions for **"WSL: Ubuntu 22.04"**

- Python
- Jupyter

![h:400](assets/vscode_extensions.png)

---

# Jupyter Notebook in VS Code

Create a new Juyter Notebook

![h:200](assets/new_ipynb.png)

Fill the first cell

```python
import numpy as np
```

---

Try to run the cell

> you must choose a Python environment first : Python 3.6 and **Install**
>
> ![h:100](assets/vscode_pyenv.png)
> ![h:150](assets/vscode_kernel.png)

But... :boom:

![h:100](assets/vscode_nopip.png)

---

So open your first **WSL terminal** in VS Code

![h:300](assets/vscode_terminal.png)

In this **Linux** terminal, do

```bash
sudo apt install python3-pip
```

---

Try again to run the cell !

But now... :boom:

![h:450](assets/vscode_missing.png)

---

In your **Linux** terminal, install the missing Python extension ... 

```bash
pip instal numpy
```

![h:350](assets/vscode_add_ext.png)

... and run the cell again: great, it's OK now :smiley:

---

## Let's try a full notebook example

Install Git : `sudo apt install git -y`

Now clone this **Git repository**

```bash
git clone https://gogs.elic.ucl.ac.be/pbarriat/learning-vscode
```

> You don't already know what's Git :question:
> Shame on you ! :confounded:
>
> **It's not to late**: take a look here
> https://gogs.elic.ucl.ac.be/TECLIM/Git_Training

Now open the file `example.ipynb`

---

The first cell implies you must install some requirements

To run this example, install the extensions below

```bash
pip install netCDF4
sudo apt install libgeos-dev libgdal-dev
pip install cartopy
```

Now, try to run all the cells of this notebook :exclamation:

---

# VS Code nice extensions

- `Remote - SSH` : lets you use any remote machine with a SSH server
- `Tabnine` : code faster with AI code completions
- `Regex Previewer` : shows the current regular expression's matches
- `Modern Fortran` : Fortran syntax is missing in built-in version

---

## VSCode - Remote SSH : example

Select `Remote-SSH: Open Configuration File`

```bash
Host cyclone
    HostName cyclone.elic.ucl.ac.be
    User pbarriat
```

Visual Studio Code is now configured and ready to connect to your server :

click on the green `Open a remote window` button in the bottom left-hand corner and select `Remote-SSH: Connect to Host`

> On ELIC workstation, choose a Python environment from `ELIC_Python` module : `/opt/easybuild/...`

---

# Ubuntu with WSL (and without VS Code)

I strongly recommand to install `Windows Terminal Preview` from **Microsft Store**

![h:350](assets/term_preview.png)

---

# Visual Studio Code for WSL :speech_balloon: