Level up your dev game with VSCode on WSL

So, you’ve got your shiny Windows 11 setup with WSL, and you’re loving the Linux vibes on your gaming rig. But now you need a proper editor that’s as powerful as it is flexible. Enter Visual Studio Code, the editor that’ll make you forget about those bulky IDEs. Let’s get it installed and ready to rock your WSL environment.

Step 1: Install VSCode on Windows

First things first, get VSCode on your Windows system. Head over to code.visualstudio.com and grab the Windows installer. Don’t forget to check the "Add to PATH" box during installation - future you will thank you when you’re launching VSCode from the terminal.

Step 2: Marry VSCode with WSL

VSCode has this sweet extension called Remote - WSL that lets you work seamlessly between Windows and Linux. Just pop into the Extensions view (Ctrl+Shift+X), search for it, and hit install. Boom, you’re connected!

Step 3: Installing VSCode Inside WSL (because why not?)

Open up your Ubuntu terminal in WSL and run the following commands:

• Update your package list (because that’s just good hygiene):

sudo apt update

• Install dependencies to keep things running smoothly:

sudo apt install -y curl gpg software-properties-common apt-transport-https

• Add the Microsoft repository (yes, we’re living in the future where this is a thing):

curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpg
sudo install -o root -g root -m 644 microsoft.gpg /usr/share/keyrings/
sudo sh -c 'echo "deb [arch=amd64 signed-by=/usr/share/keyrings/microsoft.gpg] https://packages.microsoft.com/repos/vscode stable main" > /etc/apt/sources.list.d/vscode.list'
sudo apt update

• Install VSCode (you’re almost there!):

sudo apt install code

Step 4: Fire Up VSCode in Your Project

Navigate to your project in WSL and launch VSCode directly from the terminal with:

cd ~/ddev-projects/your-drupal-project
code .

VSCode will pop open, ready to be your coding sidekick. Install any recommended extensions to supercharge your setup.

Step 5: Get Cozy with the Integrated Terminal

Say goodbye to context switching—just open the terminal inside VSCode (Ctrl+`) and keep your focus where it belongs: on your code.

Outro:

And there you have it! VSCode on WSL is your new development playground, offering the best of both worlds. Whether you’re tweaking your latest Drupal project or diving into a new stack, you’re now equipped with a powerhouse editor. Happy coding, and may your terminal always be bug-free!