Microsoft's open source development tool starts as an editor, but can become any kind of IDE—and be extended for most any language—on Mac, Linux, or Windows.
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), Chocolateychoco install vscode, or Scoopscoop install vscodeto get things running.
Figure 1. On first launch, VS Code presents you with common actions to take, including links to learning resources.
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
.debor.rpmpackages (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.gzarchive 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.
Figure 2. The marketplace of Visual Studio Code extensions offers thousands of ways to expand VS Code’s behavior and alter its look-and-feel. Most every language in wide use—e.g., Python, shown here—has an extension for VS Code.
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 intogit, you can often dig back through the timeline to find an earlier copy.
Figure 3. The Explorer view (the tree at left) shows files in your workspace. Selecting a spot on the Timeline (at bottom left) brings up the differences between the current state of the file and its changes since then.
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.
Figure 4. Click on search hits (at left) to open the corresponding file and go to that line. The amber bars in the mini-view at right show all the places in the open file that also match that search query.
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.
Figure 5. VS Code’s default source control interface is minimal but functional. Shown here is a commit in progress, with the file changes shown in the highlights at right.
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.
Figure 6. The “Run and Debug” pane is configured according to whatever language extension is being used. Here, with Python, we can inspect the program’s state at any point, such as when an exception is thrown.
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.
Figure 7. The command palette.
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.
Figure 8. VS Code’s built-in terminal hosts not just conventional shell sessions (shown here) but also informational output from tools inside VS Code, and problems identified in the current project.
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.
Figure 9. Documents can be viewed in tabs or spun off into their own detached windows (as with timer.py). Those windows can also be merged back into the main window by simply dragging and dropping.
