編集

UX ガイドライン

これらのガイドラインは、VS Code のネイティブインターフェイスとパターンにシームレスに統合される拡張機能を作成するためのベストプラクティスを網羅しています。これらのガイドラインでは、次の情報を期待できます。

VS Code の全体的な UI アーキテクチャと要素の概要
拡張機能によって提供される UI の推奨事項と例
関連するガイドとサンプルへのリンク

詳細に入る前に、VS Code のさまざまなアーキテクチャ UI 部分がどのように組み合わされ、拡張機能がどのように、どこで貢献できるかを理解することが重要です。

コンテナ

VS Code インターフェイスは、大まかにコンテナとアイテムという2つの主要な概念に分けられます。一般的に、コンテナは、1つまたは複数のアイテムをレンダリングするVS Code インターフェイスの大きなセクションと考えることができます。

アクティビティバー

アクティビティバーは、VS Code のコアナビゲーションサーフェスです。拡張機能は、プライマリサイドバーにビューをレンダリングするビューコンテナとして機能するアイテムをアクティビティバーに貢献できます。

プライマリサイドバーは、1つまたは複数のビューをレンダリングします。アクティビティバーとプライマリサイドバーは密接に結合しています。貢献されたアクティビティバーアイテム（ビューコンテナ）をクリックすると、そのビューコンテナに関連付けられた1つまたは複数のビューがレンダリングされるプライマリサイドバーが開きます。具体的な例としては、エクスプローラーがあります。エクスプローラーアイテムをクリックすると、フォルダー、タイムライン、およびアウトラインビューが表示されるプライマリサイドバーが開きます。

セカンダリサイドバーも、ビューコンテナとビューをレンダリングするためのサーフェスとして機能します。ユーザーは、ターミナルや問題ビューなどのビューをセカンダリサイドバーにドラッグして、レイアウトをカスタマイズできます。

エディター

エディターエリアには、1つまたは複数のエディターグループが含まれています。拡張機能は、エディターエリアで開くカスタムエディターまたはWebviewを貢献できます。また、エディターツールバーに追加のアイコンボタンを公開するためにエディターアクションを貢献することもできます。

パネル

パネルは、ビューコンテナを公開するための別のエリアです。デフォルトでは、ターミナル、問題、出力などのビューは、パネル内で一度に1つのタブで表示できます。ユーザーは、エディターで行うのと同様に、ビューを分割レイアウトにドラッグすることもできます。さらに、拡張機能は、アクティビティバー/プライマリサイドバーではなく、パネルにのみビューコンテナを追加することもできます。