Visual Studio Code extension
This topic describes how to integrate the Optimizely VS Code extension into Visual Studio Code.
Note
The Optimizely Visual Studio Code extension is compatible with 1.34 and higher of Visual Studio Code.
It currently only supports Feature Experimentation SDKs released before February 2021.
The Optimizely Visual Studio Code (VS Code) extension autocompletes the following parameters in Javascript, Typescript, and React:
- Feature keys (also called flag keys)
- Experiment keys (also called flag rule keys)
- Feature variables (also called flag variables)
- Event keys
In other languages, you can insert the preceding list of elements using keyboard shortcuts.
This extension also evaluates if provided feature keys are valid for Optimizely's public SDK methods (for example, getFeatureVariable
(feature_key, userID, attributes), or `isFeatureEnabled (feature_key, userID)) for Javascript and TypeScript. If a given feature_key is invalid (for example, does not exist in the datafile for the SDK key used in "Optimizely: config" command), the extension highlights it and displays a warning on hover.
Features and keyboard shortcuts
- Auto-complete for experiment and feature key parameters as well as feature variables when applicable. (for example,
getFeatureVariable
(feature_key, 'list of variables) andgetFeatureVarableString
('feature_key, 'only list of string feature variable keys) - Open feature or experiment edit page from the IDE – Highlight the feature key or experiment key and hit command-option-o.
- List Experiment variations or feature variables – Select experiment or feature key, Command-Option-v
- List Attribute Keys – Command-Option-a.
- List Events – Command-Option-e
- List Experiment Keys – Command-Option-x
- List Feature Keys – Command-Option-f
- Command "optimizely: Configuration Debug Dialog" will bring up a debug dialog within the IDE that has your current SDK key. You can run
activate
,isFeatureEnabled
, andgetFeatureVariable
functions changing the attribute to make sure you have the right configuration for your feature rollout. If you change keys, you should open a new dialog.
Installation and configuration
On installation of the Optimizely extension, VS Code will not prompt you to configure the extension. To add your SDK Key and configure the extension, run the "Optimizely: Configure" command from your command palette.
Note
If you use quick suggestions to autocomplete words, Optimizely autocomplete functionality requires the
editor.quickSuggestions.strings
setting to be enabled. Otherwise, you'll need to pressCtrl+Space
(default binding) to see your flag key suggestions.
Here is an example configuration with quick suggestions enabled:
{
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": true
}
}
Source files
Source files are available on Github.
Updated 6 months ago