Setup VS Code extension

For the best experience possible, we have created a VS Code extension that helps with development and testing of the exporters. It allows you to access the contents of the design systems directly from the VS Code and can simulate how the exporter will behave when used in the delivery pipelines.

1. Install the extension

1. Open up VS Code and head over to the extension marketplace.
2. Search for "Supernova".
3. Click Install.

You’ll see the Supernova icon pop up on the left. That means you’re good to go!

2. Obtain your developer key

Next, you'll need your developer key to allow the extension to safely access your design systems.

1. Make sure you've got a Supernova account.
2. Go to Settings > Account > Authentication.
3. Click New authentication token and enter a name for the token.
4. Click Generate token.
5. You can then copy the generated token to your clipboard. Keep it safe; you'll need it in a sec.

3. Log in to the extension

Now, head back to VS Code and click on that shiny new Supernova icon.

1. You’ll see a “Login” option. Click it.
2. Paste in your developer key and hit Enter.

If everything went through, you'll see an option to select a workspace, design system and other options. Select which one you want to use for building (you can always change it down the road) and confirm your selection.

4. Optional: Optimize developer experience

When building exporters (specifically, when you have opened any exporter root folder), you'll notice that the Supernova extension switches to development mode, giving you an additional panel that you can use to access your design system content and run the exporter in debug/production mode.

We strongly recommend you move the design system contexts tab to the file browser, simply by dragging it and moving it to the file explorer tab, like in the picture above. This will make it easy for you to both build and run an exporter at the same time.

That's it! With everything prepared, let's get building.