ビュー
ビューは、サイドバーまたはパネルに表示できるコンテンツのコンテナです。ビューには、ツリービュー、ウェルカムビュー、またはウェブビューが含まれ、ビューアクションも表示できます。ビューはユーザーによって並べ替えたり、別のビューコンテナ (たとえば、プライマリサイドバーからセカンダリサイドバーへ) に移動したりすることもできます。他の拡張機能が同じビューコンテナに貢献する可能性があるため、作成するビューの数を制限してください。
✔️ すべきこと
- 可能な場合は既存のアイコンを使用する
- 言語ファイルにはファイルアイコンを使用する
- データを表示するにはツリービューを使用する
- すべてのビューにアイコンを追加する (アクティビティバーまたはセカンダリサイドバーに移動した場合に、どちらもアイコンを使用してビューを表すため)
- ビューの数を最小限に抑える
- 名前の長さを最小限に抑える
- カスタムウェブビューの使用を制限する
❌ すべきでないこと
- 既存の機能を繰り返さない
- ツリーアイテムを単一のアクションアイテムとして使用する (例: クリック時にコマンドを起動する)
- 必要でない場合はカスタムウェブビューを使用する
- エディタでウェブビューを開くにはアクティビティバーアイテム (ビューコンテナ) を使用する
この例では、ツリービューを使用してツリービューアイテムのフラットリストを表示します。
ビューの場所
ビューは、ファイルエクスプローラー、ソース管理 (SCM)、デバッグビューコンテナなどの既存のビューコンテナに配置できます。また、アクティビティバーを介してカスタムのビューコンテナに追加することもできます。さらに、ビューはパネル内の任意のビューコンテナに追加できます。セカンダリサイドバーにドラッグすることもできます。
ビューコンテナ
ビューコンテナは、その名の通り、ビューがレンダリングされる「親」コンテナです。拡張機能は、アクティビティバー/プライマリサイドバーまたはパネルにカスタムビューコンテナを提供できます。ユーザーは、アクティビティバーからパネルにビューコンテナ全体をドラッグしたり (またはその逆も可)、個々のビューを移動したりすることもできます。
これは、アクティビティバー/プライマリサイドバーに配置されたビューコンテナの例です。
これは、パネルに配置されたビューコンテナの例です。
ツリービュー
ツリービューは、ビューにコンテンツを表示するための強力で柔軟な形式です。拡張機能は、単純なフラットリストから深くネストされたツリーまで、あらゆるものを追加できます。
- アイテムにコンテキストを与えるために、説明的なラベルを使用する (該当する場合)
- アイテムタイプを区別するために、プロダクトアイコンを使用する (該当する場合)
❌ すべきでないこと
- ツリービューアイテムをコマンドを起動するボタンとして使用する
- 必要でない限り、深いネストは避ける。いくつかのレベルのフォルダー/アイテムは、ほとんどの状況で適切なバランスです。
- アイテムに3つ以上のアクションを追加する
ウェルカムビュー
ビューが空の場合、拡張機能の使用方法や開始方法をユーザーに案内するコンテンツを追加できます。ウェルカムビューでは、リンクとアイコンがサポートされています。
✔️ すべきこと
- ウェルカムビューは必要な場合にのみ使用する
- 可能な場合はボタンの代わりにリンクを使用する
- 主要なアクションにのみボタンを使用する
- リンクの宛先を示すために、明確なリンクテキストを使用する
- コンテンツの長さを制限する
- ウェルカムビューの数を制限する
- ビュー内のボタンの数を制限する
❌ すべきでないこと
- 必要ない場合はボタンを使用する
- プロモーションにウェルカムビューを使用する
- リンクテキストとして一般的な「続きを読む」を使用する
この例では、拡張機能の主要なアクションと、ドキュメントへの追加リンクが示されています。
進捗のあるビュー
ビューのIDを参照することで、ビューに進捗を表示することもできます。
ビューアクション
ビューは、ビューツールバーにビューアクションを公開できます。ノイズや混乱を避けるために、アクションを追加しすぎないように注意してください。組み込みのプロダクトアイコンを使用すると、拡張機能がネイティブUIにうまく適合します。ただし、カスタムアイコンが必要な場合はSVGアイコンを提供できます。
