VEX VS Code Extension UI Overview – VEX Library

This article provides an overview of the VEX Visual Studio Code Extension UI(User Interface). The extension supports the development of C++ and Python projects for VEX IQ 2nd Generation, EXP, and V5 platforms.

VEX VS Code Extension UI Layout

The VEX Visual Studio Code Extension UI is divided into five main areas: Activity Bar, Side Bar, Editor, Terminal Panel, and Toolbar.

Screenshot showing the complete VEX VS Code UI layout. The Activity Bar and Side Bar are on the left side of the screen, the Toolbar and Terminal are on the bottom side of the screen, and the editor fills the rest of the screen.

Activity Bar

The Activity Bar features an array of icons that lets us switch between views and gives us additional context-specific indicators for the VEX project development.

VS Code Activity Bar with the VEX Robotics Extension installed. The Activity Bar has icons that provide useful quick actions, like searching, managing extensions, version control, and more.

The common icons used for developing a VEX project in VS Code are:

Explorer View Icon - When clicked, the Explorer View opens in the Side Bar.
Extensions View Icon - When clicked, the Extensions View opens in the Side Bar.
VEX View Icon - When clicked, the VEX View opens in the Side Bar.

Side Bar

The Side Bar contains different views that enable us to use the integrated tools within VS Code. The common Side Bar views used to perform tasks for VEX project development are Extension View, VEX View, and Explorer View.

Extension View

The Extension View is used to install and manage the extensions in VS Code. For developing software on VEX IQ 2nd Generation, EXP, and V5 platforms, we need to install the VEX Extension, C/C++ Extension, and Python Extension.

For step-by-step instructions on how to install the VEX Extension, C/C++ Extension, and Python Extension in VS Code, please check out this article.

VS Code Extension View that shows a list of installed extensions. Each extension has a settings menu that can be opened here, and there is a search bar to find and download new extensions.

VEX View

The VEX View enables us to develop projects for VEX IQ 2nd Generation, EXP, and V5 in VS Code. There are three categories included in the VEX View: PROJECT ACTIONS, VEX DEVICE INFO, and VEX FEEDBACK.

VS Code VEX View that shows options for creating and importing projects above, the VEX Device Info menu below, and a feedback menu at the bottom.

PROJECT ACTIONS
The buttons under PROJECT ACTIONS are used to create a new VEX project or import an existing VEXcode project.
For detailed guidance on creating a VEX project in VS Code, please see this article for V5, this article for EXP, and this article for IQ (2nd).

Project Actions section of the VEX Extension View. This section has two buttons that read New Project and Import Project.

VEX DEVICE INFO
The VEX DEVICE INFO category provides us with an overview of the connected VEX device - a VEX Brain or a VEX Controller.

This category indicates the connected VEX Device type and displays the information of the Brain system, serial port, downloaded program, and devices connected to the VEX Brain’s smart ports. It allows us to screenshot the VEX Brain Screen, view the VEX Brain Event Log, use the V5 Battery Medic, set the brain name and team number, and erase the user program from the VEX Brain.

When a VEX Brain is connected to the computer, the VEX DEVICE INFO category shows if a VEX Controller is linked to the VEX Brain and enables us to update the VEXos for the VEX Brain if the VEX Brain’s VEXos version is out of date.

When a VEX Controller is connected to the computer, the VEX DEVICE INFO category shows if a VEX Brain is linked to the VEX Controller and enables us to update the VEXos for the VEX Controller if the VEX Controller’s VEXos version is out of date.

For a comprehensive description of the device information and how to use the features under VEX DEVICE INFO, please check out this article.

VEX FEEDBACK
We can submit feedback to VEX by typing the message in the Text Box under VEX FEEDBACK and clicking the SEND button.
For helpful information about using the VEX FEEDBACK in VS Code, please see this article.

VEX Feedback section of the VEX Extension View. This section has a form with options for submitting feedback to VEX.

Explorer View

The Explorer View is used to browse, open, and manage the VEX project files and folders in VS Code.

VS Code Explorer View that allows the user to navigate the folders and files in their VEX project. The files have corresponding icons and file types shown, in this example a Python file is selected and the title reads main.py.

Editor

The Editor is the main area to edit the files in VS Code. The VEX VS Code Extension enables Intellisense/Linting for both C/C++ and Python in the Editor area to assist us while developing the program.

