VS Code - Remote Development on CSIL

Owned by Vic Breen
Last updated: May 17, 2023 by Marc Miller
5 min read

Overview

The following page is intended to guide a user through setting up a local installation of the Visual Studio Code and the Remote Development extension pack. This IDE makes it easy to do remote development work on the CSIL lab systems where all the classwork computation is to be done and all files stored in your CoE account’s home directory. A valid College of Engineering account is required to use CSIL, so it’s important to ensure you have the correct credentials, and that they work, before following the installation guide.

Verify Your Credentials

Before following the guide below, please go to https://accounts.engr.ucsb.edu/maintain/login and make sure you can log in with your College of Engineering username and password. If you cannot, please follow this link for next steps, including how to change your password: Passwords

Accidental Lock-out

CSIL has a dynamic blocklist that will lock out accounts by source IP address after several consecutive login failures. Go to the following link for information on this:

https://ucsb-engr.atlassian.net/l/c/i9rB1xU0

How to install VS Code for Remote Development

 

  • Install VS Code using the installer found at https://code.visualstudio.com/download

  • Run VS Code

  • Now we need to install the extension pack to enable remote development. The easiest and fastest way is to use the Quick Open box. Use the shortcut Ctrl+P (Windows) or ⌘+P (MacOS) to get the Quick Open box at the top. Copy and paste the command listed below into the box and press Enter. That will start the installation of the Remote Development extension pack:

    • ext install ms-vscode-remote.vscode-remote-extensionpack

  • Install an OpenSSH compatible SSH client on your local system. See this page section "Installing a supported SSH client" and observe any steps required to do this on your local OS. https://code.visualstudio.com/docs/remote/troubleshooting#_installing-a-supported-ssh-client

  • For more information about the remote extensions, please visit Microsoft's documentation here: https://code.visualstudio.com/docs/remote/remote-overview

  • Open the VS Code 'command palette' with Ctrl+Shift+P (Windows) or Shift+⌘+P and search for ssh config which should yield one result. Click on it to open your local SSH config file.

  • Configure it as shown with the following settings:
    ** Host & Hostname values should both be csil.cs.ucsb.edu
    ** User value must be your College of Engineering username all by itself, no @ symbols, no domain names. Just the CoE account's username. Please DO NOT use an email address like "some_student@ucsb.edu" as the username.

  • Save the SSH config file with Ctrl+S (Windows) or ⌘+S (MacOS)

  • Close the file using the little "x" close box on its tab at the top, or Ctrl+F4 (Windows) or ⌘+W (MacOS). If you didn't save before, you will be prompted to save before closing the file.

  • Click the remote button

    in the lower left corner of the VS Code window.

  • Choose "Connect to Host"

  • Choose csil.cs.ucsb.edu. A new window will open with the SSH - Remote attempting to open an SSH session to CSIL.

    • If you see "Are you sure you want to continue?" choose "Continue"

  • You may close the original VS Code window and leave the newly logged in remote window open. The window you need to keep will have "SSH: csil.cs.ucsb.edu" showing in the colored remote button in the lower left corner.

  • Go to Extensions on the left sidebar. Search for Python and click the little "install" button in the first result which should be Microsoft's official extension. The extension's info page will display in the right hand pane. You should see under the top title area "Extension is enabled on 'SSH: csil.cs.ucsb.edu'"

Setting Up the Remote Environment

  • Open the Terminal pane with Ctrl+Shift+` (Windows) or Ctrl+` (MacOS). The last keystroke is the "back tick" or "accent grave" key below ESC. The Terminal pane shows up at the bottom and can be resized as you like.

  • Choose the "Terminal" tab and you should see something like username@csilvm-## in the bash prompt. This window pane will let you execute bash commands on the remote SSH server.

  • Using the remote SSH terminal at the bottom, create a new folder to store your development files.

  • The "Terminal" tab is where your stderr and stdout will display when scripts run.

  • Open the files sidebar using the "two papers" icon.

  • Click "Open Folder" button and select the new folder/directory you previously created in the bash prompt.

  • The window will reload and then you will be prompted to re-enter your password. Please do so.

  • You will be prompted to trust the authors of files in this folder. This is your own directory, so go ahead and choose "Yes, I trust the authors" button. DO NOT check the box above it, it's inappropriate for this use case.

  • The file explorer bar on the left will now show an empty directory. Choose the "New File" button

    and create hello_world.py and fill it with a chunk of basic test code.

  • Run it with Ctrl+F5 (same on Windows or MacOS), or go to Run menu at the top, and "Run Without Debugging"). The "Terminal" pane will show you the command VS Code ran on your behalf and the output.

How to Solve Common VS Code Issues

Microsoft Visual Studio Code Issues

Why can't I login graphically? : Going over quota