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