The editor we are using in class, Visual Studio Code ("vscode") is available for you to install on your own personal computer. This page will show you how to download and install vscode, and show you how to access files on the CS lab machines from your own computer.

If you’ve already set up the Remote SSH Extension and just want to connect to the CS machines, you can skip to the how to use Remote SSH section.

Installing vscode

Starting at the vscode website you should be able to select the version most appropriate for your computer. For example, on a Mac, you should be presented with a button that allows you to "Download Mac Universal" and on Windows you should see "Download for Windows". Click on the appropriate Download button and the files should begin to download automatically.

  • If you have a Mac, you should have downloaded a zip file for Visual Studio Code. Double-click the zip file to extract the Visual Studio Code program. Drag the icon to your Applications folder to install it.

  • If you have Windows, you should have downloaded an executable file. Double-click the executable to begin the installation process. If you are unsure how to continue, you may find the first 2 minutes of this YouTube video helpful.

When you open vscode for the first time, you can select a Theme (e.g. Dark, Light, High Contrast). Choose whichever theme works best for you. You can skip by any other items that it shows you until you get the welcome page.

Now that vscode has been installed, you can use it to edit files on your own computer, but you cannot yet use it edit files on the CS network. You will not be able to edit or submit your lab assignments for the class until you can edit files on the CS network.

Installing the Remote-SSH Extension

In order to edit and submit files for class, you will need to install an Extension in vscode.

  1. Start by opening vscode if it is not already open.

  2. On the left side of your screen, you should see several icons. Click on the Extensions icon on the left side of the vscode window to open the Extensions panel.

  3. At the top, in the Search bar, type in "Remote - SSH".

  4. Check to make sure you have found the correct Extension: You should see that this extension was created by Microsoft and that it has been downloaded a lot of times. (As of writing this document, well over 12 million times.)

  5. Click the "Install" button. When you do, a new Tab will open up showing that Remote - SSH has been installed, along with lots of information about the Extension. You’re welcome to skim through that if you’d like.

  6. When you’re ready to proceed, close the Remote - SSH tab by hitting the "x" at the top of the vscode window next to the "Extension: Remote - SSH" tab. You can also close the Extensions panel by clicking a second time on the Extensions icon on the left side of the vscode window.

Configuring the Remote-SSH Extension

Now that you’ve installed the Remote-SSH extension, we need to configure it.

  1. Start by clicking the green >< "Open a remote window" button in the bottom left of the vscode window. (If you don’t see that, you didn’t properly install the Remote-SSH Extension in the previous step.)

  2. After clicking the "Open a remote window" button, a new dropdown will appear in the center of the vscode window. Choose "Connect to Host…​ Remote-SSH", which is likely the first item in the list.

  3. The contents of the dropdown will change to give you options for connecting to a remote computer. Select "+ Add New SSH Host…​".

  4. In the new dropdown prompt, type "ssh USERNAME@cslab.cs.swarthmore.edu" where USERNAME is your login ID at Swarthmore (e.g. rwicent1) and press return.

  5. The next prompt will say "Select SSH configuration file to update". Just press return to select the default first option.

  6. A popup should appear at the bottom right of the screen that says "Host added!"

Using the Remote-SSH Extension

Every time you want to use the Remote-SSH Extension, you will need to follow these steps:

  1. Start by clicking the green >< "Open a remote window" button in the bottom left of the vscode window.

  2. After clicking the "Open a remote window" button, a new dropdown will appear in the center of the vscode window. Choose "Connect to Host…​ Remote-SSH", which is likely the first item in the list.

  3. Select "YOUR_SWAT_CS_USERNAME@cslab.cs.swarthmore.edu"

  4. A new vscode window will appear. The first time you connect, it will ask if you want to continue connecting. Press "Continue".

  5. Type your CS password in the next box.

  6. In the bottom right of the screen, it will say "Setting up SSH Host cslab…​" This may take 30-60 seconds to complete.

  7. Once you are connected, press the Explorer icon in the top left and choose "Open Folder". The dialog box will say "/home/USERNAME/" where USERNAME is your username (e.g. rwicent1). Add "cs21" to the end, so it says "/home/USERNAME/cs21/" and press return. (You may need to enter your CS password again.)

  8. You may get a window pop up that say "Do you trust the authors of the files in this folder?" Press the button that says "Yes, I trust the authors".

  9. Use the navigation pane on the left side to select the folder you want to edit.

  10. (Optional) When you open a file ending in ".py", vscode will ask you whether you want to install the Python extensions. You can say "Yes".