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

Webview

VS Code API がサポートする範囲を超えるカスタム機能をVSCで表示する必要がある場合は、完全にカスタマイズ可能なWebviewを使用できます。Webviewは、本当に必要な場合にのみ使用する必要があることを理解することが重要です。

✔️ すべきこと

  • Webviewは、本当に必要な場合にのみ使用する
  • 拡張機能を適切な文脈でのみアクティブにする
  • Webviewはアクティブなウィンドウでのみ開く
  • ビュー内のすべての要素がテーマ設定可能であることを確認する(webview-view-sampleカラートークンのドキュメントを参照)
  • ビューがアクセシビリティのガイダンス(色のコントラスト、ARIAラベル、キーボードナビゲーション)に従っていることを確認する
  • ツールバーとビューでコマンドアクションを使用する

❌ すべきでないこと

  • プロモーション(アップグレード、スポンサーなど)に使用する
  • ウィザードに使用する
  • すべてのウィンドウで開く
  • 拡張機能の更新時に開く(代わりに通知で尋ねる)
  • エディターやワークスペースに関係のない機能を追加する
  • 既存の機能(ウェルカムページ、設定、構成など)を繰り返す

Webviewの例

簡易ブラウザ

この拡張機能は、エディターの横にブラウザのプレビューを開きます。

Weview sample - Browser

この例では、VS Code WebがVS Code内で開発されている様子を示しています。Webviewパネルは、ブラウザのようなウィンドウをレンダリングするために使用されます。

プルリクエスト

この拡張機能は、ワークスペースのリポジトリのプルリクエストをカスタムツリービューに表示し、プルリクエストの詳細ビューにWebviewを使用します。

Webview sample - Pull Request

Webviewビュー

Webviewは任意のビューコンテナ(サイドバーまたはパネル)に配置することもでき、これらの要素はWebviewビューと呼ばれます。同じWebviewのガイダンスがWebviewビューにも適用されます。

Webview View

このWebviewビューは、ドロップダウン、入力、ボタンを使用するプルリクエストを作成するためのコンテンツを表示します。