Visual Studio Code IDE
When selecting a language for an Advanced zyLab IDE, 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 many similar functions in the Template, Test Bench, and Model Solution 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.
From left-to-right are the settings button, reset instance, Open Desktop, Run Tests, and the CR2 button which switches between the CR2 and VSC versions of the IDE.
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.
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.
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 to learn how to make settings and extensions persist in VSC!
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: