Table of contents
What is CodeSwing
If you are a front-end developer, you have definitely heard of CodePen. It's a fantastic online editor to type HTML/CSS/JS code and showcase your work to the world. Among myriads of online editors, it has carved its presence prominently. But it lacks in one department. It can't deliver the full experience of an offline code editor or an IDE.
You can't use your snippets, your favourite extensions as well as custom keybindings. Even though it has support for keybindings for Vim as well as Sublime Text, you don't have fine-grained control.
--> Enter CodeSwing.
It is CodePen in your Visual Studio Code with a lot more useful features. The power of your installed extensions, themes, keybindings, snippets is available to you. Isn't that great?
How to use it
Just like you create a pen in CodePen, you create a swing in CodeSwing.
Create a folder in the location of your choice for a new project and open it in VSC. This step is important. Don't skip it.
Install the CodeSwing extension.
Open Command Palette using cmd+shift+p and type CodeSwing. You shall be provided with the option to choose among five options.
If you choose the first option i.e. CodeSwing: New Scratch Swing..., you will be provided with a list of options. Choose one that fits your project.
Let's choose the second option which is Basic: HTML/CSS/JavaScript.
CodeSwing generates four windows in split mode, three for HTML, CSS and JavaScript and another one for live-preview.
The swing that you just opened is saved inside a folder named codeswing in your system temp directory. It is not saved in the folder that you opened in your VSC (the very first step that we did).
This is a bug that I have found that if you have not opened any folder in your VSC, the CodeSwing extension fails to create any new swing.
If you want to permanently save your swing, open VSC settings using the shortcut cmd+, and search for 'CodeSwing'. Find the option Codeswing: Scratch Directory and provide an absolute path.
In case you don't want to provide an absolute path and want to save to a new folder every time you create a new swing, choose the option CodeSwing: New Swing... instead of CodeSwing: New Scratch Swing....
This command will ask you to choose a local folder in the location of your choice. In this way, you will be able to re-open it later.
Along with HTML/CSS/JS files, you also get a codeswing.json file that hosts all your settings related to the current swing like any libraries (React, Bulma, etc) that you have added.
I am convinced. Tell me more.
On the top of the newly created swing window, you will find a list of options that allow you to:
change its layout the same way as in CodePen.
open console
add libraries (Angular, Font Awesome, etc)
open Chrome DevTool
You can collaborate with others using the LiveShare extension on your swing.
If you want to save your swing to CodePen, you can do that too. Open Command Palette and type CodeSwing: Export to CodePen
Let me tell you my favourite feature which is to save a new GitHub gist using the integration of GistPad with CodeSwing.
Install the GistPad extension. Sign in with GitHub account and run GistPad: New CodeSwing to save as your public gist or GistPad: New Secret CodeSwing to save as your private gist.
This is such a useful feature. Earlier, I was using Gisto app to manage my Github gists but now, I have found a new favourite.
Give this extension a shot. You will definitely like it.
PS: I am well aware of CodeSandbox and the features it provides. But this article is about providing functionalities like online editors in VSC.