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

Visual Studio Code 向け Webview UI ツールキット

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

Visual Studio Code 向け Webview UI ツールキット のパブリック プレビューを発表できることを大変嬉しく思います。このツールキットを使用すると、拡張機能の開発者は、エディター本体と同様のルックアンドフィールと動作を持つ Webview ベースの拡張機能 を Visual Studio Code 内に迅速かつ簡単に作成できます。

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

Webview UI ツールキットとは？

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

このライブラリの特長は以下の通りです。

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

なぜこれを構築したのか？

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

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

Webview UI ツールキットにより、私たちはその責任の一部を拡張機能の作成者と分かち合うことになります。テーマ設定、アクセシビリティ、そしてコア UI コンポーネントの動作やスタイルの実装といった細かな部分については私たちが担当するため、皆さんはその心配をする必要がありません。これにより、開発の容易さが向上し、開発速度が上がり、最終的にはあなたの拡張機能をユニークにする部分にもっと時間を費やすことができるようになります！

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

ぜひ Webview UI ツールキットをお試しください！ バージョン 1.0 のリリースに向けて、Webview ベースの拡張機能を作成する体験をどのように改善できるか、ご意見をお聞かせください。

詳細については、Visual Studio Code 向け Webview UI ツールキット のドキュメントをご参照ください。また、ご質問、問題の発生、機能のリクエストなどがありましたら、お気軽にご連絡ください。

ハッピーコーディング、

David と Hawk