VS Codeのエージェントモードを拡張するには、を試してください！

Visual Studio Code 向けの Webview UI Toolkit

2021年10月11日 David Dossett (@david_dossett) および Hawk Ticehurst (@hawkticehurst) より

Visual Studio Code 向けのWebview UI Toolkitのパブリックプレビューを発表できることを大変嬉しく思います。このツールキットを使用すると、拡張機能開発者は Visual Studio Code で、エディターそのもののように見え、感じられ、動作するWebview ベースの拡張機能を迅速かつ簡単に作成できます。

Webview UI Toolkit for Visual Studio Code: gallery view of components

Webview UI Toolkit とは？

このツールキットの核となるのは、開発者が拡張機能の Webview 内でユーザーインターフェースを構築するために使用できるコンポーネントライブラリです。ただし、これにより、Webview がどうしても必要な場合を除き、拡張機能でのWebview の使用を避けるという当社の推奨事項が変更されるわけではありませんのでご注意ください。

このライブラリの機能は以下の通りです。

  • Visual Studio Code のデザイン言語を実装: エディターの他の部分と一貫したルック＆フィールを持つ拡張機能を作成できます。
  • カラーテーマの自動サポート: すべてのコンポーネントはテーマを念頭に置いて設計されており、現在のエディターテーマを自動的に表示します。
  • 任意の技術スタックを使用可能: このライブラリは Web コンポーネントのセットとして提供されるため、開発者は拡張機能がどの技術スタック (React、Vue、Svelte など) で構築されていても、このツールキットを使用できます。
  • 標準でアクセシブル: すべてのコンポーネントには、Web 標準に準拠した ARIA ラベルとキーボードナビゲーションが付属しています。

なぜ開発したのか？

Webview を使用する拡張機能が、ユーザーにとって予測可能で、一貫性があり、アクセシブルであることを保証したいと考えました。

拡張機能がWebview APIを使用する場合、Webview ガイドラインに準拠した UI を作成する責任は、拡張機能の作者にあります。その結果、Webview は Visual Studio Code の他の部分とは異なる外観や動作をするリスクがあります。最悪の場合、ユーザーはエディターの他の部分とはまったく異なる、アクセシビリティの低い拡張機能の UI を操作しなければなりません。

Webview UI Toolkit を使用することで、その責任の一部を拡張機能の作者と分担できるようになりました。コア UI コンポーネントのテーマ設定、アクセシビリティ、および動作/スタイリングの実装に関する細かい詳細について私たちが心配するので、お客様は心配する必要がありません。これにより、開発の容易性が向上し、開発者の速度が向上し、最終的には拡張機能を独自のものにする部分に費やす時間が増えることを意味します！

皆様からのフィードバックが必要です！

Webview UI Toolkit をぜひお試しください！1.0 リリースに向けて、Webview ベースの拡張機能を作成する体験をどのように改善できるか、ぜひお知らせください。

詳細については、Visual Studio Code 向けの Webview UI Toolkit のドキュメントを参照してください。さらに、ご質問がある場合、問題が発生した場合、または機能リクエストがある場合は、お気軽にお問い合わせください。

ハッピーコーディング、

David と Hawk