Visual Studio Code (VSCode)

Read time: 2 minutes

Last edited: Feb 09, 2023

The VSCode extension is a Pro and Enterprise feature

The VSCode extension is available to customers on a Pro or Enterprise plan. To learn more, read about our pricing. To upgrade your plan, contact Sales.

Overview

This topic explains how to use the LaunchDarkly VSCode extension to interact with feature flags from within Visual Studio Code (VSCode).

With the extension, you'll get the ability to:

Display a tooltip with feature flag details when you hover over a feature flag key in your source code
Autocomplete feature flag keys
Open feature flags in LaunchDarkly (Default keybinding: ctrl+alt+g/⌘+alt+g)
View a list of feature flags and their settings in the Explorer view
Update a flag's state, default rule when on, and default off variation
Enable codelens for flags in your source code

Prerequisites

To complete this procedure, you must have the following prerequisites:

The VSCode extension from the Visual Studio Marketplace.
A personal or service API access token. To learn more, read API access tokens.

Set up the VSCode extension

To set up the VSCode extension, you must complete the following steps:

Give your API access token the required permissions:

You can create a custom role with appropriate permissions, then add the custom role to a personal or service access token, or
you can add the built-in Writer role to your personal access token.

Configure the VSCode extension with the API access token.

Give your API access token the required permissions

You can create a custom role with appropriate permissions then add the custom role to a personal or service access token, or you can add the built-in Writer role to your personal access token.

Create a custom role and add it to an API access token

Expand Create a custom role and add it to an API access token

Service tokens and custom roles are Enterprise features

Service tokens and custom roles are available to customers on an Enterprise plan. To learn more, read about our pricing. To upgrade your plan, contact Sales.

To configure the VSCode extension, you must have an access token that targets version 20210729 or later of our API.

The following custom role allows Reader access to all projects and Writer access to the minimal set of fields the extension is able to update.

To create a custom role for the API access token:

Navigate to the Account settings page.
Click into the Roles tab.
Click Create role. The "Create custom role" panel appears.
Give the custom role a human-readable name.
Click Advanced editor.
Enter this policy in the "Role policy" field:

[
  {
    "effect": "allow",
    "actions": ["viewProject"],
    "resources": ["proj/*"]
  },
  {
    "effect": "allow",
    "actions": ["updateOn", "updateFallthrough", "updateOffVariation"],
    "resources": ["proj/*:env/*:flag/*"]
  }
]

Click Save role.

Add the built-in Writer role to your personal access token

Expand Add the built-in Writer role to your personal access token

To configure the VSCode extension, you must have an access token that targets version 20210729 or later of our API.

To add the built-in Writer role to a personal access token:

Navigate to the Account settings page.
Click into the Authorization tab.
Find the personal access token you want to add permissions to and select "Edit token" from its overflow menu. The "Edit" panel appears.
In the Role menu, select "Writer."
Click Save token.

Your personal token now has the Writer role.

Configure the VSCode extension

After you install the LaunchDarkly extension, VSCode prompts you to configure it:

Provide an access token for your LaunchDarkly account. This access token must have sufficient permission as described above.
Select your corresponding LaunchDarkly project.
Select your corresponding LaunchDarkly environment.
Select whether you want the extension to work with all VSCode workspaces or just the current workspace.

You can reconfigure the extension at any time by running the "LaunchDarkly: Configure" command from the command palette (ctrl+shift+p/⌘+shift+p).

Code references in the VSCode extension

The LaunchDarkly VSCode extension supports code references. If you use code references, configuring aliases makes the informational hover available wherever an alias appears in your code. Aliases appear under the flag entry in the Explorer view. To learn more, read Finding flag aliases.

Flag searches across the workspace also include flag references.