• Home
  • Integrations
  • SDKs
  • Guides
  • API docs
No results for ""
EXPAND ALL

GIVE DOCS FEEDBACK

Visual Studio Code (VSCode)

Read time: 4 minutes
Last edited: Feb 07, 2024
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
  • Flag actions: Toggle flags on or off, add flag targeting rules, update a flag's state, set default on and default off variations, and more
  • Enable codelens for flags in your source code
  • Quick links to jump into the LaunchDarkly UI
LaunchDarkly flag actions
LaunchDarkly flag actions
The LaunchDarkly VSCode extension
The LaunchDarkly VSCode extension
Extension overview
Extension overview
Treeview right click options
Treeview right click options

Prerequisites

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

Set up the VSCode extension

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

  1. Give your API access token the required permissions:
  1. 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:

  1. Navigate to the Account settings page.

  2. Click into the Roles tab.

  3. Click Create role. The "Create custom role" panel appears.

  4. Give the custom role a human-readable name.

  5. Click Advanced editor.

  6. Enter this policy in the "Role policy" field:

    [
    {
    "effect": "allow",
    "actions": ["viewProject"],
    "resources": ["proj/*"]
    },
    {
    "effect": "allow",
    "actions": ["updateOn", "updateFallthrough", "updateOffVariation", "createFlag", "updateTargets", "updateRules"],
    "resources": ["proj/*:env/*:flag/*"]
    }
    ]
  7. 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:

  1. Navigate to the Account settings page.
  2. Click into the Authorization tab.
  3. Find the personal access token you want to add permissions to and select "Edit token" from its overflow menu. The "Edit" panel appears.
  4. In the Role menu, select "Writer."
  5. 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 sign in to your LaunchDarkly account:

  1. Select the LaunchDarkly instance. Most members should select Commercial, but FedRAMP members should select Federal.
  2. Provide an access token for your LaunchDarkly account. This access token must have sufficient permission as described above.

After you complete step 2, continue configuring the extension. If the configuration menu does not appear, run the command: LaunchDarkly: Configure settings.

  1. Select your corresponding LaunchDarkly project.
  2. Select your corresponding LaunchDarkly environment.
  3. 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 settings" 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.

Quick targeting

The LaunchDarkly VSCode extension supports quick targeting. This is useful if you use a consistent targeting context key or rule when coding with feature flags.

It will look for a yaml file, rules.yaml, located in the .launchdarkly subdirectory of your home directory. The full path is: ~/.launchdarkly/rules.yaml.

Here's an example:

targets:
- name: Target Me in Context
values: context-key-123abc
- name: Target Me in Account Context
contextKind: account
values: account-1234
rules:
- name: My Test Organization
clauses:
- contextKind: user
attribute: organization
op: in
negate: false
values:
- org-1234