Using a Programming Editor

There are many text-only programming editors on the market, designed to be used with different programming environments. When you program using many different environments, it can be helpful to have one editor that you use for all of them, so your editing interface is consistent.

Organizing Projects

Most programming editors organize files in workspaces. A workspace is basically a folder with all your project’s files in it. So to get started, either open a folder or create a new folder, then make new files in it. For example, if you have an Arduino sketch called mySketch, it consists of a folder called mySketch and a file in it called mySketch.ino. A p5.js project is usually a folder called myProject with a few files in it: sketch.js, index.js, and the p5.js libraries.

Extensions or Plugins

Programming editors usually include a way to add extensions or plugins so that you can automate common tasks, use different programming languages easily, and so forth. For example, Visual Studio Code includes two useful plugins for physical computing, the Arduino plugin, which lets you compile Arduino projects and the Live Share plugin, which lets you share code live across a network.

Visual Studio Code

Microsoft Visual Studio Code is an open source programming editor from Microsoft that’s good for many toolchains at ITP: Arduino, p5.js, node.js, Python, and more. It’s designed for keyboard-only use, through the command palette, which can execute any command in the application using keyboard alone.

There are a few main areas of the VS Code application: the editor area, the file explorer, the consoles.

The explorer (command-shift-e) is where you look for files and folders within your workspace. There’s also a tab in the explorer called Outline where you can see a list of the functions in the open code window.

The editor (command-1, 2, 3, etc) is where you edit code. There can be multiple editors open in the same workspace, if you choose to do so.

The panel (control-`) are where you see the output console, the problems console, the command line terminal, serial terminals, and the debug console.

The command palette (command-shift-P) can execute any command in the application using keyboard alone. You can filter it by starting to type the name of the command you want. The Escape key dismisses the command palette.

Note that everything in VS Code is a file or a directory. Even the application Preferences are stored in a giant JSON file, and when you open preferences from the command palette, you can see this JSON file, or an abstracted HTML-style representation of it.

Keyboard Shortcuts

There are many keyboard shortcuts in VS Code, because it’s designed to be used without a mouse. If you can’t remember them all, there is a guide in the program. Type command-K-S to open it in the editor.

Shortcuts in command palette

  • Backspace, then type file name – will open any file in workspace
  • Colon, then type number – goes to line number in current editor window
  • > then type command. This is the default when you open the command palette. When you type any word, it will filter the command list to find matching commands. Then use up and down arrows to navigate the filtered list.

Getting to Files

Command-shift E shifts focus to the File explorer. The up and down arrows will move through the file names VoiceOver will read out the names. Once you know the file names, use either the file palette (command-P) or the command line terminal (described below) to open the file.

Command-P opens the File palette This is a variation on the command palette that opens files. It operates like the command palette. Type the filename to filter the available files in your current workspace.

Shortcuts in the Editor

To get to any line in the editor, open the command palette (command-shift-P), then backspace and type colon-line number to jump to any line. If you’re already in the editor, control-G-line number will do the same thing.

Working in the Panel

The Panel area contains the command line Terminal, the Output Console, the Problems Console, and the Debug Console.

Type control ` to open the terminal. This gets you to a terminal with your operating system’s command line interface in it. Here you can do all the things you can normally do on the command line: list files (ls), change directories (cd), and so forth. From the terminal,, you can also type “code <filename>” to open any file in the current directory into the editor.

Note that Control-G doesn’t jump you to a line number when you are in the terminal. Type control ` to close the terminal first.

Type control-shift-U to get to the Output console. This is where you’ll read the output of any commands run by a compiler, for example the Arduino compiler.

Extensions

Visual Studio Code lets you extend the application with additional modules downloaded from their online repository. Type control-shift-X to enter the Extensions browser. The Extensions browser works like the command palette: type a word to filter the list then use the up and down arrows to navigate the list.

Two useful plugins for physical computing are the the Arduino plugin by Microsoft and the Live Share plugin. If you have the Arduino IDE installed on your machine, the Arduino Plugin for VS Code  lets you compile and upload for all the boards you have installed.The VS Live Share Plugin allows you to share code live with other users over a network in real time. Live share takes a few steps to get it set up, including a couple of trips to the browser to enable access through your GitHub account. The details are explained in the details page for the extension. Once it’s working, it’s a handy tool for sharing code live.

A Note on Notifications

Some actions or extensions pop up notification alerts over your application. These are called toasts in UX parlance, for reasons only the Secret UX Masters of the Universe understand. You can view all current notifications from the command palette: command-shift-P, then type notifications show. You can scroll through them with arrow keys when they are open. To dismiss them, command-shift-P, then type Notifications clear.