How to Use VSCode, WSL, and GitHub for Coding: A Complete Guide

Using Visual Studio Code (VSCode), Windows Subsystem for Linux (WSL), and GitHub together provides a powerful workflow for coding, particularly for cross-platform development. This guide will walk you through setting up your environment, working with repositories, running code, and managing changes.

Prerequisites

Before starting, ensure you have:

1. VSCode installed: Download from Visual Studio Code.
2. WSL installed: Follow the Microsoft guide to install WSL (Ubuntu is a good choice).
3. Git installed within your WSL distribution.
4. A GitHub account: Sign up at GitHub.

Step 1: Setting Up the Environment

Configure WSL

1. Install WSL and a Linux Distribution: Open PowerShell as an administrator and run:

   wsl --install -d Ubuntu
   

   Restart your computer if prompted.

2. Update and Install Dependencies in WSL: Open WSL terminal (search for “Ubuntu” in your Start menu) and run:

   sudo apt update && sudo apt upgrade -y
   sudo apt install git build-essential -y
   

Integrate VSCode with WSL

1. Install the Remote - WSL Extension:
   • Open VSCode.
   • Go to the Extensions view (Ctrl+Shift+X), search for “Remote - WSL”, and click Install.
2. Open a WSL Window in VSCode:
   • Open VSCode.
   • Press Ctrl+Shift+P to bring up the Command Palette.
   • Type “Remote-WSL: New Window” and select it.
   • This will open a new VSCode instance connected to WSL.
3. Verify WSL Integration:
   • Open a terminal inside VSCode using Ctrl+\ or View > Terminal.
   • Ensure the terminal is set to WSL (it should say something like “bash” or “Ubuntu”).
   • If it defaults to PowerShell, use the dropdown in the terminal to select your WSL terminal.

Step 2: Cloning a Repository from GitHub

1. Generate an SSH Key in WSL: Run the following in the WSL terminal:

   ssh-keygen -t rsa -b 4096 -C "[email protected]"
   eval "$(ssh-agent -s)"
   ssh-add ~/.ssh/id_rsa
   

   Display the public key:

   cat ~/.ssh/id_rsa.pub
   

   Copy the output and add it to your GitHub account under Settings > SSH and GPG keys.

2. Clone the Repository Using WSL: Navigate to your preferred directory in WSL (e.g., cd ~/projects) and run:

   git clone [email protected]:username/repository.git
   

   Replace username/repository with your repository’s SSH URL. Move into the cloned repository:

   cd repository
   

3. Open the Repository in VSCode: Still in your WSL terminal, use this command to open the repository:

   code .
   

   This will launch VSCode with the repository loaded, and WSL as the backend.

Step 3: Making and Testing Changes in WSL

1. Editing Files in VSCode: You can now edit files directly in VSCode. Changes are saved to the repository within the WSL filesystem.

2. Running Code in WSL: Use the integrated terminal in VSCode to run your code:
   • Open the terminal with Ctrl+\ or from the menu: View > Terminal.
   • Ensure the terminal is running WSL (you can switch from PowerShell to WSL using the dropdown menu in the terminal).

   Example: If you’re working with a Python script:

   python3 script.py
   

   To install dependencies:

   pip install -r requirements.txt
   

3. Using Debugging Features:
   • Set breakpoints in your code directly in VSCode.
   • Use the debug controls in the sidebar to start and manage debugging sessions.

Step 4: Committing and Pushing Changes to GitHub

1. Stage Changes: Run the following in the integrated WSL terminal in VSCode:

   git add .
   

2. Commit Changes: Commit with a meaningful message:

   git commit -m "Updated script.py with new features"
   

3. Push Changes to GitHub: Push your changes back to the repository:

   git push origin main
   

4. Pulling Updates from GitHub: If there are changes on the remote repository, pull them before making further updates:

   git pull origin main
   

Frequently Asked Questions

Where Should I Run Commands?

• Use the WSL terminal for commands like git, python3, or code ..
• Use the integrated terminal in VSCode for convenience when editing and testing.

Can I Access My WSL Files from Windows?

Yes, you can access your WSL files from Windows using the \\wsl$\ network path, such as \\wsl$\Ubuntu.

Can I Switch Between PowerShell and WSL in VSCode Terminal?

Yes! Use the dropdown in the integrated terminal to select between terminals (e.g., WSL or PowerShell).

With this setup, you can seamlessly integrate Linux commands, version control, and advanced code editing in a single workflow. This is an ideal environment for cross-platform development and collaborative coding projects. Enjoy the efficiency and flexibility of this modern toolchain!