CSSを記述するにあたって、Emmetやスニペットで時短を試みるケースは一般的で、あなたも導入していることだろう。これら機能によって開発は、相当に高速化していることは疑いようもない。無論わたしもVSCodeの拡張機能に追加していて、事あるごとにEmmetショートコードを書いたりスニペットを表示させたりして時短を試みている。
さて前述のものが、かなり優秀だからこれ以上はなさそうなのだけれど、GUI操作でCSSプロパティを挿入してくれるVSCode拡張機能がある。
このエントリーでは、VSCode拡張機能「Fabulous」を紹介したい。
Fabulous について
Fabulousは、Visual Studio CodeでCSS記述をサポートする。アクティブにするとサイドバーが現れてGUIを操作できる。
特徴
- CSS-in-JSライブラリ（styled-components、emotion、linaria）をサポート
.css、.scss、.js、.jsx、.tsx、component.ts、.vue、.svelteに対応
VS Code にインストール
Extensionsメニューで「fabulous」を検索して、インストールしよう。
Fabulous をつかう
CSSファイルを開き、Fabulousアイコンをクリックすることでサイドバーが開閉する。
CSSファイルにCSSセレクタを記述後、カーソルを合わせると、FabulousサイドバーにGUIが現れる。
あとは適宜CSSを指定するとよい。きっと悩むことなく直感的に操作できるはずだ。
まとめ
VSCode拡張機能「Fabulous」の紹介だった。
Fabulousを常用する場合において、つねに上から指定していくなどルールを定めておくことで一貫性のあるCSS記述ができると思われる。そもそも直感的な操作が可能ではあるが、慣れてしまえばスニペットで記述するより遥かに速くコーディングできるかもしれない。
よくない点としては、最後に指定したプロパティの末尾にセミコロンが無いこと、display:grid;が無いこと、positionの上下左右が無いこと、font-weightにboldが無いことが挙げられる。
とはいえ、時短を阻害するほどのデメリットではなく、ざっと指定してから整えればよい。使えそうならば導入してみてはいかがだろうか。
このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。
