VSCode拡張機能「Fabulous」でCSS記述を時短!高速コーディングのお供に

CSSを記述するにあたって、Emmetやスニペットで時短を試みるケースは一般的で、あなたも導入していることだろう。これら機能によって開発は、相当に高速化していることは疑いようもない。無論わたしもVSCodeの拡張機能に追加していて、事あるごとにEmmetショートコードを書いたりスニペットを表示させたりして時短を試みている。

さて前述のものが、かなり優秀だからこれ以上はなさそうなのだけれど、GUI操作でCSSプロパティを挿入してくれるVSCode拡張機能がある。

このエントリーでは、VSCode拡張機能「Fabulous」を紹介したい。

Fabulous について

Fabulousは、Visual Studio CodeでCSS記述をサポートする。アクティブにするとサイドバーが現れてGUIを操作できる。

fabulous

特徴

  • CSS-in-JSライブラリ(styled-components、emotion、linaria)をサポート
  • .css.scss.js.jsx.tsxcomponent.ts.vue.svelteに対応

VS Code にインストール

Extensionsメニューで「fabulous」を検索して、インストールしよう。

Extension: Fabulous — aizulab_static 2020-01-28 14-19-07

Fabulous をつかう

CSSファイルを開き、Fabulousアイコンをクリックすることでサイドバーが開閉する。

style.css — example 2020-01-28 14-26-27

CSSファイルにCSSセレクタを記述後、カーソルを合わせると、FabulousサイドバーにGUIが現れる。

あとは適宜CSSを指定するとよい。きっと悩むことなく直感的に操作できるはずだ。

style.css — example 2020-01-28 14-41-28

まとめ

VSCode拡張機能「Fabulous」の紹介だった。

Fabulousを常用する場合において、つねに上から指定していくなどルールを定めておくことで一貫性のあるCSS記述ができると思われる。そもそも直感的な操作が可能ではあるが、慣れてしまえばスニペットで記述するより遥かに速くコーディングできるかもしれない。

よくない点としては、最後に指定したプロパティの末尾にセミコロンが無いこと、display:grid;が無いこと、positionの上下左右が無いこと、font-weightにboldが無いことが挙げられる。

とはいえ、時短を阻害するほどのデメリットではなく、ざっと指定してから整えればよい。使えそうならば導入してみてはいかがだろうか。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。