Setting up Visual studio code (VS Code) for virtual machine (vagrant).

The first time I set up my virtual machine, I was excited. Why? because it was a relief. VirtualBox is easily the best virtualization system for me. Not just for me but the desktop usage as well. Should I mention its performance and reliability which is on a great level and other benefits and features that make everyday work very easy? That will be in another blog post.

Today, let's focus on how to connect visual studio code to vagrant.

when I'm in a folder in my terminal and want to connect it to an IDE like vscode which I often use since Atom deprecated, I use this code . from within the folder I want to open. It's just the regular shortcut you'll see programmers use to open their code from terminal with visual studio code.

On this particular day, when I was in the folder after setting up my Virtual Machine. I had navigated to the folder and was about to open the vscode from terminal. I received a shocking return statement "Command 'code' not found, but can be installed with: ...". I was like no, I've been using this all my life since my programming inception.

Besides, I checked on Google on a way out and I felt I should share my discovery in case someone else is in my shoes. Okay, I know we don't wear same shoe size.

To use Visual Studio Code (VSCode) with a Vagrant VM, you can follow these general steps:

Install Visual Studio Code: If you haven't already, install Visual Studio Code on your local machine. You can download it from the official website: Visual Studio Code.
Install the "Remote - SSH" Extension: In VSCode, install the "Remote - SSH" extension. This extension will allow you to work with a remote machine, such as your Vagrant VM, using VSCode. You can install it from the Extensions view or use (Ctrl+Shift+X).
Connect to Your Vagrant VM: Open the Command Palette or use (Ctrl+Shift+P) in VSCode and select "Remote-SSH: Connect to Host." Enter the SSH connection string for your Vagrant VM. The format is usually vagrant@127.0.0.1 -p 2222, but it may vary depending on your Vagrant configuration.
Install the VSCode Server on the Vagrant VM: Follow the prompts in VSCode to install the VSCode Server on your Vagrant VM. This is necessary for the remote development features to work.
Open a Folder or Workspace:

Once connected, you can open a folder or workspace from your Vagrant VM. Use the "File" menu or the code command in the terminal.

That works for me and now, you should be able to use VSCode to edit files on your Vagrant VM. The VSCode window will feel like a local instance, but it's actually running on your machine and interacting with the Vagrant VM over SSH.

Hope that was helpful? Not really!

Setting up remote on vs code.

Now let us head back to step 3 above. Before doing this part you must have completed the 5 steps given. That way you'll understand even if you didn't get it on your first attempt.

Back to step 3 Connect to Your Vagrant VM:

After pressing the control+shift+p, head over to your terminal and Check Vagrant SSH Key:

since you're using Vagrant, it might have its own SSH key for authentication.
Run the following command in the directory where your Vagrantfile is located:
```
  bashCopy codevagrant ssh-config
  or 
  vagrant ssh-config
```
Look for the IdentityFile line. It shows the path to the private key used by Vagrant. Copy the information it will later be saved in your config file for your remote ssh.

Specify SSH Key in Visual Studio Code:
- When connecting using the "Remote - SSH" extension, you can specify the SSH key in your Visual Studio Code settings.
- Press Ctrl + , to open the settings, and search for "Remote - SSH: Open Configuration File."
- Add or update the configuration file you copy with the correct identityFile setting. What you have copied should be in this format:
```
  jsonCopy code{
    "host": "your-vm-ssh-connection-string",
    "user": "your-username",
    "identityFile": "/path/to/your/private-key",
    // ...
  }
```
- Replace "your-vm-ssh-connection-string," "your-username," and "/path/to/your/private-key" with the actual values.
Restart Visual Studio Code:
- After making changes, close and reopen Visual Studio Code to ensure the new settings take effect. Though this is not necessary, some vscode will run it automatically once it's saved.
Check on which platform to use:

When you connect to a VM using the "Remote - SSH" extension in Visual Studio Code, you need to select the platform based on the operating system of the VM, not Vagrant itself.

If you created your VM using Vagrant and didn't specify a different base box, it's likely running a Linux distribution. In that case, choose "Linux" as the platform.

Here's a general guideline:
- If you're using a Linux-based Vagrant box (e.g., Ubuntu, CentOS):
  - Choose "Linux" as the platform.
- If you're using a macOS-based Vagrant box:
  - Choose "macOS" as the platform.
- If you're using a Windows-based Vagrant box:
  - Choose "Windows" as the platform.

If you're not sure about the OS of your Vagrant VM, you can check the Vagrantfile in the directory where you initialized the VM. Look for the configuration line that specifies the base box or the box URL. The name of the base box or the URL usually includes information about the operating system.

Wait for Connection Setup:
- After selecting the platform, Visual Studio Code will set up the connection to the remote machine.
- It might take a moment to download any necessary components and establish the connection.
Authenticate (if needed):
- If this is your first time connecting to the VM, you may be prompted to authenticate. Follow the prompts to enter any necessary credentials (username and password).
Check VM SSH Configuration:
- Make sure your Ubuntu VM allows SSH access with the provided key.
- Verify the contents of the ~/.ssh/authorized_keys file on the VM.
Retry Connection:
- Try connecting again using the "Remote - SSH" extension in Visual Studio Code.

If the issue persists, double-check your SSH key setup, both locally and on the VM, and make sure you're using the correct key and configuration.

I hope this helps.

How to connect Vagrant VM with VSCode editor