How to Install Visual Studio Code on Mac

Published:25 October 2022 - 7 min. read

Nicholas Xuan Nguyen Image

Nicholas Xuan Nguyen

Read more tutorials by Nicholas Xuan Nguyen!

Block over 3 billion compromised passwords & strengthen your Active Directory password policy. Try Specops Password Policy for free!

If you’re a developer or coder, chances are you’re always looking for new tools to help streamline your workflow. Lucky for you, one of the best code editors you can find is Visual Studio Code on Mac.

Visual Studio Code (VS Code) offers many features to help you write code more efficiently. And in this article, you’ll learn how to install VS Code on your Mac and go through some of the best extensions and themes to get you started.

Read on and get ready to level up your workflow!

Prerequisites

This tutorial will be a hands-on demonstration. If you’d like to follow along, be sure you have a macOS device. This tutorial uses Apple Silicon (M1), so the steps may be slightly different if you have an Intel-based Mac.

Downloading Visual Studio Code For Mac

Visual Studio Code (VS Code) is a free, open-source code editor from Microsoft available for Windows, Linux, and macOS. But like other tools, you’ll have to download and install VS Code on your system.

1. Open your favorite web browser, and head to the VS Code download page.

2. Next, click on Apple Silicon under the Mac icon to download VS Code’s package installer for Mac in a ZIP file. This Apple Silicon (M1) version is the latest chip developed by Apple.

If you have an older Mac with an Intel processor, click on Intel Chip instead.

Downloading VS Code for Mac
Downloading VS Code for Mac

3. Lastly, open your terminal and run the following ls command to verify VS Code’s package installer you downloaded.

ls -la ~/Downloads/VSCode-darwin-arm64.zip

The output below shows the zip file’s location.

Verifying the downloaded zip file
Verifying the downloaded zip file

Installing Visual Studio Code On Mac

Now that you have the VS Code installer downloaded, you’re ready to install VS Code on your Mac and experience a redefined code editor. VS Code is optimized so you can build and debug modern web and cloud applications more effectively.

Another great feature of VS Code is that it supports tons of programming languages through the use of extensions you can find in the marketplace.

To install VS Code on Mac:

1. Select the downloaded VS Code zip file → click the ellipsis icon (top-right) → Open to unzip the ZIP file.

Once unzipped, you should have a new Visual Studio Code application in your Downloads folder.

Unzipping the VS Code zip file
Unzipping the VS Code zip file

2. Next, run the ls command below to verify the application file. This command lists the contents of the Visual Studio Code application file.

The \ symbol is an escape character that tells the terminal to treat the space as a regular character. You must use the escape character when there is a space in the file name.

ls -la ~/Downloads/Visual\ Studio\ Code.app
Listing the contents of the Visual Studio Code application file
Listing the contents of the Visual Studio Code application file

3. Run the open command below to launch the installer in a new instance (-n).

open -n ~/Downloads/Visual\ Studio\ Code.app
Launching the installer
Launching the installer

4. Now, click Open to continue with the installation when you get the prompt below.

This warning shows up because you downloaded the application from the internet, which you can safely ignore.

Opening the installer
Opening the installer

Once installed, the VS Code application opens, and you’ll be greeted with the Get Started page below.

Viewing VS Code’s main window.
Viewing VS Code’s main window.

Navigating VS Code’s GUI

You’ve successfully installed VS Code on your Mac, but before jumping into coding, familiarize yourself with VS Code’s GUI and features first.

VS Code code comes with lots of features that let you:

  • Choose themes, and change how your editor looks.
  • Open your project folder, so you can quickly go back and forth to your files and ensure your file structure is correct.
  • Add a source control system, like Git.
  • Quickly add extensions from the marketplace, and so on.

These are just a small portion of what VS Code can offer. See for yourself how each feature helps you in your workflow. Perhaps changing your theme would be a good start.

1. Select a theme for your editor as you like from the Get Started page, keep other settings at their defaults, and click Mark Done (lower-left).

If Light and Dark themes don’t suit your taste well, click on See More Themes and look for one that piques your interest.

Selecting a theme
Selecting a theme

2. Next, explore the left-most side of VS Code, the Activity Bar, which has seven main sections. But start with one of the most important sections, the EXPLORER (Ctrl+Shift+E / Cmd+Shift+E).

The Explorer shows the files and folders in your project, where you can clone a repository. Additionally, the Explorer lets you perform different actions as follows:

  • Create, delete, and rename your files and folders on your project.
  • Move files and folders by dragging and dropping them inside your project folder.

Note that “drag and drop” works when moving files into the Explorer from outside VS Code. But if the explorer is empty, VS Code opens the file in your editor instead.

Viewing the Explorer section
Viewing the Explorer section

3. Click the Search icon (Ctrl+Shift+F / Cmd+Shift+F), which opens the SEARCH section, where you can search your project for files, symbols, and text.

Viewing the Search section
Viewing the Search section

4. Now, click the Source Control icon (Ctrl+Shift+G / Cmd+Shift+G) to open the SOURCE CONTROL section, where you can manage your project with Git or another source control system.

VS Code comes with integrated source control management (SCM) with Git support included by default.

Viewing the Source Control section
Viewing the Source Control section

5. After the SCM, click on the Run and Debug icon (Ctrl+Shift+D / Cmd+Shift+D), which opens the RUN AND DEBUG: RUN section, where you can run and debug your project.

Viewing the Run and Debug section
Viewing the Run and Debug section

6. Lastly, click on the Extensions icon (Ctrl+Shift+X / Cmd+Shift+X) to access the EXTENSIONS section, where you can install extensions from the marketplace.

Viewing the Extensions section
Viewing the Extensions section

Launching VS Code via a Command Line Environment

Perhaps you spend most of your time in a command-line environment but need to write some code quickly. If so, configuring VS Code to launch via a command-line environment will favor you.

1. Press (Cmd+Shift+P or Ctrl+Shift+P) on VS Code to open the Command Palette, where you can access all VS Code’s functionality.

2. Type Shell Command: Install ‘code’ command in PATH in the Command Palette, and press Enter. This command adds the VS Code executable to your system’s PATH variable.

Adding the VS Code executable to your system's PATH variable
Adding the VS Code executable to your system’s PATH variable

3. Once added, restart your terminal for the changes to take effect. The code command is now available in your terminal.

4. Now, create a text file, add some text, and save and close the file.

5. Finally, run the following commands to launch VS Code (code), passing in the file path of your text file (text.txt), in this case, from the working directory.

# Switch to the directory where you saved the text file
cd Downloads
# Launch VS Code and open the text file
code . text.txt

You will see VS Code (on the right) open with the contents of your text.txt file displayed in the editor window. You can now edit this file using VS Code’s great features.

Launching VSCode via the command-line environment
Launching VSCode via the command-line environment

Installing Extensions for Added Functionalities

One of the best things about VS Code is that it’s highly customizable. How? You can install extensions to add new functionality, and many different extensions are available.

Perhaps you want to install the macOS Color Picker extension. This extension allows you to select native macOS color pickers when working with CSS, HTML, and JavaScript files.

1. Navigate to the Extensions menu in the Activity Bar, which has three sections:

  • INSTALLED – This section shows the extensions already installed.
  • RECOMMENDED – This section shows recommended extensions based on your opened file type. For example, you’ll see recommended JavaScript extensions if you work with a JavaScript file.
  • POPULAR – This section shows the most popular VS Code extensions.
Accessing the Extensions panel
Accessing the Extensions panel

2. Type macOS Color Picker in the search box and press Enter. A list of matching extensions will be displayed in descending order (most matching extensions first).

Once you see your target extension, click the Install button next to the extension. The Install button changes to a green Enable button, so click on it to enable the extension.

Installing the macOS Color Picker extension.
Installing the macOS Color Picker extension.

After installing the extension, an overview page for the extension displays on the right, as shown below.

Verifying the macOS Color Picker is installed
Verifying the macOS Color Picker is installed

3. Now open a CSS, HTML, or JavaScript file to test the new macOS Color Picker extension.

4. Finally, open the Command Palette (Cmd+Shift+P / Ctrl+Shift+P), type Open Color Picker, and press Enter. The macOS Color Picker pane opens, as shown below.

Use the color picker to select a color, which will be inserted into your code. This extension is a great way to quickly get the color values you need without remembering the hex codes.

Testing the new macOS Color Picker extension
Testing the new macOS Color Picker extension

Conclusion

In this tutorial, you’ve learned how to install VS Code on your Mac and extensions to add more functionalities, making writing codes more enjoyable. At this point, you can take full advantage of what VS Code offers when working on your next project.

But don’t stop here! With this newfound knowledge, why not use version control with Git and GitHub to keep track of your work?

Hate ads? Want to support the writer? Get many of our tutorials packaged as an ATA Guidebook.

Explore ATA Guidebooks

Looks like you're offline!