# Remote IDE (VS Code)

## VS Code one-time setup

{% hint style="info" %}
To use VS Code you must be on a Brown compliant network or connected to the VPN. Please install the [Brown VPN client](https://vpn.brown.edu/) before proceeding.
{% endhint %}

{% hint style="warning" %}
**September 10, 2023:** Some users have reported issues while connecting to the Oscar VS Code remote extension. This is due to a recent change introduced by VS Code. To address this issue

Ctrl (cmd on Mac) + Shift + P > Remote-SSH: Settings

Disable the Remote.SSH: Use Exec Server option

<img src="https://4272811953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LcWJ6pKCQH6l3rl9IQa%2Fuploads%2Fp2hHzmT7I0YZTB4wIpIF%2Fimage%20(1).png?alt=media&#x26;token=c2cf66a0-5344-44a7-b1d2-db33b49fd814" alt="Screenshot of the Remote.SSH configuration that is unchecked." data-size="original">
{% endhint %}

To use VS Code you will need to be connected to the VPN. Please install the [Brown VPN client](https://vpn.brown.edu) before proceeding.

### Step 1: Install VSCode Extension

Install the [Remote Development extension pack](https://aka.ms/vscode-remote/download/extension) for VS Code:

<figure><img src="https://4272811953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LcWJ6pKCQH6l3rl9IQa%2Fuploads%2FPzx0lOtZm6G9w1tYIFmP%2Fvscode_install.png?alt=media&#x26;token=842959ef-0ee7-4cd1-b037-f0022a8181d8" alt="Screenshot of the Remote SSH extension in the VS Code marketplace."><figcaption></figcaption></figure>

### Step 2: Uncheck symlink box

Open VS Code settings and uncheck symlink:

{% tabs %}
{% tab title="Mac" %}
**Code** > **Preferences** > **Settings**
{% endtab %}

{% tab title="Windows / Linux" %}
**File** > **Preferences** > **Settings**
{% endtab %}
{% endtabs %}

Search for `symlink` and make sure the symlink searching is unchecked

![The symlink toggle setting is dispalyed as Follow Symlinks](https://4272811953-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LcWJ6pKCQH6l3rl9IQa%2F-Mfc9K3hESjQmkr6wjSm%2F-MfcEEm-c6-L5-T4WZZ6%2FScreen%20Shot%202021-07-27%20at%209.52.23%20AM.png?alt=media\&token=5aa9b4a7-6f9f-4c55-8cc3-df507c6e695b)

### Step 3: Setup Passwordless SSH

Make sure you have set up passwordless SSH authentication to Oscar. If you haven't, please refer to this [documentation page](https://docs.ccv.brown.edu/oscar/connecting-to-oscar/ssh/ssh-key-login-passwordless-ssh).

{% hint style="info" %}
If you have **Windows Subsystem for Linux (WSL)** installed in your computer, you need to follow the instructions for Windows (PowerShell).
{% endhint %}

### Step 4: Edit the SSH config file

Edit the `config` file:

{% tabs %}
{% tab title="Mac / Linux" %}
The `config` file is located at:

`~/.ssh/config`
{% endtab %}

{% tab title="Windows" %}
The `config` file is located at:

```
C:\Users\<uname>\.ssh\config
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
If you have **Windows Subsystem for Linux (WSL)** installed in your computer, you need to follow the instructions for Windows (PowerShell).
{% endhint %}

Edit the `config` file on your local machine, add the following lines. Replace `<username>` with your Oscar username.

```ssh-config
# Jump box with public IP address
Host jump-box
    HostName ssh.ccv.brown.edu
    User <username>

# Target machine with private IP address
Host ccv-vscode-node
    HostName vscode1
    User <username>
    ProxyCommand ssh -q -W %h:%p jump-box
```

### Step 5: Fixes

***September 10, 2023:*** Some users have reported issues while connecting to the Oscar VSCode remote extension. This is due to a recent change introduced by VSCode. To address this issue:

```
Ctrl (cmd on Mac) + Shift + P > Remote-SSH: Settings
Disable the Remote.SSH: Use Exec Server option
```

### Step 6: Connect for the first time

In VS Code, select **Remote-SSH: Connect to Host…** and after the list populates select `ccv-vscode-node`

![Screenshot of a configuration dropdown in VS Code with "Remote-SSH: Connect to Host" highlighted.](https://4272811953-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LcWJ6pKCQH6l3rl9IQa%2F-Mj4momcqp0OE776MVEI%2F-Mj4nSLSBBnJMYZ3zLaP%2FScreen%20Shot%202021-09-08%20at%2010.24.42%20AM.png?alt=media\&token=83e0b8f4-94b6-4881-925a-633a7d397d07)

<figure><img src="https://4272811953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LcWJ6pKCQH6l3rl9IQa%2Fuploads%2FTnvWX1c1mYK9XoAb1p7Q%2Fvscode_setup.png?alt=media&#x26;token=1534f050-017d-4b41-bc6f-72b76065e9b8" alt="Screenshot of a configuration dropdown in VS Code with &#x27;ccv-vscode-node&#x27; highlighted."><figcaption></figcaption></figure>

### Step 7: Initial Setup

Install and set up of VS Code

{% tabs %}
{% tab title="Mac / Linux" %}
After a moment, VS Code will connect to the SSH server and set itself up.
{% endtab %}

{% tab title="Windows" %}
After a moment, VS Code will connect to the SSH server and set itself up. You might see the Firewall prompt, please click allow.

![A windows defender pop-up prompting the user to allow firewall connectsions through VS Code on public networks.](https://4272811953-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LcWJ6pKCQH6l3rl9IQa%2F-MkeAkAIc04_aUs27xSJ%2F-MkeExrETYrv2Cw_uK1O%2FCapture_5.PNG?alt=media\&token=9b34b8bc-a0a7-4ab1-a685-a3dc45c448f8)
{% endtab %}
{% endtabs %}

### Step 8: Configure VS Code

{% hint style="info" %}
Important: Please run the following to add a settings.json file to your config. This is because the filewatcher and file searcher (rg) indexes all the files you have access to in your workspace. If you have a large dataset (e.g. machine learning) this can take a lot of resources on the vscode node.
{% endhint %}

Connect to VS Code first.

You can either create a symlink via the `ln` command below,

```bash
cp -v /oscar/runtime/opt/vscode-server/ccv-vscode-config/settings.json /users/$USER/.vscode-server/data/Machine/settings.json
```

or manually create `/users/$USER/.vscode-server/data/Machine/settings.json` file with following contents

```json
{
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/**": true,
    "/usr/local/**": true,
    "/oscar/home/**": true,
    "/oscar/data/**": true,
    "/oscar/scratch/**": true
  },
  "search.followSymlinks": false,
  "search.exclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/**": true,
    "/usr/local/**": true,
    "/oscar/home/**": true,
    "/oscar/data/**": true,
    "/oscar/scratch/**": true
  }
}
```

## Reconnect to VS Code

1. Click the green icon "Open a Remote Window" in the bottom left corner of VS Code Window. Then click "Connect to Host" in the drop down list.

<figure><img src="https://4272811953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LcWJ6pKCQH6l3rl9IQa%2Fuploads%2Fy9cFqEszuHOlbecDNkMQ%2Fimage.png?alt=media&#x26;token=b675393a-c0df-4b56-b7e0-756aa60b779f" alt="Screenshot of the VS Code search field with &#x27;connect to host&#x27; highlighted."><figcaption></figcaption></figure>

2\. Select the `ccv-vscode-node` option to connect to Oscar.

<figure><img src="https://4272811953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LcWJ6pKCQH6l3rl9IQa%2Fuploads%2FTnvWX1c1mYK9XoAb1p7Q%2Fvscode_setup.png?alt=media&#x26;token=1534f050-017d-4b41-bc6f-72b76065e9b8" alt="Screenshot of a host select option on VS Code with &#x60;ccv-vscode-node&#x60; selected."><figcaption></figcaption></figure>