Using VSCode with Lens Studio

Recently, I noticed a few new files in my lens studio project folders…

Screen Shot 2022-05-11 at 9.32.39 AM

The debugger

This launch.json is used for attaching the vscode debugger to an external app (like lens studio). This will let us see all sorts of live info from lens studio directly in vscode. It’s not just logs - it also allows you to set breakpoints and view global and local variables!

The launch.json file enables this button in the debug panel, to attach to lens studio.

Trying to use it without the extension won’t do much except for frustrate you. I tried it and couldn’t find any “lensstudio” extension in the vscode extensions list.

Screen Shot 2022-05-11 at 9.51.44 AM

Installing the debugger extension

I did manage to find this doc after googling some very specific terms. Basically, you need to download the vsix extension file from the lens studio site, then install it manually.

Here are the installation docs: https://docs.snap.com/lens-studio/references/guides/general/vscode-extension/

There’s a lot of info in there, but to simply install the debugger extension, go to the extensions panel and click “Install from VSIX” and select the vsix file you downloaded.

vscode-extension-2-a11b3b6c6a47dfb094ff8aafd64b6caf

If all goes well, you should see the extension in the list.

Now you can open the lens studio project root in VSCode and start debugging! You’ll get a dialog about trusting the files when you open the project for the first time. Since Snapchat probably isn’t plotting to steal your NFTs, you can click “Yes, I trust the authors.”

Now you should be able to attach the VSCode debugger to Lens Studio! You can set breakpoints, log messages, and inspect global and local variable states. It’s neat!

Code hinting and type definitions

Code hinting works fine in Lens Studio, and that’s the only reason I used the built-in editor before now. This one feature saves so much time, I couldn’t go without it. In general I think that’s the only thing the editor does well, so I’m happy to see this feature in VSCode. I can finally move back to writing scripts in my favorite editor!

If you need some more information about a particular object, you can poke around in the type definitions. It’s a good way to get an overview of a class as a whole, and it looks like they’ve annotated the definitions with links to the docs. It’s a much more direct path than opening a browser and digging through the docs manually.

Code snippets

Another aspect of the vscode integration that I haven’t explored yet - code snippets! They look super handy, especially since I find myself googling/copy/pasting a float lerp function in every project…

vscode-extension-12-db4c06f9dd9db37fd0d6f34f9fe82f70

The official docs mention needing to install these snippets, but I didn’t do that and they work just fine. They must be included in the extension now. :man_shrugging:

I’m sure I’ll be using the input snippets since I can never remember the syntax or property names for those.

vscode-extension-7-43ddd1a2529fa5653c7b11c11116e8be

You’re a wizard, Harry

Writing scripts in any situation requires transparency. The developer needs to be able to see how things are running! It’s just not possible to KNOW everything that is happening in your scripts. Before now, I managed this inspection with print statements and visual feedback from the simulator window, but it really felt like a struggle. I came from web development before this, and by comparison, the web tooling was light years ahead of Lens Studio.

With the addition of these new integrations, I feel like Lens Studio has finally grown up and become a real development environment! Time to celebrate!

giphy_360x198_10fps_88colors

Just as a note, this stuff is all super new. You might need to update to the latest LS version for things to work the best they can. I had some trouble getting the debugger to behave, but I am super thankful for code completion, type definitions, and code snippets.

So dope! Now we must to learn to code :smiley:

1 Like

Always a good idea @Jorik_Rosa

1 Like