How to Install Microsoft's VS Code Source Code Editor On Mac or Linux

Since its introduction, Visual Studio Code, often called simply "VS Code", has quickly moved to the top of editor choices by programmers. It's easily one of the most configurable, developer-friendly editors available. Even though it's created by Microsoft, Linux and Mac users have embraced it as well. It's fully open-source, and free, and all of the source code for it is available on GitHub. The editor runs inside a framework called Electron, which is basically a sandboxed version of the Chrome browser. As such, most of the editor's own code is written in JavaScript. The editor is highly extensible, providing thousands of official and community-built extensions supporting different themes, syntax highlighting for nearly every language imaginable, editing extensions, code snippets, most source code control systems, and more. (for version control, Git is supported out-of-the-box.) Developers are encouraged to create their own extensions and share them with the community through the official Extensions Marketplace.

Installing on Linux

There are several ways you can install VS Code on Linux, depending on your distribution.

Installing on Debian and Ubuntu

For Debian and Ubuntu, don't try to use the apt package manager. Instead, follow these instructions.

First, go over to the VS Code Download Page and download the .deb file.

Open up a terminal or shell prompt. Switch to the directory containing your downloads (typically ~/Downloads, which will be the Downloads directory in your home directory).

cd ~/Downloads

Display a list of the directory's contents and check for the name of the file you downloaded:

ls -ltr

The file should be the last one listed, and the filename will start with "code_" and end with ".deb."

The next step requires superuser privileges. To establish your username as a superuser, you'll need to log in as an existing superuser with "root" privileges. Typically, the username is "su" (for "superuser") or "root" and the password is one that you established when you first installed Debian. Once you've logged in as a user with root privileges,run this command:

usermod -aG sudo <username>

replacing <username> with your actual username. For example,

Usermod -aG sudo jeffc

Now, install the .deb file using this command at the shell prompt:

sudo dpkg -i filename

where you replace filename with the name you discovered above.

After that you can delete the .deb file you had downloaded by using the remove command:

rm <filename>

Now you can skip to the section in this article called "Testing it Out."

Technical Note: Although you can use VS Code without knowing this, you might be interested to know that the VS Code installer updates your system's package installer by adding an entry for Microsoft's package repository. Henceforth, VS Code will automatically update itself behind the scenes using your package installer.

Installing on Red Hat, Fedora, SUSE, CentOS

For these other distributions, you can use the package manager by following these steps. First, open up the terminal. (For example, if your distribution has Gnome, you can click the Activities menu, and then search for Terminal.)

As with Debian, you'll need superuser privileges. If you don't already have them, log in as an existing user with root privileges (same as noted in the Debian section above) and run the following command:

usermod -aG wheel <username>

replacing <username> with your actual username. (On these distributions, the "wheel" group has access to sudo privileges, hence the word "wheel" in the command.)

Next, paste the following command into the terminal:

sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc

This will import the key file for Microsoft's repository. Then paste and run this command at the shell prompt (make sure you get all the lines, as it's a single command):

sudo sh -c 'echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/vscode.repo'

Next paste and run this command, which will update yum's cache:

sudo dnf check-update

And finally, paste the following line, which will install VS Code:

sudo dnf install code

Now you can skip ahead to the section in this article called "Testing it Out."

Installing on Mac

The first step is to download the latest version of VS Code (don't use the Homebrew package manager). Go here and click the Mac version. This will download a .zip file. Click the downloaded file at the bottom of your browser (or open the browser's downloads list and click the .zip file in there.) The Mac's archive utility will open and automatically unzip the file. The unzipped file will be called "Visual Studio Code" and will appear in the Finder in the same directory as the .zip file (likely your Downloads directory). While in Finder, drag that file to the left, into the Applications folder. Now VS Code is installed. However, the path isn't set yet. Normally this is fine, but you'll likely want to open VS Code from the command line in Mac's Terminal application. Fortunately, VS Code includes a macro built right into it that will set the path for you. We'll do that next.

Go ahead and open VS Code by double-clicking its filename in the Applications folder. (The first time you'll see a warning that it was downloaded from the Internet. No problem, just click the Open button that's in the warning box.)

After VS Code opens, click the View menu, and choose Command Palette. (If you like hotkeys, you can instead hold down both Command and Shift, and then press P.) You'll see a text box appear at the top of the screen; this is the Command Palette.

