0% found this document useful (0 votes)
9 views11 pages

Visual Studio Code for CS50 (abt) - 250125

Visual Studio Code for CS50 is a web app that allows students and teachers to program using a cloud-based Docker container without local installation. It provides various settings for customization, supports offline usage with Docker, and integrates with GitHub for repository management. Troubleshooting tips and guidelines for using the platform effectively are also included.

Uploaded by

ivy vu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
9 views11 pages

Visual Studio Code for CS50 (abt) - 250125

Visual Studio Code for CS50 is a web app that allows students and teachers to program using a cloud-based Docker container without local installation. It provides various settings for customization, supports offline usage with Docker, and integrates with GitHub for repository management. Troubleshooting tips and guidelines for using the platform effectively are also included.

Uploaded by

ivy vu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

 VS Code on Windows

 Intro videos (to VS Code)


 https://code.visualstudio.com/ (abt. VS Code)

Visual Studio Code for CS50


Visual Studio Code for CS50 is a web app at cs50.dev that adapts GitHub Codespaces for
students and teachers. It automates the process of creating a repository inside of
CS50’s GitHub organization, pushing to it an initial .devcontainer.json, and creating a
“codespace,” which is a Docker “container” in the cloud (akin to your very own virtual server).
Ultimately, it allows students to start programming with just a browser, without needing to install
or configure anything locally on their own computer. Within their browser is a full-fledged version
of Visual Studio Code, aka VS Code, including a tabbed text editor, terminal window (connected
to a Docker container running cs50/codespace), and graphical file explorer.
You can also use VS Code locally, even offline without internet, particularly if feeling more
comfortable.
Settings
VS Code supports quite a few settings via which you can customize a codespace:
1. User settings, which “apply globally to any instance of VS Code you open” and can be
applied to codespaces as well via Settings Sync.
2. Remote settings, which are set by CS50 via .devcontainer.json file in a
codespace. Remote settings override User settings.
3. Workspace settings, which can be set by you via VS Code’s GUI (or by
editing .vscode/settings.json manually). Workspace settings override Remote settings.
In other words, Workspace settings override Remote settings, and Remote settings override
User settings.
If you use VS Code outside of CS50, you might thus want to store most of your settings in User
settings (and enable Settings Sync). And if you would like to override any of CS50’s Remote
settings, you can do so via Workspace settings.
Themes
See code.visualstudio.com/docs/getstarted/themes.
User Interface
See code.visualstudio.com/docs/getstarted/userinterface.
Shortcuts
 Visit cs50.dev/codespaces to access your codespaces in CS50’s GitHub organization.
 Visit cs50.dev/commits to access all of the commits that have been pushed to your
repository in CS50’s GitHub organization.
 Visit cs50.dev/devcontainer.json for the latest version of
CS50’s .devcontainer.json template.
 Visit cs50.dev/repo to access your repository in CS50’s GitHub organization.
 Visit cs50.dev/restart to restart your codespace.
 Visit cs50.dev/rstudio-prefs.json for the latest version of CS50’s RStudio preferences.
 Visit cs50.dev/settings.json for CS50’s default settings for VS Code.
 Visit cs50.dev/stop to stop your codespace.
 Visit cs50.dev/update50.sh for the latest version of update50.
VS Code Desktop
If feeling more comfortable, you can also use VS Code locally:
 without Docker, but with internet access, so that you can connect to a codespace
remotely
 with Docker, via which you’d run a codespace-like container on your own computer, even
without internet access
Online, without Docker
To use VS Code locally without Docker, but with internet access, connecting to a codespace
remotely:
1. Download and install VS Code itself on your computer.
2. Install VS Code’s GitHub Codespaces extension.
3. Visit cs50.dev, check Open in VS Code desktop, and log in as usual; you should be
prompted to open the codespace in VS Code itself.
Alternatively, if already logged into a codespace, click the codespace’s “hamburger” menu (☰)
and select Open in VS Code.

as via Ctrl+Shift+P on Linux, ⇧⌘P on macOS, and Ctrl+Shift+P on Windows,


Alternatively still, if already logged into a codespace, open the codespace’s command palette,

select >Codespaces: Open in VS Code.


