VS Code Overview

What Is VS Code

Visual Studio Code (VS Code) is a free and open source code editor created by Microsoft. It’s available on Windows, macOS, and Linux and can support virtually every programming language through available extensions on its Extension Marketplace. It also has integrated Git support which lets you stage, commit, push, pull, and view diffs from the Source Control panel without leaving the editor.

In a previous page, you downloaded the WPILib tools which downloads WPILib VSCode. In FRC, this is the VS Code that you want to use. WPILib VS Code is installed with the other WPILib tools and is it’s own separate application. If you’ve installed VSCode before, make sure to use the WPILib specific one to program your robot.

The WPILib VS Code has a different icon compared to VS Code. As shown in the photo, the WPILib VSCode has the WPILib logo while VS Code is the blue logo.

Welcome Screen

When you first open up WPILib VS Code, you are greeted with a welcome screen that has a few options. The most helpful options are:

1. New file
2. Open file
3. Open folder

New File creates a new file. Open file lets you open a file from your computer. Open folder lets you open a folder from your computer. This will be the most helpful when going through each stage of this website.

---

These options are always available by selecting “File” on the top right of the screen. This will bring down a new window and you can select the needed option.

Note

When opening a new folder, VS Code will have a message that asks “Do you trust the authors of the files in this folder?” For this website, you can click “Yes, I trust the authors”.

Navigating the Interface

VS Code’s layout is categorized into a few key regions:

1. Activity Bar which is in the far left, consists of vertical icons which can be used to switch between the major views (Explorer, Search, Source Control, Run & Debug, Extensions).
2. Side Bar which is next to the activity bar shows details for the selected view (for example: file tree in Explorer).
3. Panel is at the bottom of the screen. It has four main views, which are the Terminal, Problems, Output, and Debug Console.
4. Editor is the center area. The editor is star of the show and it is where you can view and edit files.
5. Command Palette is accessed through Ctrl+Shift+P / Cmd+Shift+P and it allows for you to search and run any command in VS Code.

WPILib Command Palette

One key feature of WPILib VS Code is the commands available that are specific to FRC, such as Build which lets you compile the robot code and check for errors on-device, Deploy which builds the code and sends it over the network connection with the robot to Systemcore, and Simulate which lets you test code on your computer using the built in simulation tools. These commands are available through the Command Palette.

Saving and Opening Files

Opening Files

• Open a single file: File > Open File... or Ctrl+O / Cmd+O
• Open a folder/project: File > Open Folder... or Ctrl+K Ctrl+O / Cmd+K Cmd+O
• Quickly open a file: Ctrl+P / Cmd+P, then start typing the filename
• Reopen a recently closed file: Ctrl+Shift+T / Cmd+Shift+T

Saving Files

• Save current file: Ctrl+S / Cmd+S
• Save as (new name/location): Ctrl+Shift+S / Cmd+Shift+S
• Save all open files: Ctrl+K S / Cmd+K S

Tip

Auto Save can be enabled via File > Auto Save which saves your work automatically after a pause, making it way harder to lose your work.

A dot on a file’s tab indicates unsaved changes. The dot will disappear and turn into an “X” (close icon) once the file is saved.

Keyboard shortcuts

VS Code has many useful keyboard shortcuts. They also have a list that you can refer to. However, the most useful ones are:

• Ctrl+P / Cmd+P is Quick Open which allows you to open any file by name
• Ctrl+Shift+P / Cmd+Shift+P opens the Command Palette
• Ctrl+` allows you to quickly open and close the integrated terminal
• Ctrl+B / Cmd+B allows you to toggle sidebar visibility
• Ctrl+Tab allows for you switch between the open editors