Creates a swing in a local directory, which allows you to re-open it later, and easily share it with others (e.g. This can be useful when you tend to use the same template over and over again.ĬodeSwing: New Swing in Directory. These swings are stored in your system temp directory in a folder called codeswing, and are named based on the current date/time.ĬodeSwing: New Swing from Last Template - Creates a swing using the last template that you used. Creates a temporary swing that allows you to quickly try something out (like a visual REPL!).
Creating SwingsĪfter you install the CodeSwing extension, you can create new swings at any time, using the following commands:ĬodeSwing: New Swing. CodeSwing will detect that it's a swing and automatically layout your editor. We want to make it easy to build/explore web ideas, and so if you have any feedback, please don't hesitate to reach out!įurthermore, if you'd like to try out a fun sample, clone the Rock Paper Scissors repo, and open it up in VS Code. command and select a directoryįrom here, you can try additional languages, change the swing layout, view console output, and include external libraries.
(Optional) If you'd like to save this sample to a permanent location, run the CodeSwing: Save Current Swing As.
command, and select the desired templateĮdit any of the opened files and see the CodeSwing preview update automatically as you type ? Install the CodeSwing extension and then reload VS Code That said, if you interpret "swing" as the dance style, that's totally cool too! ? What's the meaning of the name "swing"? As the extension's logo implies, it's referring to a swing on playground, to elicit the idea of having fun. If that doesn't sound fun, then I don't know what is!
When you're happy with a swing, you can also export it to CodePen in order to share it with the world! Finally, since CodeSwing is a VS Code extension, it can integrate with other VS Code extensions, to enable compelling scenarios such as managing your swings as GitHub Gists, recording guided walkthroughs of your swings, and collaborating on a swing in real-time. It's like a visual REPL for managing runnable code snippets.ĬodeSwing supports template galleries, which allows you to create re-usable swing templates. CodePen, JSFiddle), but available directly from your highly-personalized editor: themes, keybindings, and extensions.oh my! 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 having the magic of a traditional web playground (e.g. CodeSwing is an interactive coding playground for VS Code, that allows you to build/explore/learn rich web applications ("swings").