Get started with Visual Studio Code

If there’s any one tool a software developer needs, it’s an editor. An editor can be as simple as Notepad++, or as full-blown as the Microsoft Visual Studio IDE. But wouldn’t it be great if you could choose as much or as little editor as you need, depending on the project, and not have to switch programs?

In 2015, Microsoft launched its answer to that question: Visual Studio Code. At heart, VS Code is a text editor, based on GitHub’s cross-platform Electron framework. But its open-ended design allows it to easily adapt to development work in any language, or with any code syntax.

If all you need is a text edtor with a good selection of modern features, Visual Studio Code can do that as-is. Where VS Code shines, though, is in how its galaxy of extensions can turn it into an environment for any number of languages, frameworks, data types, or services: not just C#, Go, or Python, but also Salesforce and AWS.

Visual Studio Code also hosts front-ends and workspaces for tools programmers routinely expect in a development environment—things like source control integration (git and GitHub), managing databases within a project, or managing other external utilities like CI/CD pipelines.

Setting up Visual Studio Code

Even though Visual Studio Code is a Microsoft product, it’s available for all three major development platforms: Microsoft Windows, Linux, and macOS. If you visit the VS Code download page, you’ll see download links for installation packages for each platform.

VS Code on Microsoft Windows

The most common way to set things up on Windows is the same as any other Windows app: download the installer from the official site and run it. If you have specific needs, you can customize the setup process by using a different method:

• If you’re the only user on a given system, the “System Installer” package installs VS Code systemwide, and so saves you the trouble of having to set it up for for multiple user profiles.
• If you’re installing VS Code only for a specific user, download the “User Installer” package and run that.
• If you want to install and manage VS Code by way of command-line tooling, you can use Winget (winget install vscode), Chocolatey choco install vscode, or Scoop scoop install vscode to get things running.

IDG

VS Code on Linux

Installing software on Linux tends to be done through a given Linux distribution’s package manager and its repositories. Many Linux distros offer VS Code as a standard item. You also have the option to install VS Code manually, which can be done in a number of ways:

• If you want to download and install .deb or .rpm packages (for Debian/Ubuntu and Red Hat/Fedora/SUSE, respectively), you can obtain them from the VS Code download page.
• If you use Snap packages, you can grab VS Code from the Snap Store.
• If you just want a .tar.gz archive to unpack and set up manually, or use a CLI script, those are also available from the download page.

VS Code on macOS

VS Code offers .zip packages for native Apple silicon, Intel, and universal arhictectures, along with command-line installers for those architectures. It’s also possible to use the popular Homebrew package manager: brew install --cask visual-studio-code.

Running VS Code in portable mode

Another useful way to run VS Code is in portable mode. With portable mode, VS Code does not modify the system it’s installed on and keeps all its data in its own directory. To run VS Code in portable mode, use the .zip downloader. The downloaded .zip file can be unpacked and run in any directory.

Portable mode also comes in handy if you need to wipe your system. You can keep a portable instance of VS Code on a non-system drive, and after you reset your system drive, you can just continue using it without having to reinstall it. Existing installations can also be converted to portable ones and vice versa.

Note that the portable-mode version of VS Code does not auto-update. You have to download a more recent version and copy your configuration files into it. Also, portable mode requires some configuration before being used. Otherwise it’ll attempt to look for its configuration data on the system itself, rather than in its own directory. So if you have VS Code already installed on that system, it’ll default to that VS Code’s settings instead.

Visual Studio Code extensions

VS Code’s extensibility and flexibility come from extensions—third-party add-ons that transform VS Code from the inside out.

The first thing to do with VS Code is equip it with features for working in the programming languages of your choice, including extensions for Python, Java, Go, Rust. But extensions do more than just make VS Code into an environment for working in a particular programming language. They also can change VS Code’s theme, manage external tools like CMake, use VS Code as an interface to services, or even work with file types that aren’t editable text—e.g., the SQLite Viewer.

Extensions also can be enabled or disabled—not just for all projects, but on a project-by-project basis. A smart tactic is to disable all extensions by default except for those you are likely to use everywhere (e.g., git extensions), and then selectively enable them for a given project. This keeps things running fast, and keeps extensions from interfering with each other.

IDG

Working with VS Code

When you first fire up VS Code, the interface comes equipped with a few components common to just about every configuration for the editor. They’re available through the icons on the Activity Bar on the left side of your screen. Some extensions add their own icons to this area, but the ones discussed here are the defaults.

Explorer

When you open a disk directory or a multi-directory project in VS Code, all the files available are shown in tree format. If you want to open multiple directories as a single project, or “workspace,” use File | Add Folder to Workspace and Save Workspace As to save the workspace as a project file you can reopen later.

Also listed for any selected file in the Explorer are two other collapsible panes:

• Outline shows an outline view of the current file, if one is available. Extensions for a given file type or programming language typically provide an outline view.
• Timeline shows a list of all the edits made to the current file, both in the editor and through any revision control system set up in VS Code (typically git). If you save something locally and forget to check it into git, you can often dig back through the timeline to find an earlier copy.

IDG

Search

The Search feature lets you run text-based searches on the currently open directory or project. You can also perform replace operations across files, use regular expressions in searches, and include or exclude files based on glob patterns. (If you don’t yet know regular expressions, it’s worth learning at least the basics.) You can also confine the search to only files currently open by clicking the icon in the “files to include” box.

IDG

Source Control

If you have git installed and a repository configured for your project, VS Code gives you a handy GUI to most common actions: making commits, creating or changes branches, pushing commits to a remote server, and so on. The default Source Control only covers a small subset of git functions; for more, you can install an extension like GitLens.

IDG

Run and Debug

If you’ve installed extensions for a particular language, they typically hook into VS Code’s mechanisms for running code and attaching debuggers. “Run and Debug” houses those commands, along with links for customizing how your code will be run or debugged in the current project.

IDG

Extensions

As mentioned above, this is where you add and manage extensions for VS Code. Note that extensions typically auto-update, so you’ll get notifications about pending updates in this area.

Also note that extensions can be deprecated by their publishers—for instance, if someone stops working on a given extension, and someone else creates a replacement.

More VS Code components

There are a few more components in Visual Studio Code that are worth knowing about.

The command palette and file search

The bar at the top center of VS Code’s window is a universal search function for VS Code itself. Click in it and start typing, and you can look for any file in your project, or find any command or function by name.

A faster way to work with the command palette is with the keyboard. Hit Ctrl-P to search files in your project; hit Shift-Ctrl-P to search commands or functions.

IDG

The terminal pane

Press Ctrl-~ (the backtick key) and you’ll kick open VS Code’s terminal pane. Most of the time you’ll use this to access VS Code’s built-in terminal window, which by default opens a shell session into the root of your project directory. It can also be configured to open just about anything else you need a terminal interface for, like the Windows Subsystem for Linux, the JavaScript debug console, and so on.

The terminal pane also provides tabs for output from tools running in VS Code, such as code linters or the debug console. Right-click in the title bar for the terminal pane and you’ll see which tabs are available, as well as positioning options. Those with superwide monitors, for instance, may want to put the terminal pane along a vertical edge of the VS Code window, instead of at the top or bottom.

IDG

Tabs and windowing

When you open files in VS Code, they’re tracked in separate tabs. You can drag them around freely to reorganize them, or drag them to different areas of the editor to split them off into their own subwindow. A recent addition: you can right-click on a tab and select “Move/copy into new window” to split the tab off into its own minimal window.

IDG