これは期待！Visual Studio Codeでページやアプリなど、フロントエンドの実装が楽になる機能拡張 -Gimli

Visual Studio Codeが、Webページやアプリのフロントエンド開発用ビジュアルツールになる機能拡張「Gimli」がリリース予定なので紹介します。

CSS GridやFlexboxの実装が単純化されるビジュアルツールで、React、VueJS、Angularなど、さまざまなフレームワークやライブラリもサポートされています。

Gimli

Gimliはフロントエンド開発者を対象にしたVisual Studio Codeの機能拡張です。多くのビジュアルツールがリリースされており、それらは「コード無し」を売りにしていますが、Gimliは「コード有り」を特徴にしています。
Visual Studioのコード開発環境とビジュアルツールの融合です。

Gimliのデモ

Gimliは複雑なレイアウトを作成するプロセスを非常に単純化するビジュアルツールが用意されています。もちろん、CSS GridもFlexboxも完璧にサポートされています。

Gimliのデモ

React、VueJS、Angular、Stencil、Wordpress、Bootstrapなど、さまざまなフレームワークやライブラリもサポートされています。

さまざまなフレームワークやライブラリもサポート

スタイルをコピーペーストする必要はありません。 Gimlisを使ってスタイルを適用すると、どのスタイルが追加・削除・変更されたかを確認し、それらのスタイルをスタイルシートやコンポーネントに適用することができます。

スタイルの適用

他にも下記の機能の実装が予定されています。

• タイポグラフィ・テキストツール
• スニペットのインポート
• トランスフォーム・パースペクティブツール
• HTMLの書き出し・整形
• DOMツリービュー
• カラー・ブランディングツール

Gimliは、ベータ版が2019年第3四半期/第4四半期にリリース予定で、1.0が2020年初頭にリリースされる予定です。

Kickstarterで、Gimliの支援を募っています。
Gimliの2年ライセンス付きが、約3,247円です。

Gimli -Kickstarter