For Developers

トークンの入力を補助するVS Codeの機能拡張の紹介

Ubie Design Tokens for VS Code#

Tokensの自動補完をしてくれるVS Codeの機能拡張です。マーケットプレイスからインストールできます。

インストール後、CSS（もしくはSass）ファイルを開き--とタイプするとTokenの候補が表示されます。候補を選択すると、var()に内包されCSSカスタムプロパティとして値が挿入されます。

また、CSSカスタムプロパティをホバーすると、その値の詳細が表示さるようになります。

途中までカスタムプロパティを入力することで候補が表示される流れ

カスタムプロパティをホバーし、詳細な値が表示されている