Visual Studio Code

Visual Studio Codeopen in new window is an open-source, free text editor created by Microsoft. Visual Studio Code is growing in popularity and already has a large library of extensions and themes. It is available for Windows, macOS, and Linux.

Installing Visual Studio Code

To install the latest Visual Studio Code, go to the official website, https://code.visualstudio.comopen in new window.

Visual Studio Code Website

Installation Configuration (Windows Only)

When on the Select Additional Tasks of the installation process, make sure the following boxes are checked:

Add "Open with Code" action to Windows Explorer file context menu

Add "Open with Code" action to Windows Explorer directory context menu

Register Code as an editor for supported file types

The Select Additional Tasks screen of the VSCode installation process

Welcome Page

When you launch Visual Studio Code for the first time, you will be presented with a Welcome Page with helpful tips for using and customizing Visual Studio Code

Configuring Visual Studio Code

Disabling Welcome Page

When you launch Visual Studio Code for the first time, you will be presented with a Welcome Page with helpful tips for using and customizing Visual Studio Code. By default, this page will open every time you open Visual Studio Code. To prevent this, uncheck the Show welcome page on startup found on the Welcome Page.

The VSCode Welcome Page with an arrow pointing to checkbox

Choosing a Color Theme

Color themesopen in new window let you modify the colors in Visual Studio Code's user interface to suit your preferences and work environment. There are several out-of-the-box color themes in VS Code for you to try. Many more themes have been uploaded to the VS Code Extension Marketplace (see below).

In VS Code, you can open the Color Theme picker by going to File > Preferences > Color Theme. (Code > Preferences > Color Theme on macOS).

Installing Extensions

VS Code has an extensive library of extensions through the Extension Marketplaceopen in new window. These extensions can be browsed and installed directly in VS Code using the Extension view. To bring up the Extensions view, click on the Extensions icon (see below) in the Activity Bar.

Extensions view icon

When opened, the Extensions view will show you a list of the most popular VS Code Extensions. Clicking on the extension item will display the selected extension's details page, and you can learn more and install the extension.

Extensions view

To install an extension, click the Install button. Once the installation is complete, the Install button will change to the Manage gear button.

Below is a list of required and recommended extensions.

ExtensionRequiredRecommended
Live Serveropen in new windowX
Live Shareopen in new windowX
Beautifyopen in new windowX
IntelliSense for CSSopen in new windowX
CSS Peekopen in new windowX
StandardJSopen in new windowX
leet-htmlopen in new windowX

Using Visual Studio Code

Just like any tool, the more you know about it, the better you can utilize it. Fortunately, the VS Code creators have lots of helpful information right on the Welcome page, including the Interactive playground where you can interactively try out many of VS Code's features. You can access the Welcome page by going to Help > Welcome.

The VS Code website includes extensive documentationopen in new window explaining how to use VS Code to its fullest. The site also includes a series of introductory videosopen in new window, which will get you up and running fast.

The following is a short list of some of the more useful features of VS Code.

Command Palette

The Command Palette provides access to many of VS Code's most common commands, including opening files, searching for symbols, executing scripts and seeing a quick outline of a file, all using the same interactive window.

Keyboard shortcut: ctrl+shift+P (cmd+shift+P on macOS)

Command palette animated gif

Quick Open

Quickly open files without moving your fingers off the keyboard using the Quick Open feature.

Keyboard shortcut: ctrl+P (cmd+P on macOS)

Quick open animated gif

Side-by-side editing

You can open as many editors as you like side by sideopen in new window vertically and horizontally. If you already have one editor open, there are multiple ways of opening another editor to the side of the existing one:

  • Use alt click on a file in the Explorer.
  • Use ctrl+\ (cmd+\ on macOS) to split the active editor into two.
  • Use ctrl+enter from the Explorer context menu on a file to open to the Side.
  • Click the Split Editor button in the upper right of an editor.
  • Drag and drop a file to any side of the editor region.

Multi-cursor Editing

VS Code supports multiple cursorsopen in new window for fast simultaneous edits. You can add secondary cursors with alt+click.

Keyboard shortcuts: ctrl+alt+down (cmd+alt+down on macOS) or ctrl+alt+up (cmd+alt+up on macOS)

Multi-cursor editing animated gif

Use ctrl+D (cmd+D on macOS) to select the word at the next occurrence of the current selection.

Multiple Selection animated gif

Code Folding

Code Foldingopen in new window collapses regions of source code so that you can focus only on the important parts. Move the mouse over the gutter and click to fold and unfold regions.

Keyboard Shortcuts:

  • ctrl+alt+[ (cmd+alt+[ on macOS) to fold
  • ctrl+alt+] (cmd+alt+] on macOS) to unfold

Code folding animated gif

Integrated Terminal

In Visual Studio Code, you can open an integrated terminalopen in new window, initially starting at the root of your workspace. This can be convenient as you don't have to switch windows to perform a quick command-line task.

Keyboard Shortcut: ctrl+`