Visual Studio Code IDE
When selecting a language for an Advanced zyLab, VSC may be available as an option.
After clicking create, the power icon will provision the VSC IDE. You now have a VSC IDE, with similar functions in the Template/Model Solution, and the same Test Bench and Option tabs.
In VSC, the IDE menu is located at the top of the screen instead of the left hand side in the CR2 IDE. Learn more about the CR2 IDE and how to add Advanced zyLabs here.
The settings button, open in the view above, allows changing the language, version, and IDE. Other options in Workspace Settings only affect the CR2 IDE. An upload and download button are to the right of settings. History, Open Desktop, and Run Tests are along the right side of screen. When opening History in VSC, the IDE will revert to the CR2 IDE and will not display every keystroke made in VSC.
The settings also contains the option to restart the IDE if it becomes unresponsive, and the option to switch to the CR IDE. Switching does not change the VSC IDE to CR2, as you can switch back and forth between the two. To permanently change the IDE to CR2, change the IDE in the workspace settings pictured above.
The VSC menu starts just below the settings icon with the Application Menu. This provides access to most of the VSC options and commands.
IntelliSense
A useful feature available in VSC is their combination of code completion, parameter info, quick info, and member lists; referred to as IntelliSense.
You can learn more about IntelliSense in the documentation here.
Debugger
A debugger is accessible for most languages in VSC that allows you to set breakpoints and debug code.
The debug button along the left side also opens the debugger.
Some languages will open the debugger by default when you click Run. Some require selecting a debugger, like C:
Or C++:
The debugger can be customized by opening the language's associated JSON file that will appear in /usercode/.vscode after running the debugger.
The arguments can be edited to configure the debugger behavior, for instance, to edit the compiling behavior, as seen here.
Additionally, for Java, you can edit the classpaths to account for things like JARs included in the workspace, explained here.
You can see the basics of debugging in the VSC documentation for C/C++ here, or Java here.
VSC Menu
Explorer, shown below, is where files can be added or re-arranged. Right-click in this section to download/upload, run, delete, et cetera.
Search contains a search function to scan code. Use this to look for and replace any errant code.
Source Control allows connecting to repositories and is further explained below.
Run and Debug features the VSC debugger. Right-clicking a file or clicking the play button in the top right of VSC will also allow debugging.
Learn more about the VSC debugger in the documentation here.
Extensions
The extensions button is last, and views existing extensions, along with the ability to add new ones to this instance of VSC.
See the persisting settings section below this one to learn how to make settings and extensions persist in VSC!
When searching for new extensions, not every extension on the marketplace may be available inside the VSC instance's search. However, you can add extensions from a .vsix file to the IDE.
First, download the .vsix file.
Next, upload the .vsix file to the instance via the upload button, or drag-n-drop.
Lastly, right-click the .vsix file and select "Install Extension VSIX".
Persisting Settings
The workspace settings must be edited in order for instructors to configure Visual Studio Code settings in a template, or have learners customize the IDE and have the settings persist between sessions.
More info about workspace settings can be found here.
Upon configuring "workspace" settings, VSC creates a folder named .vscode and stores JSON files with those configured settings. When VSC re-loads, it will load these settings.
Persisting Installed Extensions
Extensions are a bit trickier when it comes to persisting between sessions. Extensions can only be "recommended". After installing the extension, click the settings gear icon and select "Add to Workspace Recommendations".
Workspace Recommendations are stored in the extensions.json file.
After setting recommendations for a workspace, the user of the workspace will be prompted to install recommended extensions each time they open the workspace.
Connecting Github to VSC
VSC includes a GUI that can be used to clone, pull, and push code from GitHub repositories.
Connecting GitHub involves several steps for the initial account integration. However, once setup is complete, repositories can be quickly accessed.
First, Add an Advanced zyLab to a section and select a language where VSC is an option. Then start the VSC environment.
Authorization is granted for the specific user, so each learner will need to individually complete the next process.
Once inside the VSC IDE, click the Source Control button, then select Publish to GitHub to begin the setup process.
Follow the steps on screen to complete the setup.
Step 1: Allow the extension
Step 2: Copy the link-code and open Github
Step 3: Sign in to Github
This step is skippable when signed in.
Step 4: Paste in the link-code
Step 5: Confirm Access to VSC
Step 6: Connected!
Step 7: Connect to a Repository
Publish using the Publish button or from this bar at the top of VSC:
Using GitHub in VSC
Connecting VSC to an existing repository is easy once the setup is complete.
If you haven’t already connected your account, Initialize Repository will also prompt the authorization process detailed above.
Once initialized, publish your Branch by entering a message and hitting Publish Branch.
GitHub Commands
Other GitHub commands are available from the source control’s drop-down menu here: