How to add "Open with VS Code" to right-click menu in macOS Finder

Introduction

In Windows, when you install VS Code, "Open with Code" is automatically added to the right-click menu, but macOS doesn't have this feature.

I wanted to set up the same functionality in macOS to open files or folders in VS Code from the Finder's right-click menu, so I used the built-in Automator app to configure this. Once set up, you can use it indefinitely.

Prerequisites/Environment

• macOS (confirmed on macOS Sequoia for this article)
• Visual Studio Code already installed (located in the Applications folder)

Steps

1. Launch Automator

Press Cmd + Space to open Spotlight, type "Automator" and press Enter.

2. Create a new Quick Action

After launching Automator, click "New Document" and select "Quick Action".

3. Configure the workflow settings

Change the settings at the top of the workflow screen as follows:

• Set "Workflow receives current" to files or folders
• Set "in" to Finder

4. Add an action

• Type "Open Finder Items" in the search bar in the top-left
• Drag and drop the displayed "Open Finder Items" action to the gray area on the right

• Change the "Open with:" dropdown in the action to Visual Studio Code

If VS Code doesn't appear in the list, click "Other..." and select Visual Studio Code from the Applications folder.

5. Save it

Press Cmd + S and save it with the name "Open in VS Code".

6. (Optional) Set an icon

Setting a custom icon for the Quick Action makes it visually easier to identify in the right-click menu.

• Download the SVG icon from the VS Code official brand page

• With the Quick Action open in Automator, click "Choose..." from the dropdown next to "Image" at the top of the workflow, and select the downloaded SVG file

However, setting it as is will display the icon with distorted aspect ratio. To fix this, open the downloaded SVG file in a text editor.

Make the following two changes to the <svg> tag:

• Add preserveAspectRatio="none"
• Set the width value to twice the height (e.g., if height="100", then width="200")

Before:

<svg width="100" height="100" viewBox="0 0 100 100"...<omitted>

After:

<svg width="200" height="100" viewBox="0 0 100 100" preserveAspectRatio="none" ...<omitted>

This is because macOS renders Quick Action icons in a horizontally elongated area. The above settings will make the aspect ratio appear correct visually.

After making changes, save and set the icon again in Automator.

Verification

Once the setup is complete, verify the functionality with these steps:

1. Right-click on any file or folder in Finder
2. Hover over "Quick Actions" in the menu
3. Select "Open in VS Code"
4. Confirm that the selected file/folder opens in VS Code

Advanced: Create an action to open in Terminal

Using the same steps, you can also create a "Open in Terminal" action for the Finder's right-click menu. Just select Terminal for the "Open with:" option in step 4, and save it as "Open in Terminal".

The icon setting method is also similar.

Summary

Using Automator, a standard macOS application, we were able to add an option to open files in VS Code to the Finder's right-click menu. It's convenient as there's no need to install third-party tools, and once set up, it can be used permanently.

This setting is recommended for those who have migrated from Windows or find it troublesome to type code . in the terminal.