Offline, with Docker
To use VS Code locally with Docker, running a codespace-like container on your own computer,
even without internet access, and opening a folder like foo therein:
1. Download CS50’s latest .devcontainer.json file from https://cs50.dev/.devcontainer.json,
saving it in foo. Because the file’s name starts with a dot (i.e., period), it might seem to
“disappear” when you download it. But, in a terminal window on Linux or macOS, you
should see it with ls -a, and at a command prompt in Windows, you should see it
with dir /a.
2. Download, install, and start Docker on your computer.
3. Download and install VS Code itself on your computer.
4. Install VS Code’s Dev Containers extension.
5. Open VS Code’s command palette, as via Ctrl+Shift+P on Linux, ⇧⌘P on macOS,
and Ctrl+Shift+P on Windows, select >Dev Containers - Open Folder in Container…,
and open foo.
Alternatively, select >Dev Containers: Install devcontainer CLI, and then, in VS Code’s
terminal window, cd to foo and execute devcontainer open ..
Once the container finishes building and starting, you should find that foo is mounted within the
container at /workspaces/foo.
Git
Because a codespace is already associated with a Git repository in CS50’s code50 organization
at https://github.com/code50, which is used for automated backups, CS50 effectively
disables git anytime you’re inside of /workspaces/$RepositoryName (which is a codespace’s
default directory), wherein $RepositoryName is your (numeric) GitHub ID.
However, you can still use git outside of that directory, as by cloning other repositories
into /workspaces itself. For instance, if you’d like to clone https://github.com/octocat/Hello-
World into a codespace, you could execute
cd /workspaces
git clone https://github.com/octocat/Hello-World
cd Hello-World
at which point you could use git within that /workspaces/Hello-World directory as usual. Note
that only /workspaces/$RepositoryName will be automatically backed up to
CS50’s code50 organization; repositories that you clone into /workspaces will not.
gitignore
Currently, only these files will be backed up to your Codespace GitHub repository:
 *.c
 *.cpp
 *.css
 *.db
 *.h
 *.html
 *.java
 *.js
 *.md
 *.py
 *.sql
 *.ts
 *.txt
 Makefile
GitHub
Authorization
Visual Studio Code for CS50 is implemented as an OAuth App that “lets external applications
request authorization to private details in a user’s GitHub account without accessing their
password.” When you log into Visual Studio Code for CS50 using your GitHub account, CS50
receives, via a web application flow, an “access token” from GitHub (but not your password) via
which CS50 can execute certain operations (i.e., API calls) on your behalf.
But you’ll first be prompted to “authorize” CS50. Only then will that access token have certain
permissions, limited by scopes. CS50 currently requests these scopes:
 codespace, via which CS50 can create and manage codespaces on your behalf
 read:org, so that you can use the GitHub CLI
 repo, via which CS50 can manage a repository for you and accept your invitation thereto,
and via which git can access repositories to which your GitHub account has access
 user:email, via which CS50 can access the email address with which you’ve registered
for GitHub, but not your actual emails
Note that scopes are not as granular as would be ideal. The codespace scope technically allows
CS50 to manage any of your codespaces, not just the one(s) you use for CS50. And
the repo scope technically allows CS50 to access any of your repositories, not just the one(s)
you use for CS50. In practice, CS50 only uses those scopes to manage CS50-specific
resources. But if you have any concerns, you are welcome to create a (separate) GitHub
account that you only use for CS50!
Organization Access
When you log into Visual Studio Code for CS50, your codespace is configured with a “token”
that has repo scope, which lets git access repositories to which your GitHub account has
access.
If you try to access a repository that’s owned by an organization that has not granted access to
Visual Studio Code for CS50, though, git might err with “Repository not found.” (And gh might
err with “Could not resolve to a Repository.”) To grant (or request) access for that organization,
visit github.com/settings/connections/applications/d1a90a524497a69391fa. Alternatively, you
can configure your codespace to use SSH or a personal access token instead, both of which
would have access to any repositories to which your GitHub account has access, whether or not
owned by an organization.
Domains
Visual Studio Code for CS50 is built atop GitHub Codespaces, which requires that you can also
access these domains:
 *.github.com
 *.api.github.com
 *.azureedge.net
 *.github.dev
 *.microsoft.com
 *.msecnd.net
 *.visualstudio.com
 *.vscode-webview.net
 *.windows.net
