diff --git a/public/learning-course/getting-started/vscode-overview/IMG_0155.webp b/public/learning-course/getting-started/vscode-overview/IMG_0155.webp new file mode 100644 index 00000000..632ec45c Binary files /dev/null and b/public/learning-course/getting-started/vscode-overview/IMG_0155.webp differ diff --git a/public/learning-course/getting-started/vscode-overview/IMG_0156.webp b/public/learning-course/getting-started/vscode-overview/IMG_0156.webp new file mode 100644 index 00000000..deb5e22a Binary files /dev/null and b/public/learning-course/getting-started/vscode-overview/IMG_0156.webp differ diff --git a/public/learning-course/getting-started/vscode-overview/IMG_0157.webp b/public/learning-course/getting-started/vscode-overview/IMG_0157.webp new file mode 100644 index 00000000..96d4b583 Binary files /dev/null and b/public/learning-course/getting-started/vscode-overview/IMG_0157.webp differ diff --git a/src/content/docs/learning-course/getting-started/vscode-overview.mdx b/src/content/docs/learning-course/getting-started/vscode-overview.mdx index 15e39576..595db3b3 100644 --- a/src/content/docs/learning-course/getting-started/vscode-overview.mdx +++ b/src/content/docs/learning-course/getting-started/vscode-overview.mdx @@ -1,8 +1,98 @@ --- title: VS Code Overview -description: Coming soon! +description: Overview of the VS Code program and interface for using WPILib. prev: learning-course/learning-course/getting-started/required-tools next: learning-course/learning-course/getting-started/forking-and-cloning --- -Coming soon! +## 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. +Some main features include IntelliSense which is a code completion tool and it allows for you to quickly look at documentation for a specific command. +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. + +--- + +## Welcome Screen + + + +When you first open up VS Code, you are greeted with a welcome screen that has a few options. +It lets you quickly customize settings and also lets you watch some tutorial videos. +It also has options to create a file, open a file, open a project, and clone a Git repository. + +--- + +## Navigating the Interface + +VS Code's layout is categorized into a few key regions: + +- The **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). +- Next, the **Side Bar** which is next to the activity bar shows details for the selected view (for example: file tree in Explorer). +- After that, the **Editor** is the center area. + The editor is star of the show and it is where you can view and edit files. +- Next, the **Panel** is at the bottom of the screen. + It has four main views, which are the Terminal, Problems, Output and Debug Console. +- Finally, the **Command Palette** is accesed through `Ctrl+Shift+P` / `Cmd+Shift+P` and it allows for you to search and run any command in VS Code. + + + +**Useful keyboard shortcuts:** + +- `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 + +--- + +## 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` + + + +A dot on a file's tab indicates **unsaved changes**; it turns into an "X" (close icon) once the file is saved. + +--- + +## WPILib VS Code + +For FRC, you use a separate version of VS Code developed by WPILib which is part of the WPILib installer. +If you already have VS Code installed on your computer, the WPILib VS Code installs seperately with the WPILib extension already installed and some settings changed. + +### WPILib Commands + +One key feature of WPILib VS Code and the WPILib extension 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, and **Deploy** which builds the code and sends it over the network connection with the robot to Systemcore. + + + +To access the WPILib commands, which are shows in the large red box on the screenshot, you can either open the command palette using the keyboard shortcut `Ctrl+Shift+P` / `Cmd+Shift+P`, or by clicking the WPILib logo in the top right corner, where the arrow is pointing to on the screenshot.