Use the Tailscale extension for Visual Studio Code

The Tailscale extension for Visual Studio Code lets you interact with your tailnet from within the VS Code IDE. During the private alpha, we are focused on integrating Tailscale Funnel into the code editor.

Tailscale extension for Visual Studio Code is currently in private alpha. Therefore, this topic is currently hidden.
A screenshot of VS Code with the Tailscale Extension panel visible

You can use the Tailscale extension to set up Tailscale Funnel.

Download and install the extension

During the private alpha, the latest build of the extension can be downloaded from our private GitHub repository. You must be a member of the alpha testing group to access this repository.

First, download the .VSIX file from the most recent release.

In VS Code, open the extensions sidebar (CMD + Shift + X), and click the three-dot icon to open the menu. Select Install from VSIX and choose the .VSIX file you downloaded.

A screenshot of the context menu in the VS Code extensions sidebar, used to access the Install from VSIX prompt

Choose Install from VSIX

Start Tailscale Funnel

You can easily set up Tailscale Funnel inside of VS Code using the command palette or the Tailscale panel view. You must have Funnel enabled in your tailnet ACLs in order to take advantage of this feature.

Using the command palette

  1. Open the command palette with the keyboard shortcut CMD + Shift + P.
  2. Type Tailscale to view all of the extension’s commands.
  3. To start Tailscale Funnel, choose Tailscale: Share port publicly using Funnel.
  4. Enter the port number that you wish to share via Funnel.

Using the Tailscale panel

You can toggle the Panel with the keyboard shortcut CMD + J. To turn on Funnel from the panel, enter a port number in the <port> field after http://127.0.0.1: and click Start.

A screenshot of the Tailscale Funnel panel in VSCode

The panel tab is titled Tailscale: Funnel

You can edit an existing Funnel configuration in this panel by changing the port number and clicking the Update button.

Use the advanced view

The advanced view is still considered work-in-progress. You may encounter bugs in this UI.

The default panel view is a simple interface that allows you to expose a single port over HTTPS with Funnel. If you would like to expose multiple ports at different mount points, you’ll need to use the advanced view.

To access the advanced view, click the three-dot icon in the upper right corner of the Tailscale panel, and select Advanced View. You can change back to the simple view by clicking the same three-dot icon and selecting Simple View.

A screenshot of the Tailscale Funnel panel in VSCode with the menu open, highlighted on Advanced View

Use the context menu to access the Advanced View.

To serve multiple ports over Tailscale Funnel in the Advanced View:

  1. Enter the first port you want to expose in the Target column.
  2. Enter the mount point you wish to expose this port on in the Mount Point column.
  3. Click Save. This will expose the port and also add an additional row to the table. Repeat steps 1 and 2 for additional ports you wish to expose.
A screenshot of the Tailscale Funnel panel in VSCode in Advanced Mode, with multiple ports exposed

Exposing multiple ports with the Advanced View.

Updating the extension

We are releasing updates on a routine basis as we improve the extension and add new features. To update to the latest version of the extension during the private alpha phase:

  1. Download the .VSIX file of the latest release from GitHub.
  2. Uninstall the existing extension from VS Code. This may require reloading the VS Code window.
  3. Install the new .VSIX extension package.

Failing to manually uninstall existing versions of the extension before installing a new version can cause the extension to break. This behavior will be fixed when the extension is publicly available for download from the VS Code marketplace.

Limitations

  • The Advanced View is a work-in-progress, and may contain UI bugs. We are actively working to improve this feature, and welcome your feedback.
  • While the extension is in private alpha, you must download the package from our GitHub repository and install it in VS Code manually. We will publish the extension in the VS Code Marketplace when we move to public beta.
  • The Advanced View allows you to create multiple servers (see tailscale serve), but it is not currently possible to create static file servers or TCP forwarders.

Last updated