Recently, I noticed a few new files in my lens studio project folders and they are hinting to a major productivity boost for people who are scripting on Lens Studio: introducing the vscode extension!
We can now use Visual Studio as a code editor with Lens Studio projects. Which is quite an important one as writing scripts in any situation requires transparency and the lens studio built-in editor wasn’t great at that. The developer needs to be able to see how things are running!
So this is a super promising update! What’s the good, the bad and the ugly?
How to install properly the Visual code extension to work with Lens Studio?
Let’s walk you through.
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.
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/ 2
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.
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…
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 🤷🏼♂️
I’m sure I’ll be using the input snippets since I can never remember the syntax or property names for those.
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!
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.
Originally published at https://lab.popul-ar.com on May 11, 2022.