VS Code Editor with a Python file opened as part of a VEX project. Python or C/C++ code can be written and edited here to create VEX robotics programs when connected to a VEX Brain.

In the Editor area, we can approach helpful information about a specific function by hovering the mouse over the text of the function or by using the VEX Command Help to access documentation for this function included in the C++ and Python API (Application Programming Interface).

For detailed instructions on using the VEX Command Help in VS Code, please see this article.

Terminal Panel

The VEX VS Code Extension provides two terminals on startup, the Log Terminal and the Interactive Terminal.

Log Terminal - The Log Terminal displays build output, build error, and download results.

VS Code VEX Log Terminal is opened and shows a default blank state with only one message printed reading Log.

Interactive Terminal - The Interactive Terminal has two functions - displaying print logs and sending raw keystrokes back to a user program.

Note: To utilize the Interactive terminal, a Brain or Controller must be connected to a computer running the VEX VS Code Extension.
Note: Interactive terminal output gets cleared by default after building and downloading a user program.

Toolbar

The Toolbar features an array of icons that provide us with a quick way to interact with VEX VS Code extension projects, VEX Brains, and VEX Controllers.

VS Code Toolbar with VEX Extension icons that can be used to quickly interact with connected VEX devices and projects. The VEX features include the Device Picker, the Slot Selector, the Build & Download icon, the Play icon, the Stop icon, the Project Selector, and the Python File Selector.

Note: The Toolbar is only active when a valid VEX project is open in VS Code.

Note: A valid VEX project is a project that is created or imported by the extension. VEXcode or VEXcode Pro projects opened in the editor will not be considered a valid VEX Project and will need to be imported.

The icons featured on the Toolbar include:

Device Picker - The Device Picker displays the Icon of the connected VEX Device (a Brain Icon or a Controller Icon )
Note: If a controller is connected to the computer, but does not have a radio link to a brain, no brain name will be displayed next to the Controller Icon.

Slot Selector Icon - The Slot Selector Icon allows us to pick which Slot the VEX Extension will download or play a user program on by clicking on it and selecting one of the eight available Slots on the VEX Brain from the pick list.
Build & Download Icon - If a VEX Device is connected, the Download Icon will show on the Toolbar. When clicked, the project will build and if successful, will be downloaded to the connected VEX Device.
Play Icon - When clicked, the Play Icon runs the downloaded user program in the selected Slot on the VEX Brain.
Stop Icon - When clicked, the Stop Icon stops running the user program on the VEX Brain.
Project Selector - The Project Selector displays the name of the selected project. The Project Selector Icon allows us to switch between VEX projects when multiple exist inside the workspace by clicking on it and selecting a project from the pick list.
Python File Selector(Python Only) - When a VEX Python project is selected, the Python File Selector will appear in the Toolbar. The Python File Selector displays the name of the selected Python file. Python for VEX only supports single file downloads currently.

For helpful information about how to use the Toolbar features in VS Code, please check out this article.

VEX User Settings

The VEX User Settings allow us to configure the VEX Extension according to our own requirements. User Settings are global settings applied to every VEX VS Code extension project. We can access the VEX User Settings by clicking the Settings Icon in VS Code and selecting the corresponding items in the menus.

VS Code User Settings is opened to the VEX category where the behavior of the VEX Robotics Extension can be customized.

The VEX User Settings for configuring the VEX VS Code Extension are:

Controller Channel (V5 Controller only) - Sets V5 Controller Radio Channel to Download or Pit. This setting applies to the VEXnet radio link only.

Cpp Toolchain Path - Sets the Path for the CPP Toolchain.
Enable User Terminal- Enables or disables the extension to open and display data from the user port.
Log Entries - Sets the number of log entries to upload from a VEX Brain.
Project Build Type - Sets how the extension will build a C++ project.
Project Home - Sets the default location for new projects.
Run After Download - Sets if the user program should run after it is downloaded to a VEX Brain.
System DFU Auto Recover - Sets if the Brain should auto recover when an IQ2 or EXP is detected in DFU mode.
Websocket Server Enable - Enables or disables the extension to start the Websocket Server.
Websocket Server Host Address - Sets the Host Address of the Websocket Server.
Websocket Server Port - Sets Websocket Server Port Number

For helpful information about how to access and set the VEX User Settings, check out this article.