Skip to main content

Creating a VS Code Lab

Guide for creating and configuring a Visual Studio Code environment in Vocareum.

Written by Mary Gordanier

For Teachers and Admins

The Visual Studio Code (VS Code) lab type in Vocareum provides a full-featured browser-based Integrated Development Environment (IDE) for learners. Labs can be pre-configured to provide a custom environment tailored to fit each learning activity.

This guide walks through the basic assignment creation and setup process, as well as advanced configuration options for VS Code.

Add a New Assignment

  1. In your course, select the "Edit Assignments" tab.

  2. Click the "New Assignment" option.

  3. Fill in the form to create a new assignment

    1. Give your assignment a name

    2. Select the Visual Studio Code lab type

    3. [optional] Place the assignment in an existing assignment Group to visually delineate groups of related of assignments for students

    4. Check or uncheck the option to "Allow Submissions"

  4. Click the "Save and continue" button

When you save the assignment creation form, Part 1 will be created for you automatically.

Note: Vocareum assignments contain Parts, which can be used to provide multiple environments to learners within a single assignment. Most assignments only require one part. You can change the name from the default "Part 1" by clicking the pencil icon on the left of the part name.

Once an assignment has been created, you can select Part 1 to enter the Part settings. You can also navigate to Student View to experience the environment as a temporary student user, or open Configure Workspace to edit the part contents.

Upon creation, assignments are initially unpublished, meaning they are not accessible to students enrolled in the course. When you are ready to release the assignment to students, click the Publish button.

Configure Workspace and the File System

Now that your VS Code lab has been created, select Configure Workspace to launch the IDE. The Configure workspace is where Teachers and Admins can pre-populate files for students and configure the environment.

Using the VS Code File Tree

On the left side of your VS Code IDE, the Explorer panel shows the voc directory, which contains all the platform-managed folders for your lab.

For a full description of each directory and its visibility to learners, refer to the article Navigating the Vocareum Files Browser.

Populating Learner Workarea

Files you place in /voc/startercode are automatically copied into each student's /voc/work folder the first time they open the assignment. This is how you distribute starter files, notebooks, or any other materials students should have when they begin work.

To upload files to startercode:

  1. In the Explorer panel, right-click the startercode folder.

  2. Select Upload and choose the file or folder to upload

Important: After a student has opened an assignment for the first time, their /voc/work folder will not automatically update to reflect subsequent changes to startercode. To push changes to a student's work area after that point, either the student or the instructor must manually reset the workarea.

Autograding

For instructions on how to set up autograding for VS Code, refer to the article on Using Custom Grading Scripts in Vocareum Labs.

Packages and Extensions

Our VS Code environment comes with some global extensions preinstalled:

  • Python language support

  • Jupyter Notebook support

  • C/C++ language support

  • C# language support

  • HTML/CSS/Javascript language support

  • MySQL database support

Resources present in the container:

  • Visual Studio Code v1.80.2

  • Python v3.10.12

  • Clang v10.0.0

  • gcc v9.4.0

  • Java v11.0.19

  • node.js v18.17.0

  • MySQL v8.0.34

For instructions on adding packages in your VS Code labs, please refer to the article: Installing Packages in Vocareum Labs.

Installing VS Code Extensions Globally

Vocareum VS Code labs support extensions from the Open VSX Registry. To make an extension available to all students in an assignment:

  1. Visit the Open VSX Registry (https://open-vsx.org/) to locate the extension you would like to install.

  2. Click "Download" to download the .vsix file of the extension you want to install. (Please note: You must download the x64 Linux version if there are multiple options available.)

  3. In Vocareum, navigate to the assignment in your course's Edit Assignments tab.

  4. Open Configure Workspace for the assignment part.

  5. Upload the .vsix file for the extension into the work folder.

  6. Open the VS Code integrated terminal in the lab.

  7. Run the following command in the terminal: vocinstall <path-to-extension>

  8. Wait for the success message in the terminal.

  9. Click "Save Image"

  10. In the "Save Container Image" modal that appears, you will be prompted to enter a lab name, which will identify the new image in the Container Image selection menu of the VS Code assignment's Part Settings. There are additional options you can select/deselect:

    1. Replace current image- If selected, the new container image will be applied to the assignment immediately for all users

    2. Restart running container

  11. When you have your preferred options selected, click the Save button.

*Note: If an assignment is published, container image updates are reflected immediately for students the next time they start their labs.

MySQL Database

Vocareum's VS Code container features a MySQL database, allowing connection to an HTTP server for full-stack web app development.

In the Part settings of your assignment, select Resources and make sure to select "Enable Database" and "MySQL DB".

Accessing the Database

To access the MYSQL client, simply type "mysql" into the command line.

Alternatively, to use VS Code’s MySQL extension, start by clicking the Database icon on the left sidebar of the VS Code environment.

Click on “Create Connection,” specify a name for the connection, and then save and connect to the server.

Did this answer your question?