Visual Studio Code Setup
Visual Studio Code (VS Code) is a free text/code editor which runs on Windows, macOS, and Linux.[1]
Video Walkthrough
A video working through this whole process (except for SSH keys) is available on Drexel Streams (Kaltura):
https://1513041.mediaspace.kaltura.com/media/t/1_dpdu5t39
(May require login with Drexel credentials.)
Public access via Office 365:
Obtaining VS Code
Download from here: https://code.visualstudio.com/
Extensions
Via extensions, VS Code can provide extended functionality, including:
- terminal for SSH
- mini file "explorer" for remote systems via SSH, including the ability to edit files directly without needing to use SCP/SFTP to transfer files back and forth
Using VS Code to develop code and interact with Picotte
Please consult the official documentation.[2]
The following extensions are required to work on Picotte:
- Remote Development
- This is a bundle of three extensions: Remote - SSH, Remote - Containers,
and Remote - WSL
- Remote - SSH: Work with source code in any location by opening folders on a remote machine/VM using SSH.
- Remote - Containers: Not applicable for Picotte.
- Remote - WSL: Get a Linux-powered development experience from the comfort of Windows by opening any folder in the Windows Subsystem for Linux.
- This is a bundle of three extensions: Remote - SSH, Remote - Containers,
and Remote - WSL
- Remote Explorer - you may need to install the pre-release version.
See the official instructions on how to install VS Code extensions. Installation is done within VS Code.
SSH configuration
Some configuration on your personal computer may need to be done to work remotely using VS Code.
See:
- SSH configuration -- this is done within VS Code by clicking the Remote Explorer icon in the left toolbar, and then clicking the gear icon (Configure)
- SSH Keys for Passwordless Logins - Using SSH keys will remove the need to save your Picotte password within VS Code itself, and prevent multiple prompts for the password.
Connecting to Picotte with VS Code Remote Explorer
In this example, our .ssh/config contains the following configuration
for the user rbatty on picotte001:
Host picotte001
HostName picotte001.urcf.drexel.edu
User rbatty
The username is specified because your username on your PC may not be the same as your username on Picotte.
When you have installed the Remote Explorer extension, you will see a Remote Explorer icon in the left sidebar of VS Code:
Clicking on it should bring up one or more "SSH TARGETS" in the left
panel of the main VS Code window. In the example below, you can see the
host "picotte001" (corresponding with the Host config above).
Right-click on the line, or click the "→" icon to connect in the current
window:
It will ask you for your password a couple of times.
Next, click on the Explorer icon in the left toolbar: it is the topmost icon. You will see a section "NO FOLDER OPENED" in the left panel, with a message "Connected to remote." and a button labeled "Open Folder".
When you click "Open Folder", it will pop up a sheet presenting you with your Picotte home directory (folder) as a default. Use that to start with. You can repeat this process, and select your group directory (or any other directory you have access to) later:
For convenience, you can setup SSH keys for passwordless logins. If you have done so before this, VS Code will not prompt for passwords. VS Code will also take a few minutes to install software on Picotte which serves as the intermediary to allow editing files on Picotte (amongst other things).
Once you have done this once, the Explorer panel should show your home directory (folder) on Picotte, with a list of all files, includin ones which are not usually visible when using the command line (i.e. files with names starting with ".", which are normally hidden). Here, the explorer shows "RBATTY [SSH: PICOTTE001]":
If the Explorer panel does not show your home directory on Picotte, click the "Open Folder" button, and select it.
You can create a new file or folder in your home directory on
picotte001 by clicking the appropriate icon:
The files/folders are being created on picotte001, and no copy exists
on your PC. There is no need to transfer files back and forth.
Once you are done, you can close the remote connection before quitting VS Code. If you do not close the remote connection, the VS Code server that your Picotte account is running may continue running.
Connecting the Group Directory in VS Code Explorer
In the above, you connected to your home directory on Picotte.
To connect to your group directory (something like
/ifs/groups/myrsrchGrp), you have to first be connected to Picotte.
Then, from the File menu, select “Open Folder…”. A text entry sheet will
appear, and you can type in the full path “/ifs/groups/myrsrchGrp”.
You can do this for multiple different directories you commonly work in.
SSH terminal in VS Code
Use the "Terminal" menu, or the keyboard shortcut Ctrl Shift ` to
open a terminal on picotte001 within VS Code:
Jupyter on Picotte in your PC browser via VS Code
See: Jupyter via VS Code
Stop Multiple Prompts for Password
In this process, VS Code will probably prompt for a password more than once. That can be stopped by using SSH keys. See: SSH Keys for Passwordless Logins
References
[2] Visual Studio Code Documentation - Remote Development using SSH