The Visual Studio Code extension named “CodeSwing” just blew my socks off.
CodeSwing is an interactive coding playground for VS Code, that allows you to build/explore/learn rich web applications (“swings”). It’s like having the magic of a traditional web playground (e.g. CodePen, JSFiddle), but in Visual Studio Code!
~
Using the Command Palette you can create a new Swing in a directory. Here I’ve chosen for the classic HTML/CSS/JS (cfr. CodePen).
Using the “Add Library” command one can quickly import ES Modules, without needing to install any package. This is possible thanks to the wonderful SkyPack.
~
As you’d expect, you choose your own layout
~
The rendering engine is powered by Chromium, so you can use its DevTools.
The version of Chrome that’s bundled with the extension (or is it the Chromium that Electron uses?), is Chrome 91. Because it’s bundled, you can’t set any feature flags — such as Experimental Web Platform Features to enable Scroll-Linked Animations — on it.
~
CodeSwing also has support for React/Svelte/Vue and preprocessors.
When you create swings, you can use your favorite web languages (HTML/Pug, CSS/SCSS/Less, JS/TS) and libraries (React, Vue, Angular, etc.) and have a live preview as you type, without needing to worry about compiling or bundling anything. It’s like a visual REPL for managing runnable code snippets.
In the video below I quickly create a React Component:
~
There’s a ton of more stuff to dig into — such as exporting your Swing to CodePen — detailed in the README.
And oh, if go to codeswing.dev you get redirected to GitHub’s CodeSpaces with a preloaded CodeSwing.
Visual Studio Marketplace: Codeswing →
Codeswing Source (GitHub) →