UX ガイドライン

これらのガイドラインは、VS Code のネイティブインターフェースとパターンにシームレスに統合する拡張機能を作成するためのベストプラクティスを網羅しています。これらのガイドラインでは、以下のような内容を見つけることができます。

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

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

コンテナ

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

アクティビティバー

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

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

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

エディター

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

パネル

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