/
VSCode

VSCode

Overview

A guide on setting up VSCode for remote tunneling into the supercomputers using a local client or web browser.

It is not advised to connect to the supercomputers using VSCode’s Remote SSH. Doing so will cause several persistent processes to run on the login nodes, resulting in usage violation emails.

Please use one of the following methods below instead

VSCode Setup

VSCode is for both managing remote files stored on supercomputer storage, as well as providing a rich IDE for development. This can be accomplished through the use of the Visual Studio Code CLI Server. Follow these steps to prepare a job allocation for the VSCode background server.

There are three ways to set up VSCode:

 

Create a VSCode Tunnel Via the Web Portal

  1. Navigate to the web portal (https://sol.asu.edu or https://phx.rc.asu.edu )

  2. Under Interactive Apps, Select “VSCode Server”

Sol Web Portal showing the dropdown menu for interactive apps, VSCode Tunnel is highlighted

  1. Fill out the job options, and click “Launch”

  2. Once the GitHub Code is shown, click “Copy Code and Login To GitHub”

A job card from the web portal showing a VSCode tunnel job awaiting github authentication

  1. Sign in with Github, using the code that was automatically copied to your clipboard

    1. See the Logging in With GitHub section below for information

  2. Go back to the web portal, after 20-30 seconds, a button will appear to launch VSCode in your browser or desktop. If the button does not appear, try refreshing the page.

A job card from the web portal showing a VSCode tunnel job that has been authenticated with github, now depicting two buttons to connect to the tunnel

In order to connect with VSCode desktop, the Remote - Tunnels extension must be installed. If prompted, always select “GitHub Authentication”

Create a VSCode Tunnel Via the Command-line

  1. Log into the supercomputer and start the VSCode tunnel with the shortcut vscode. A separate job session will be created in the background to run the service daemon.

[wdizon@login02:~]$ vscode * * Visual Studio Code Server * * By using the software, you agree to * the Visual Studio Code Server License Terms (https://aka.ms/vscode-server-license) and * the Microsoft Privacy Statement (https://privacy.microsoft.com/en-US/privacystatement). * To grant access to the server, please log into https://github.com/login/device and use code 1EAB-9CE6

  1. The vscode command takes all the same arguments as interactive . Additional arguments you wish to pass to your job allocation can be done in the same command, e.g., vscode -t 1-0 (for 1 day long), etc. See Slurm - SBATCH Header / Flag Cheat Sheet for more options.

If a GPU is required, use the command: vscode -p general --gres=gpu:1 where gpu:1 can be any valid GPU designation, e.g., gpu:a100:1 or gpu:a30:3 . Using gpu:1 gets the first-available GPU.

  1. Review the previous output and identify both the github login URL and accompanying code:
    ..., please log into https://github.com/login/device and use code 1EAB-9CE6

    1. See the Logging in With GitHub section below for information

  2. The terminal session will now provide additional guidance for connecting your IDE:

To grant access to the server, ... Open this link in your browser https://vscode.dev/tunnel/sol/packages/apps/vscode

  1. Ensure the Remote - Tunnels extension is installed in your workstation’s VSCode.

A snipit showing the VSCode Remote - Tunnels plugin in the Microsoft extension store

2. Press F1 and type in/select “Remote-Tunnels: Connect to Tunnel…”

  1. If prompted for Auhentiton Type, select “GitHub” and follow the instructions to login with GitHub

  2. Select the name of the tunnel. It will almost always be the supercomputer name and your ASURITE

You can also identify the name of the tunnel from the previous steps:

Open this link ... https://vscode.dev/tunnel/sol/packages/apps/vscode ^ tunnelname = sol
A screnshot from VSCode showing the lower left corner with the name of the remote tunnel

The name of the connected-to tunnel will appear in the IDE at the bottom left.

Run the Open-Source Code Server From the Web Portal

  1. Navigate to the web portal (https://sol.asu.edu or https://phx.rc.asu.edu )

  2. Under Interactive Apps, Select “VSCode Server”

Sol Web Portal showing the dropdown menu for interactive apps, VSCode Server is highlighted

  1. Fill out the job options, and click “Launch”

  2. Once the job starts, click “Connect to VSCode Server”

A job card from the web portal showing a VSCode server job ready to connect

  1. Start coding in the provided web-based code server

A screenshot of code server running on Sol in a web browser

Please note that this is the open-source version of VSCode, and does not support the Microsoft Extension Store, so some Microsoft Extensions, such as Co-Pilot, are not available.

To use Co-Pilot, you will need to use a VSCode Tunnel

Logging In With GitHub

The XXXX-XXXX code will be different on every invocation. This code connects your background VSCode daemon to github.com , which provides half the tunneling functionality; the other half is connecting your browser or VSCode IDE to the other end of the tunnel. The VSCode Extension reaches out online to find any tunnels you’ve created through this process.

  1. Open up the URL in your workstation browser:

A screenshot of logging into GitHub and pasting a device activation code

First, log into your GitHub account (required). The browser will then prompt you for the above code.

  1. Authorize GitHub with the Green button:

A screenshot of authorizing github for vscode

  1. The connection should now be complete:

  1. If using a terminal session, you will now see additional guidance for connecting your IDE:

To grant access to the server, ... Open this link in your browser https://vscode.dev/tunnel/sol/packages/apps/vscode

If using the Web Portal, within a minute you see the Open in VSCode Web/Desktop buttons

A job card from the web portal showing a VSCode tunnel job that has been authenticated with github, now depicting two buttons to connect to the tunnel

Additional Help