Visual Studio Code and WSL – Development Environment setup

Last updated on September 26th, 2023 at 10:18 am.

In the video above, we’ll guide you through how to set up your development environment using Visual Studio Code (VS Code) and Windows Subsystem for Linux (WSL). This convenient combination allows you to easily integrate your development workflow between the WSL Linux system and VS Code. Instead of typing everything in the WSL command line, you will use Visual Studio Code.

This video is part of my free Ansible tutorial.

Problem : Creating the Project Structure

When using WSL, and not using VS Code with WSL, you have to do everything via the Command line, including creating files and folders for your project.

Here is an illustration of this.

Let’s start by organizing the project structure. First, we’ll create a project directory as follows.

mkdir -p  ~/tuts/ansible/

In this example, we’ve created a directory named ‘ansible’ within ‘tuts’.

Creating an empty Ansible Inventory File

Now, let’s create an INI inventory file. We’ll call it ‘inventory’. If the inventory file has no extension such as yml or yaml, Ansible will recognize it as INI.

cd ~/tuts/ansible/
vi inventory

Inside this ‘inventory’ file, we can define our hosts and groups. To save the file in Vim, press ‘Escape’, then type ‘:wq’ and press ‘Enter’.

# Example inventory
web:
  192.168.1.10
  192.168.1.11

Solution: Use Visual Studio Code with WSL

FYI : This part is best followed by watching the video embedded above. Click here to watch the WSL setup part.

While you can perform all these tasks in the WSL terminal, there’s a user-friendly option, use Visual Studio Code with WSL integration.

If you don’t already have VS Code with WSL installed, you can simply do so by searching for ‘WSL’ in the Vs code apps and clicking ‘Install.’

Then you can connect Visual Studio Code to your WSL distribution. At the bottom left of the screen, click ‘Connect to WSL’ to initiate the connection. Visual Studio Code will start in your chosen WSL distribution.

Please note that if you use a distribution other than Debian, you can select your desired one during the connection setup. Watch the video for the exact step by step illustration.

Accessing Your Project

After connecting, you’ll have access to your project directory within Visual Studio Code file explorer. You can open a folder by clicking ‘File’ > ‘Open Folder’ and selecting your project’s root directory, as in the Windows subsystem for Linux.

If you need to create additional folders or files within Visual Studio Code, you can do so as you normally would with any other project. Your changes will be reflected in your WSL OS as well.

Step 6: Closing the Connection

When you’re done working with the WSL project, you can close the connection to your WSL OS by clicking ‘Remote Explorer’ at the bottom left of VS code and then ‘Close Remote Connection.’

With this setup, you can now easily work with your WSL environment and take full advantage of Visual Studio’s UI, making your Linux development process more user friendly.

In the next part of this series, we’ll look into Ansible configuration .