Scripting
The Spark AR Extension for Visual Studio Code

The Spark AR Extension for Visual Studio Code

Spark AR Studio Extension for VSCode is a Visual Studio Code extension providing support for Spark AR Studio scripts, featuring Language Support, Debugging, Mirrored Console and more. You’ll also have access to integrated code helpers to see inline errors and warnings.

Getting started

Make sure you have the latest version of Spark AR Studio installed.

Downloading the extension

By clicking Download Extension, you agree to the Spark AR Studio Terms and Facebook's Data Policy. You can uninstall the extension at any time.

I accept the Spark AR Studio Terms and Facebook's Data Policy

Installing the extension

If you haven’t already installed Microsoft Visual Studio Code, download it here. You’ll need to install v1.47 or above.

To open the Spark AR Studio extension in Microsoft Visual Code:

  1. Open Microsoft Visual Code.
  2. Under the extensions menu, click then Install from VSIX.

Select Spark AR Studio Helper.vsix. You’ll see the extension in your Installed section:

Using the extension

Start by opening a project in Spark AR Studio.

Next, create a new script:

  1. In the Assets panel, click Add Asset.
  2. Select Script from the menu.

In Visual Studio Code, open the script you just created. It will be called script.js by default.

Activate the extension using the Command Palette in VSCode. Select Activate Spark AR Studio Helper:

Mirroring the console

To mirror the Spark AR Studio Console in Visual Studio Code:

  1. In Spark AR Studio, create a new script.
  2. In the script, write the following code:

In Visual Studio Code, activate the Spark AR Studio Extension. You’ll see the console output in Visual Studio Code along with the extension UI panel.

You’ll also see errors in console:

Debugging

In VSCode, create a script file using the following code:

Place a breakpoint in line 6:

In the debug panel, select Run and Debug, then Spark AR Studio.

The debug session will start and stop at the breakpoint assigned:

Hovering over the variables in debug mode will show you more information about their state:

Learn more about debugging in Visual Studio Code.

Adding watchers

Create a new script with the following code:

Next load the script in Visual Studio Code and activate the extension. You’ll see mirrored watchers in the watchers panel in Visual Studio Code:

SparkSL support

Opening a SparkSL script file in Visual Studio Code with the extension active will enable syntax highlighting.

Code autocompletion is also supported. For example, typing std:: will display a list of functions provided by the SparkSL API.

Was this article helpful?