Skip to main content
Version: Config V2

Visual Studio Code - Manage your feature flags from VSCode

ConfigCat's Visual Studio Code extension to manage feature flags from Visual Studio Code.

Connect your ConfigCat Product and Config to your Visual Studio Code Workspace. Find your Feature Flag's usages in your code easily. Turn features On/Off right from VSCode. You can also easily modify the linked flags to edit or add new Targeting or Percentage Rules.

This guide will help you with the Visual Studio Code Extensions installation and familiarize you with the Extensions usage.

Feature overview​

  • Turn features On / Off right from Visual Studio Code.
  • Add Targeting or Percentage Rules from Visual Studio Code.
  • Find Feature Flag usages in your code.
  • Create Feature Flags within Visual Studio Code.
  • Copy a Feature Flag's key to the clipboard.
  • View your Products & Configs.
  • Create Configs within Visual Studio Code.
  • Connect a Config to your Workspace.
  • Open a Config on ConfigCat Dashboard.
Usage of ConfigCat Feature Flags Visual Studio Code Extension

Install extension​

Install from Visual Studio Code Marketplace​

  1. In the Visual Studio Marketplace, open the ConfigCat Feature Flags Extension.
  2. Click on the Install button.
  3. Configure extension.

Install within Visual Studio Code​

  1. In Visual Studio Code, open the Extensions page, and search for ConfigCat Feature Flags.
  2. Click on the Install button.
  3. Configure extension.

Install from VSIX file​

  1. In Visual Studio Marketplace, open the ConfigCat Feature Flags Extension.
  2. Click on the Download Extension link.
  3. Click on the More Actions icon on the Extensions page in Visual Studio Code and select Install from VSIX...
  4. Configure extension.

Configure extension​

Authentication​

  1. Get your ConfigCat Public API credentials from ConfigCat Dashboard/Public Management API credentials.
  2. Authenticate ConfigCat in Visual Studio Code by
    • clicking on the ConfigCat Feature Flags icon on the Activity Bar and clicking on any of the Authenticate buttons.
    • or running the ConfigCat - Log In command from the Command Palette.
Installation of ConfigCat Feature Flags Visual Studio Code Extension

Advanced​

This section is for you if you use a dedicated hosted/on-premise ConfigCat instance. In that case, you can specify your custom ConfigCat URLs in Visual Studio Code. You can do that by executing the Preferences: Open Workspace Settings command from the Command Palette and searching for Extensions/ConfigCat or clicking the manage button on the ConfigCat Feature Flags extension's page. Important settings:

Usage of ConfigCat Feature Flags Views​

The ConfigCat Feature Flags Views can be opened by clicking the ConfigCat Feature Flags icon on the Visual Studio Code's Activity Bar. There are three different views.

Feature Flags & Settings View​

After you successfully connect your ConfigCat Config to your Visual Studio Code Workspace, open the Feature Flags & Settings View and:

  • View the connected Config's Feature Flags.
  • View or Update your Feature Flag's value.
  • Create new Feature Flags.
  • Copy a Feature Flag's key to the clipboard.
  • Find your Feature Flag's usages in your code.
Usage of ConfigCat Feature Flags & Settings View in Visual Studio Code Extension

View or Update your Feature Flag's value​

  1. Open the Feature Flags & Settings View.
  2. Find the Flag and click the 'View or Update Feature Flag values' icon next to the Flag name.
  3. Select the environment.
  4. See the Feature Flag in the opened tab.
  5. You can turn your features On / Off right from this Issue.
  6. You can add new Targeting Rules with User, Segment or Prerequisite conditions with a large selection of Comparators. Read more about Targeting.
  7. You can add new Percentage Options to Feature Flags or Targeting Rules

Create a new Feature Flag​

  1. Open the Feature Flags & Settings View.
  2. Click the '+' in the View header.
  3. Select the setting type.
  4. Enter the new Feature Flag name.
  5. Enter the new Feature Flag key.
  6. Add a hint to your Feature Flag (optional).
  7. Select 'Yes' to confirm the Flag creation.

Copy a Feature Flag's key to the clipboard​

  1. Open the Feature Flags & Settings View.
  2. Find the Flag and click the 'Copy Key to clipboard' icon next to the Flag name.

Find your Feature Flag's usages in your code​

  1. Open the Feature Flags & Settings View.
  2. Find the Flag and click the 'Find usage' icon next to the Flag name.
  3. See the search results in the opened tab.

Products & Configs View​

Manage your products and configs on the Products & Configs View by performing the following actions:

  • View all of your Products & Configs.
  • Create Configs under a Product.
  • Connect a Config to your current Workspace.
  • Open your Configs on the ConfigCat Dashboard.
Usage of ConfigCat Products & Configs View in Visual Studio Code Extension

Create a new Config under a product​

  1. Open the Products & Configs View.
  2. In the products list, click the '+' icon next to the product where you want to create the new config.
  3. Enter a name for the new Config.
  4. Add a description to your Config (optional).
  5. Connect the new config to your current Workspace (optional)

Connect a Config to your current Workspace​

  1. Open the Products & Configs View.
  2. Find the Config you want to connect to your current Workspace under your product list.
  3. Click the 'Connector' icon next to the Config in the list.
  4. You can see the Config's Feature Flags in the "Feature Flags & Setting View"

Open your Configs on the ConfigCat Dashboard​

  1. Open the Products & Configs View.
  2. Find the Config you want to connect to your current Workspace under your product list.
  3. Click the 'Open Config in ConfigCat Dashboard' icon next to the Config in the list.

Help & Feedback View​

The Help & Feedback view provides quick links to open ConfigCat's Documentation and Dashboard and allows you to report issues.