The Command Palette

Start typing the words "Shell Command" and you'll see a dropdown list of commands that start with that. Find the one (it's probably first) called "Shell Command: Install 'code' command in PATH." Click it.

Shell Command: Install 'code'

In the lower-right corner you'll see a message:

Shell command 'code' successfully installed in PATH.

You're good to go! Go ahead and exit VS Code by clicking the Code menu, and then choose Quit Visual Studio Code.

Now open a terminal window. You can use the built-in Terminal program found inside the Mac's Utilities folder (which itself is in the Applications folder), or if you have a favorite one (such as iTerm2) you can use that instead. Then you're ready for the next step, "Testing it Out."

Testing it Out

Now you can test it out. At the shell or Terminal prompt, simply type:

code .

The "." tells VS Code to launch in the current directory. If you like, you can omit it and VS Code will launch in a default directory or the directory you last ran it in. Or you can specify a complete path, e.g.:

code /home/<username>/develop

Note for the bash experts: The "code" command is just a launcher. After using it to launch VS Code, you're immediately returned to the shell prompt. (You don't need to run it in the background with an & after it.)

Here are some quick observations. The code editor panel takes up most of the screen, as you would expect.

The code editor panel

On the left is a pane called the Explorer, which includes quick access to your files. The top is a list of all the currently opened files. (If you don't want that there, you can collapse it by pressing the drop-down arrow to the left of the words "OPEN EDITORS".) Under that is a project tree. For more information on using VS Code and finding your way around, check out the official tutorials, found here.

Setting Configuration Options

Here at ProgrammableWeb, we're building a large set of tutorials that will all use a common set of configurations. To make this as simple as possible, we're going to have a root development directory under which you can save your projects. Because of the number of projects, we suggest opening your code editor so that it points to the current project directory (whatever project you're working on at the time), rather than the root of all the projects. We're also going to use a standard set of configurations and plugins for the editors.

Visual Studio Code has a huge array of options and you have a couple of different ways to control them. First, there's a settings page that lists common settings and places for you to enter in the settings, as shown in the following image. Behind the scenes, however, VS Code stores your settings in a JSON file that you're free to manually edit. What's cool here is that you can add custom configurations in this file that aren't present in the main settings page, and you'll still be able to use the main settings page. It's not strictly one or the other.

To open the main settings page, Start VS Code and do one of the following:

  • Click File -> Preferences -> Settings
  • Click the Gear (found in the lower left) -> Settings
  • Hold down Ctrl and press the comma

You should see the settings page open in VS Code's code editor area, as shown here.

The settings page in VS Code's code editor area

To close the settings page, simply click the close button on the tab at the top.

Note: VS Code allows you to include optional settings on a per-project basis. We're not going to use this feature here at ProgrammableWeb; however, if you want to try it out you can read up on it here.

Tabs vs Spaces
Indenting sub-sections of code such as the internals of an if-then-else statement or a do-while loop is an important habit for ease of readability. Not just for you, but for others that may have to view your code later. Like other code editors, VS Code has an indentation feature. Although this is a hotly debated topic, we're going to set our indentations to spaces instead of tabs for one simple reason: Spaces work better for copying and pasting code from our web pages into the editors. (You are welcome to reformat to tabs afterward if you prefer.) We're going to use four spaces to allow for easier reading of our code.

Language caveat: Unlike most other languages, Python relies on indentation levels and is picky about consistency between spaces and tabs. If you choose to convert any python code from spaces to tabs, you must make sure you do it for the entire file. Otherwise you'll get errors as soon as you run the program.

To set the indentation to spaces, look at the status bar at the bottom of the VS Code window; you'll see the words "Tab Size" or "Spaces" followed by a number. "Tab Size" means you're set up to indent using tabs; Spaces means you're set up to indent using spaces. The number you see is the size of the indentation. If you already see "Spaces: 4" then you're good to go. Otherwise, click "Tab Size" or "Spaces", and a popup will open whereby you can configure the tabs, spaces, and indentation size, as shown below.

To set the indentation to spaces, look at the status bar at the bottom of the VS Code window

Click "Indent Using Spaces" to set your preference to spaces. Next, a similar popup will appear with a list of numbers; choose 4. You can then convert the currently-open file if you like by again clicking either Tab Size or Spaces, and then click "Convert Indentation to Spaces."

Fonts and Sizes
This is up to you, as we all have a different vision and visual needs. VS Code lets you choose the fonts and sizes you prefer; we'll show you how here. Note, however, that because VS Code technically runs inside its own Chromium-based browser, you can set the zoom level, just like in Chrome. This means you use both approaches to get the look and feel to your liking. (Try this: With VS Code open, hold down Ctrl and type a + key, which might require pressing Shift depending on which + key you use. You'll see the entire app zoom just like inside a browser. Reverse it by pressing Ctrl and the minus key.)

To set the font family and font sizes, open up the settings, and on the left of the Settings pane, expand Text Editor; under that, click on Font, as shown here:

To set the font family and font sizes, open up the settings, and on the left of the settings pane, expand Text Editor; under that, click on Font

Unfortunately, the font family name is one area where VS Code isn't particularly user-friendly. The issue is that VS Code runs inside a browser, and as such uses HTML/CSS syntax for font family names. HTML/CSS font families are typically lists of font names surrounded by single quotes (when the font name has spaces), with commas between the font names. The browser starts from the left and goes through the list until it finds the first font that exists on the system.

There's no dropdown list or picker of any kind. You just have to know what fonts are available on your system, and you can type them in here. Fonts on Linux-based systems are usually in /usr/share/fonts (and subdirectories under that) or /usr/local/share/fonts. On the Mac, hold down the Command key and press Space; in the search box that opens type Font. Find "Font Book" in the results list and click it; the Font Book app will open to show you your fonts.

The size is more straightforward. Under Font Size simply type the size of the font you want in the editor.

Recommended Extensions

Our tutorials make use of several languages, and as such, you'll need the plugins to support these languages. By default, VS Code supports all of the languages we're using; however, the VS Code marketplace includes many free extensions that offer additional functionality for these languages, such as extra syntax highlighting and navigation, code linting, and more.

You can also access the marketplace by simply searching inside VS Code. To do so, do one of the following:

  • Click File -> Preferences -> Extensions
  • Click the Gear (found in the lower left) -> Extensions
  • Hold down Ctrl and Shift and press X

On the left side you'll see a list of extensions with a search box at the top, as shown below.

On the left side you'll see a list of extensions with a search box at the top

Try typing "C#". (You don't need to press enter.) Below that, in the left pane, you'll see a huge list of free extensions, some built by Microsoft and its partners, and some built by the community members. To see details of an extension, click on it, and a full-page description will open in the editor pane of VS Code. There, you can find user reviews (which we encourage you to read and consider) and the number of people who installed it (a good indicator of the quality of the extension; some have several million downloads, which suggests a strong approval). The better extensions will also include full instructions on their detail pages on how to use the extension. You can install an extension by clicking the little green "Install" button by the extension's title in the left pane, or by clicking the green Install button at the top of the detail page.

Important: Many extensions require you to restart VS Code after installing them. The green Install button will be replaced by a blue button with the words "Reload Required." You can click that button to restart VS Code. (All your existing editor windows will remain open.)

You can also install extensions right from the Marketplace page in the browser. Search for an extension, click on it to open its details page, click the "Install" button; your browser will download the extension and open it in VS Code, where it will be installed.

To remove an extension, the green Install button in VS Code gets replaced by a gear icon. Click it for a menu, and in that menu click "Uninstall." Then you'll see the familiar blue "Reload Required" button that you'll want to click.

Here are the extensions we recommend you install, listed by language, along with instructions on how to install them. You can install all of these, or only those for the languages you prefer. These extensions offer syntax highlighting, popups for suggestions as you're typing (known as Intellisense), and more. Each extension includes documentation when you open the details page showing all the features the extension provides.

Java: There are many Java extensions available; we recommend browsing the list by simply searching the Marketplace for "Java." At the very least, we encourage you to install two that Microsoft created, building on work by Red Hat. One is a full Java extension pack, found here, and the other is an integrated debugger, found here.

Node.js and JavaScript: VS Code by default has strong support for node.js and therefore JavaScript (which is the language of node.js). As such, we don't ask you to install any particular node.js extensions. (However, the community has built several that you are welcome to explore; simply type "node" into the Marketplace search box.)

TypeScript: As TypeScript was invented by Microsoft, VS Code also has strong native support. Note that there is, however, an official extension built by Microsoft called JavaScript and TypeScript Nightly. The purpose of this extension is to allow you to stay on top of the nightly updates to the TypeScript language. We only recommend installing this if you're a very serious TypeScript developer who wants to stay on the bleeding edge.

Python: Microsoft's official Python extension can be found here. Important for Mac: If you're a Mac user, you need to install a separate version of Python from the one that ships with MacOS. You can find the details here. (You're still free to use the version that ships with Mac; however, the plugin won't integrate with that version.)

C#: Microsoft has partnered with another company called OmniSharp to create the official C# extension. You can find it here.

Go (also known as golang): The official maintainers of the Go language (who work at Google) have built a VS Code extension for Go, which you can find here.

PHP: There isn't an official PHP extension, but there are several that millions of people have installed. For additional Intellisense features, go here. For PHP debugging features, install this extension.

Dart: There is no official Dart extension by either Microsoft or the Dart language team; however, there is an extension built by community members that has wide support, with over 1.5 million downloads. We therefore recommend this plugin.

C++: Microsoft's official C++ extension can be found here. This extension supports many different C++ compilers, not just Microsoft's. Specifically, for Linux, the support is for GNU Compiler Collection (gcc), and for MacOS the support is for Clang (which is included with the XCode IDE for Mac).

Rust: The official Rust language maintainers created an extension for Rust.

Ruby: Although we don't use Ruby often here at ProgrammableWeb, if you're into it, we recommend this extension. Please pay close attention to the instructions regarding enabling the language server.

SQL: There are many SQL database server extensions available. Microsoft has an official one for SQL Server and one for PostgreSQL. There is limited support for other servers (such as MySQL or Oracle), but by default, VS Code provides syntax highlighting for SQL files.

Other languages: This list is all the languages we use (or intend to use) in ProgrammableWeb's tutorials. But there's an extension for nearly any programming language that exists. For example, if you use Ada, there's an extension for that. Or Fortran, or even COBOL. If you have a favorite language not listed here, enter it in the Marketplace search box and there will likely be an extension for it. (And if not, you can build one.)

Launching the Integrated Terminal

Visual Studio Code includes an integrated terminal, allowing you to run shell commands right from within VS Code. The terminal works the same way as any other terminal; it includes a prompt that shows you your current directory. You can type all the usual bash commands (such as "ls" and "cd") as well as git commands if you're using git. You can learn more about it here. The terminal opens below the code editor as shown below.

Visual Studio Code includes an integrated terminal, allowing you to run shell commands right from within VS Code

To create a new terminal, do one of the following:

  • Click the Terminal menu -> New Terminal
  • Click the Terminal menu -> New Terminal
  • Press Ctrl+Shift+` (that's the back-tick character, usually to the left of the 1 key).

Optional: Integrating with git

Git is by the most used source code control software right now. We have decided to use git for our source code control, in conjunction with the website GitHub, which hosts code that's stored in git. You are not required to use git to use our samples; you can even download the samples as .zip files from our respective GitHub project pages and not use git at all. But if you choose to use git, you can easily submit suggestions for improvements to our code.

By default, VS Code comes with full git integration. As such, we do not recommend downloading any additional extensions to use our sample code. Note, however, that we typically do not recommend only trying to use git from within VS Code. Our reasoning is that most developer teams typically still use the command-line version of git, and many tasks are, quite frankly, a bit more intuitive to use at the command line rather than inside VS Code. Therefore we're taking a two-pronged approach to git:

  1. When you're editing code that is inside a git repo, note the letters that appear beside your files in the Explorer as you add and modify files (see the screenshot below). The files that are untracked (i.e. not added to the repo) have a letter U to the right of them. Files that are tracked and you've changed get an M (for "modified") next to them. Files that are tracked by git and haven't been modified get no icon.
  2. When you need to do any git work (e.g. create branches, add and commit files), we recommend using the command-line. (You're welcome to use either the integrated terminal for its ease of access, or you can do it in an OS shell such as bash.)
By default, VS Code comes with full git integration

Our future projects here at ProgrammableWeb will have freely-available repos on Github. (And we welcome pull requests with suggested changes; we're making this a community-driven project.)

 

Comments (0)