🚀 VS Code で で入手しましょう!

ビュー

ビューは、サイドバーまたはパネルに表示できるコンテンツのコンテナーです。ビューには、ツリービュー、ウェルカムビュー、または Webview ビューを含めることができ、ビューアクションを表示することもできます。ビューは、ユーザーが再配置したり、別のビューコンテナー(たとえば、プライマリサイドバーからセカンダリサイドバーへ)に移動したりすることもできます。他の拡張機能が同じビューコンテナーに機能拡張できるため、作成するビューの数を制限してください。

✔️ 実行すること

  • 可能な場合は既存のアイコンを使用する
  • 言語ファイルにはファイルアイコンを使用する
  • データを表示するにはツリービューを使用する
  • すべてのビューにアイコンを追加する(アクティビティバーまたはセカンダリサイドバーに移動された場合—どちらもビューを表すためにアイコンを使用します)
  • ビューの数を最小限に抑える
  • 名前の長さを最小限に抑える
  • カスタム Webview ビューの使用を制限する

❌ 実行しないこと

  • 既存の機能を繰り返さない
  • ツリーアイテムを単一のアクションアイテムとして使用しない(例:クリック時にコマンドを実行するなど)
  • 不必要な場合はカスタム Webview ビューを使用しない
  • エディターで Webview を開くためにアクティビティバー項目(ビューコンテナー)を使用しない

Views example

この例では、ツリービューを使用してツリービューアイテムのフラットリストを表示します。

ビューの場所

ビューは、ファイルエクスプローラー、ソース管理(SCM)、デバッグビューコンテナーなどの既存のビューコンテナーに配置できます。また、アクティビティバーを介してカスタムビューコンテナーに追加することもできます。さらに、ビューはパネル内の任意のビューコンテナーに追加できます。セカンダリサイドバーにドラッグすることもできます。

View locations

ビューコンテナー

ビューコンテナーは、名前が示すように、ビューがレンダリングされる「親」コンテナーです。拡張機能は、カスタムビューコンテナーをアクティビティバー/プライマリサイドバーまたはパネルに機能拡張できます。ユーザーは、アクティビティバーからパネル(またはその逆)にビューコンテナー全体をドラッグしたり、個々のビューを移動したりすることもできます。

Example of a View Container

これは、アクティビティバー/プライマリサイドバーに配置されたビューコンテナーの例です

Example of a View Container in a Panel

これは、パネルに配置されたビューコンテナーの例です

ツリービュー

ツリービューは、ビューにコンテンツを表示するための強力で柔軟な形式です。拡張機能は、単純なフラットリストから深くネストされたツリーまで、あらゆるものを追加できます。

  • アイテムにコンテキストを与えるために説明的なラベルを使用する(該当する場合)
  • アイテムタイプを区別するために製品アイコンを使用する(該当する場合)

❌ 実行しないこと

  • コマンドを実行するためのボタンとしてツリービューアイテムを使用する
  • 不必要な限り、深いネストを避けてください。フォルダー/アイテムの数レベルは、ほとんどの場合に適したバランスです。
  • アイテムに 3 つ以上のアクションを追加する

Example of a Tree View

ウェルカムビュー

ビューが空の場合、拡張機能の使用方法や開始方法についてユーザーをガイドするコンテンツを追加できます。ウェルカムビューでは、リンクとアイコンがサポートされています。

✔️ 実行すること

  • 必要な場合にのみウェルカムビューを使用する
  • 可能な場合はボタンの代わりにリンクを使用する
  • プライマリアクションにのみボタンを使用する
  • リンク先を示す明確なリンクテキストを使用する
  • コンテンツの長さを制限する
  • ウェルカムビューの数を制限する
  • ビュー内のボタンの数を制限する

❌ 実行しないこと

  • 不必要な場合はボタンを使用する
  • プロモーションにウェルカムビューを使用する
  • 汎用的な「詳細はこちら」をリンクテキストとして使用する

Welcome Views

この例は、拡張機能の 1 つのプライマリアクションと、ドキュメントへの追加リンクを示しています。

進行状況付きビュー

ビューの ID を参照することにより、ビューに進行状況を表示することもできます。

View with progress

ビューアクション

ビューは、ビューツールバーでビューアクションを公開できます。ノイズや混乱を避けるために、アクションをあまり多く追加しないように注意してください。組み込みの製品アイコンを使用すると、拡張機能がネイティブ UI と並んで適合するのに役立ちます。ただし、カスタムアイコンが必要な場合は、SVG アイコンを提供できます。

Example of View Actions