If on a corporate or school network that blocks any of the above, you might need to ask your IT
department if they can “allowlist” all of the above.
Troubleshooting
Could not register service workers
If using Firefox, disable Enhanced Tracking Protection, or use a different browser.
The workbench failed to connect to the server
If using Firefox, disable Enhanced Tracking Protection, or use a different browser.
I’m seeing “Oh no, it looks like you are offline” error message.
First of all, make sure all the required domains are not blocked by your device or internet
environment.
Check that you have a stable internet connection and that your home, school, or company
network is not blocking the connection. If possible, check logging for rejected connections on
your device.
Firewall and Network Configuration
 Certificate Inspection: If the school’s network is injecting TLS certificates, it could be
flagged as a man-in-the-middle attack. This issue might be resolved by installing the
school’s root TLS certificate on students’ local machines or by allowing traffic from trusted
domains such as *.github.com, *.windows.net, and *.visualstudio.com.
 Packet Inspection: Investigate the packet inspection settings on the firewall to ensure
they are not inadvertently blocking or altering secure traffic required for Codespaces
connections.
Browser Extensions and Local Network Configurations
 Certain browser extensions or individual network configurations (e.g., VPNs, proxies)
may be contributing to the problem.
 Verifying the browsers, extensions, and network settings on affected student devices
could help identify additional issues.
The issues are very likely correlated to the Connectivity V2 feature rolled out by GitHub.
Please check their announcement and related troubleshooting
guidelines: https://github.blog/changelog/2024-02-12-enhanced-codespaces-connection
To inspect network activity in your browser, follow one of these instructions:
 Chrome
 Firefox
 Safari
If you see rejected connections, make sure the domains documented by the /meta REST API
endpoint are not blocked by your firewall. Again, in other words, none of these domains should
be blocked.
Optional: For more information, see REST API endpoints for meta data.
You can run this command in your terminal to get the list of domains required by GitHub
Codespaces:
curl -L \
-H "Accept: application/vnd.github+json" \
-H "Authorization: Bearer <YOUR-TOKEN>" \
-H "X-GitHub-Api-Version: 2022-11-28" \
https://api.github.com/meta
Follow this instruction to generate a GitHub personal access token.
Alternatively, to get the list of domains required by GitHub Codespaces, execute the following
command using GitHub CLI:
gh api meta | jq .domains.codespaces
How to monitor global variables in debugger
In debug50’s RUN AND DEBUG pane, there’s a section labeled WATCH. You can add
expressions to this section, and the debugger will show you the values of these expressions as
you step through the program. The expressions can include global variables and array names.
Consider the plurality problem, for example. If the arrow to the left of the WATCH heading is
pointing to the right >, click it to expand the section. Then click the plus sign in the section
heading to insert a new expression to be watched.
For example, you could type this: candidates[0]@candidate_count. Though this is not a legal
expression in C, the @ operator is specially treated by the debugger. This particular watch
expression
means display candidate_count elements of the candidates array, starting with the first (i.e., the
element at index 0).
When the debugger stops at a breakpoint, it will show you the value of the expressions it’s
watching. In this example, the array elements are structs, so you may need to expand them
using their individual > buttons.
I can’t type anything in the terminal
If you can’t type anything in the terminal, please do the following:
1. Click the Settings icon (the gear icon on the bottom-left icon).
2. Search for terminal.integrated.gpuAcceleration.
3. Click Workspace.
4. Set it to off.
Getting “command not found” error in terminal
First, double-check that you are typing in the command correctly. Not only must the command
be typed exactly as instructed, but spaces and capitalization must be exact as well.
Second, if you are absolutely sure that you are typing the command exactly as it should be and
you are still receiving a command not found notification, please make sure:
 Your input method does not introduce special characters.
 Your codespace is not currently in recovery mode.
 You are using a codespace provided by CS50.
