Webview
VS Code API がサポートする範囲を超えてカスタム機能を画面表示する必要がある場合は、完全にカスタマイズ可能なWebviewを使用できます。Webview は、本当に必要な場合にのみ使用すべきであることを理解することが重要です。
✔️ すべきこと
- Webview は本当に必要な場合にのみ使用する
- 拡張機能を文脈的に適切な場合にのみアクティブ化する
- Webview はアクティブなウィンドウに対してのみ開く
- ビュー内のすべての要素がテーマ設定可能であることを確認する (webview-view-sampleとカラー トークンのドキュメントを参照)
- ビューがアクセシビリティ ガイダンス (色のコントラスト、ARIA ラベル、キーボード ナビゲーション) に従っていることを確認する
- ツールバーおよびビューでコマンドアクションを使用する
❌ すべきでないこと
- 宣伝 (アップグレード、スポンサーなど) に使用する
- ウィザードに使用する
- すべてのウィンドウで開く
- 拡張機能の更新時に開く (代わりに通知で尋ねる)
- エディターまたはワークスペースとは無関係な機能を追加する
- 既存の機能 (ようこそページ、設定、構成など) を繰り返す
Webview の例
簡易ブラウザ
この拡張機能は、エディターの横にブラウザプレビューを開きます。
この例は、VS Code Web が VS Code 内で直接開発されている様子を示しています。Webview パネルがブラウザのようなウィンドウを表示するために使用されます。
プルリクエスト
この拡張機能は、ワークスペースのリポジトリのプルリクエストをカスタムツリービューに表示し、その後、プルリクエストの詳細ビューにWebviewを使用します。
Webview ビュー
Webview は任意のビューコンテナー (サイドバーまたはパネル) に配置することもでき、これらの要素はwebview ビューと呼ばれます。Webview と同じガイダンスが webview ビューにも適用されます。
この webview ビューは、ドロップダウン、入力、ボタンを使用するプルリクエストを作成するためのコンテンツを表示します。