HTMLやJavaScriptのプレイグラウンドサービスは便利です。特に外部公開する際に便利なのですが、逆にオフラインで自分だけをちょっと試したい時には面倒だったりします。社内データにアクセスした結果を試したい時にも不便でしょう。 今回紹介するCodeSwingはVisual Studio Code上で使えるプレイグラウンドです。

CodeSwingの使い方

作成はコマンドで行います。

HTMLだけやテンプレートエンジンやCSSエンジンを選択できます。

作成しました。コード補完が付いているのが便利です。

TypeScriptで書いてちゃんと動きます。

画面構成の変更も可能です。

CodeSwingを使えばVisual Studioがそのままプレイグラウンドになります。SCSSを試したり、Pugテンプレートを使うこともできます。TypeScriptの練習にもいいでしょう。公開せず、こそっと試すのに最適です。

CodeSwingはTypeScript製のオープンソース・ソフトウェア(MIT License)です。

codespaces-contrib/codeswing: VS Code extension for building web applications ("swings") using a interactive and editor-integrated coding environment