Codespaces run into recovery mode
Occasionally, your codespace might run into a “recovery mode” due to service outage, a
container creation error, or the .devcontainer.json had been modified incorrectly. Most CS50
commands, such as check50 and submit50, will not work and you can’t compile your code using
CS50 libraries.
In recovery mode, your terminal prompt would look like:
@githubUserName -> /workspaces/githubId (master) $
Normally, your terminal prompt should look like a single dollar sign:
$
To get out of the recovery mode, please do the following:
1. Confirming there is no ongoing GitHub outage: githubstatus.com
2. Run this command (copy-paste it to your Codespace terminal):
3. curl https://cs50.dev/devcontainer.json >
/workspaces/$RepositoryName/.devcontainer.json
4. Click the “Extensions” icon on the left, search for the “GitHub Codespaces” extension
and install it (if not installed)
5. After installing “GitHub Codespaces” extension, press “Command + Shift + P” (if on
macOS) or “Ctrl + Shift + P” (if on Windows), search for “Codespaces: Rebuild Container”
then press Enter on the keyboard,select the Full Rebuild (not Rebuild) option to perform
a codespace rebuild.
6. Your codespace will be launched once the rebuild process is completed.
Creating a new Codespace
If your codespace repeatedly runs into recovery mode and the above steps do not resolve the
issue, you might want to try creating a new codespace:
1. Visit cs50.dev/codespaces.
2. Click Create codespace on main (the green button).
3. Wait for your codespace to launch.
Please do NOT delete your old codespace unless you are sure all your files have been synced
properly with repository at cs50.dev/repo.
GitDoc failed to sync with backing repository
If GitDoc is showing a GitHub Authentication error, please do the following:
1. Visit cs50.dev.
2. Click Login via GitHub.
3. Click to Authorize cs50.
4. Once your codespace is launched, visit cs50.dev/restart.
Missing files in Codespace
If you believe some of your files might be missing on your current Codespace, please first check
to see if you have more than one Codespace by visiting: https://github.com/codespaces and you
should see a list of Codespaces under “Owned by code50”.
Some of your files could exist on previous Codespaces, in which it is indicated as
“Last used XXX hours/days ago”. To access these Codespaces and retrieve the files, please do
the followings:
1. Click on the Codespace name to launch it
2. Once your Codespace is launched, go to File Explorer
3. Right-click a file or folder
4. Click “Download…” to download files to your local computer
If you can’t find your missing files in any of your codespaces, look for them in your repository
at https://cs50.dev/repo instead.
Alternatively, if you have submitted any assignments via submit50, you can access those
at https://github.com/me50. Or, if you have submitted any assignments via Gradescope, you
can access those at https://www.gradescope.com/.
Other Common Questions
1. Why is an extension not installable in the browser?
2. How do I allow VS Code to access my clipboard for reading?
3. How do I allow VS Code to always open new tabs and windows?
4. How do I allow VS Code in a browser to access local files and folders?
See https://code.visualstudio.com/docs/remote/codespaces#_common-questions.
Deleting a Codespace
Deleting a codespace will delete all files and folders therein. If you are sure you want to
delete a codespace:
1. Visit cs50.dev/codespaces.
2. Under Your codespaces, to the right of main, click …, select Delete, and click OK.
You can then create a new codespace by logging back into cs50.dev.
Acknowledgements
Special thanks to CS50’s friends at GitHub and Microsoft for their support of this app!

Built with Sphinx using a theme provided by Read the Docs.


Visual Studio Code on Windows
https://code.visualstudio.com/docs/setup/windows
Installation
1. Download and install Visual Studio Code
Note
VS Code ships monthly releases and supports auto-update when a new release is available.
2. Install additional components
Install Git, Node.js, TypeScript, language runtimes, and more.
3. Install VS Code extensions from the Visual Studio Marketplace
Customize VS Code with themes, formatters, language extensions and debuggers for your
favorite languages, and more.
4. Set up AI-assisted coding with GitHub Copilot
Tip
If you don't yet have a Copilot subscription, you can use Copilot for free by signing up for
the Copilot Free plan and get a monthly limit of completions and chat interactions.
5. Get started with the VS Code tutorial
Discover the user interface and key features of VS Code.
Install VS Code on Windows
Use the Windows installer
1. Download the Visual Studio Code installer for Windows
2. Once it is downloaded, run the installer (VSCodeUserSetup-{version}.exe)
By default, VS Code is installed under C:\Users\{Username}\AppData\Local\Programs\Microsoft
VS Code.
Tip
Setup adds Visual Studio Code to your %PATH% environment variable, to let you type 'code .'
in the console to open VS Code on that folder. You need to restart your console after the
installation for the change to the %PATH% environmental variable to take effect.
Use the ZIP file
1. Download the Visual Studio Code Zip archive
2. Extract the Zip archive, and run VS Code from there
User setup versus system setup
VS Code provides both Windows user and system level setups.

