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