HSTAT SEP IDE Setup

Before we begin

The CS50 IDE refers to the browser-based IDE implementation of Visual Studio Code (aka "VS Code") built by the CS50 team at Harvard, utilizing Github Codespaces. Full documentation here.

Step 0: Navigate to your IDE

Go to cs50.dev and login with your Github account.
In the URL, you need to delete the %2F12345678 by double-clicking on it and pressing DELETE or BACKSPACE twice (to also delete the %).

Before: https://username-code50-12345678-7w9q5j9thxgr4.github.dev/?folder=%2Fworkspaces%2F1224918&vscodeChannel=stable
After: https://username-code50-12345678-7w9q5j9thxgr4.github.dev/?folder=%2Fworkspaces&vscodeChannel=stable

Then press ENTER. This will load the correct /workspaces directory.

Step 1: Basic Info

(then paste into your terminal and press ENTER)

Step 2: SSH

Get a token

Note: type anything
Expiration: doesn't matter
Check: admin:public_key
Generate token, then copy it using the icon

Note: in a few days, you will get an email with the following text. You can ignore it.

We noticed your personal access token (classic) "x" with admin:public_key scope will expire in 7 days

(then paste into your terminal and press ENTER)

IMPORTANT: if you do not use your IDE for a long period of time, you will receive an email warning you that your IDE will be reset if you do not log in. All you have to do is login. Failure to do so means:

You will lose all of your work (as a general habit, make sure you are frequently pushing to you repos.
You will have to follow the steps on this page again (and re-clone any repos you want to work on).

Step 3: Course Folder

(then paste into your terminal and press ENTER)

Previewing

Here is how to preview various file types in your IDE:

Markdown

Simply click the preview icon in the top-right corner of your open markdown file to preview side-by-side.

HTML

In your terminal, run http-server at the parent directory of the HTML file you would like to preview (this will run a temporary preview of the HTML files you are serving, and isn't meant for long-term sharing/hosting).

You will see something like:

Available on:
    https://username-code50-12345678-7w9q5j9thxgr4-8080.githubpreview.dev
Hit CTRL-C to stop the server

Command+click (Windows: control+click) on the URL that appears. Click the HTML file you wish to preview.

You can edit your code (it autosaves), then just reload the preview.

When you are done, press CTRL+C in your terminal to stop the temporary server.

Other

Just a few other things:

Opening files from the terminal

Simple use code <file> (without <>) to open a file, i.e. code index.html to open the file in the text editor.

New Terminal

Did you lose your terminal? Launch a new one by pressing the menu icon in the top-left corner > Terminal > New Terminal.