Setup
Type Description

User Does not require administrator privileges to run, as the location is under your user Local
setup AppData (LOCALAPPDATA) folder. Since it requires no elevation, the user setup is able t
provide a smoother background update experience.
This is the preferred way to install VS Code on Windows.
Note: When running VS Code as Administrator in a user setup installation, updates are
Setup
Type Description

disabled.

System Requires elevation to administrator privileges to run and places the installation under the
setup system's Program Files. The in-product update flow also requires elevation, making it less
streamlined than the user setup. On the other hand, installing VS Code using the system
means that it is available to all users in the system.

See the Download Visual Studio Code page for a complete list of available installation options.
Updates
VS Code ships monthly releases and supports auto-update when a new release is available. If
you're prompted by VS Code, accept the newest update and it will be installed (you won't need
to do anything else to get the latest bits).
Note
You can disable auto-update if you prefer to update VS Code on your own schedule.
Windows as a developer machine
Windows is a popular operating system and it can also be a great cross-platform development
environment. This section describes cross-platform features such as the Windows Subsystem
for Linux (WSL) and the Windows Terminal.
Note
Make sure you are on a recent Windows build. Check Settings > Windows Update to see if
you are up-to-date.
Windows Subsystem for Linux
With WSL, you can install and run Linux distributions on Windows to develop and test your
source code on Linux, while still working locally on your Windows machine.
When coupled with the WSL extension, you get full VS Code editing and debugging support
while running in the context of WSL.
See the Developing in WSL documentation to learn more, or try the Working in
WSL introductory tutorial.
Windows Terminal
The Windows Terminal, available from the Microsoft Store, is a terminal application for users of
command-line tools and shells like Command Prompt, PowerShell, and WSL. Its main features
include multiple tabs, panes, Unicode and UTF-8 character support, a GPU accelerated text
rendering engine, and custom themes, styles, and configurations.
Next steps
Once you have installed VS Code, these topics will help you learn more about it:
 VS Code tutorial - A quick hands-on tour of the key features of VS Code.
 Tips and Tricks - A collection of productivity tips for working with VS Code.
 AI-assisted coding - Learn about using GitHub Copilot in VS Code to help you write code
faster.
Common questions
What command-line arguments are supported by the Windows Setup?
VS Code uses Inno Setup to create its setup package for Windows. Thus, all the Inno Setup
command-line switches are available for use.
Additionally, you can prevent the Setup from launching VS Code after completion
with /mergetasks=!runcode.
I'm having trouble with the installer
Try using the zip file instead of the installer. To use this, unzip VS Code in your AppData\Local\
Programs folder.
Note
When VS Code is installed via a Zip file, you will need to manually update it for each release.
Unable to run as admin when AppLocker is enabled
With the introduction of process sandboxing (discussed in this blog post) running as
administrator is currently unsupported when AppLocker is configured due to a limitation of the
runtime sandbox.
If your work requires that you run VS Code from an elevated terminal:
1. In VS Code, run the Preferences: Configure Runtime Arguments command in the
Command Palette (Ctrl+Shift+P)
This command opens an argv.json file to configure runtime arguments for VS Code. You might
see some default arguments there already.
2. Add "disable-chromium-sandbox": true to the argv.json file.
3. Restart VS Code. You should now be able to run VS Code in an elevated terminal.
Subscribe to issue #122951 to receive updates.
Working with UNC paths
As of version 1.78.1, VS Code on Windows only allows access to UNC paths (these begin with
a leading \\) that were either approved by the user on startup or where the host name is
configured to be allowed via the security.allowedUNCHosts setting.
If you rely on using UNC paths in VS Code, you can either:
 Configure the host to be allowed via the security.allowedUNCHosts setting. For example,
add server-a when you open a path such as \\server-a\path.
 Map the UNC path as a network drive, and use the drive letter instead of the UNC path.
 Define a global environment variable NODE_UNC_HOST_ALLOWLIST with the
backslash-separated list of host names to allow. For example, server-a\server-b to allow
the hosts server-a and server-b.
Note
If you are using any of the remote extensions to connect to a workspace remotely (such as
SSH), the security.allowedUNCHosts has to be configured on the remote machine and not the
local machine.
This change was done to improve the security when using VS Code with UNC paths. Please
refer to the associated security advisory for more information.

You might also like