Skip to main content
VS Code

Creating a Visual Studio Code lab

K
Written by Kevin Wesley
Updated over a week ago

Container Architecture lab types are in general release. Please contact support@vocareum.com to set up a compatible course.

Creating a VS Code Lab

From the course page select "Edit Assignments" and "New Assignment"

Create a name for the assignment, choose the lab type, and select "Save and continue".

You can also toggle whether to allow student Submissions here.

Your first part is now created. From this view you can select Part 1 to enter the Part settings. You can also navigate to Student View and Configure Workspace.

Selecting the "+" icon will allow you to create more Parts

Configure Workspace and File System

Now that your VS Code lab is created select Configure Workspace to launch the VS Code IDE

File Tree

On the left side of your VS Code IDE is the file tree. Here is a list of all directories that are created by the platform -

  • /course - This directory is common to the entire course and is available only to the grading script.

  • /data - Place data here to make it available to the learners. For large data sets, it is a more efficient way to deliver data than make it a part of the image or copy to startercode. Every lab gets access to a readonly copy of the data.

  • /docs - If there is a README.md, README.html, README.txt or README.pdf file present in this directory it will be showed to the user in a panel on the right side of the learner interface.

  • /private - Place necessary course content or data that does not need to be seen by the learner.

  • /scripts - This directory is not visible to the learner. It can hold the scripts and any related files that might be required for executing the script.

  • /startercode - Initializes the student environment. All the content of this directory is copied to /home/labsuser directory when the learner launches the lab.

  • /work - This directory can be used to develop and test coursework, starter code, scripts, etc. Can also be used for creating quiz.md before running "Generate Quiz" operation.

Populating learner workarea

Navigate to /voc/statercode. This is where instructors will upload assignment materials to be populated in learners' environments.

To upload a file or folder, right-click on the startercode directory, select Upload, and choose a file.

Once an instructor has compiled their assignment materials in /voc/startercode click "Deploy" to make the work available to learners once the assignment is published.

Custom Workspace

If an instructor wants to initialize custom workspace settings for all learners, add a vocsettings.json file to to the startercode under: /voc/startercode/vocsettings.json and select "Deploy".

Current workspace settings can be viewed by scrolling to the bottom of the VS Code and selecting settings.

Please note: The vocsettings.json file only gets copied for the learner the first time they enter the lab. If any changes to the vocsettings.json file are made learners must first delete their existing settings.json file via rm /voc/work/.local/share/code-server/User/settings.json and then restart their lab to see the changes.

Autograding

Instructions to setup Autograding for VS Code can be found here

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

Installing Extensions Globally

Visit the Open VSX Registry (https://open-vsx.org/) for extensions compatible with the VS Code Lab.

Download the .vsix file of the extension you want to install from Open VSX Registry and upload it to the work area.

Please note: You must download the x64 Linux version of a a package if an extension if there are multiple options available

Run the following command in the terminal:

vocinstall <path-to-extension>

Wait for success message in terminal then select "Save Image".

The "Save Container Image" modal will allow you to name your new image, replace the current image, and restart the currently running container. When you have your options selected select "Save".

MySQL Database

Our VS Code container features 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 side bar 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?